Advanced tip: Managing cell anchors in views

cell_anchors

Resco’s Woodford customization tool provides multiple components that allow you to make the corresponding parts of the mobile app dynamically adapt to different display sizes.

One of those components are anchors that are used to control the view’s cell behavior when the row is resized. When activated, the anchor will fix the boundary position of the cell to the side that the anchor is pointing at. When the anchors are set correctly, the view data will be displayed correctly if the user rotates the screen from the portrait mode to landscape or vice versa.

anchors_001

Since upper and lower anchors (either activated or deactivated) have no impact on the view layout, the setup of the meaningful cell’s anchors can be as follows:

  1. No anchor or left anchor active only: the cell is not moved or resized in any way.
  2. Right anchor active only: the cell is moved so that the distance from the right side of the row is preserved.
    anchors_004
  3. Left and right anchor activated: the cell is resized by the same amount as the row.
    anchors_005

Here are a few tips for managing the anchors in the views:

  • In the adjacent cells, only one anchor should be activated on the common border. If both anchors are activated and the text in the cell is longer, the cells are overlapping and some part of the text might not be readable.
  • The following is one of possible anchor configurations for 3 cells in 1 row. Clearly, it only makes sense to have one cell in each logical row which has both left and right anchor activated. If there are two cells with both anchors activated, overlapping will occur.
  • Cell styling can impact the anchor’s configuration, especially the Horizontal Alignment. In general, cells on the left side of the view should be aligned to the left (Horizontal Alignment = Near); cells on the right side should be aligned to the right (Horizontal Alignment = Far).

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s