Resco’s App Configurator 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.
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:
- No anchor or left anchor active only: the cell is not moved or resized in any way.
- Right anchor active only: the cell is moved so that the distance from the right side of the row is preserved.
- Left and right anchor activated: the cell is resized by the same amount as the row.
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).
