Over a million developers have joined DZone.

Anchor Views

Although it is possible to achieve similar layouts using a combination of row, column, layer, and spacer views, anchor views can provide a simpler alternative in many cases.

· Mobile Zone

Anchor views are a new feature in MarkupKit 2.6, which is now available for download. They are represented by instances of the LMAnchorView class, a layout view that optionally anchors subviews to one or more of its own edges. Although it is possible to achieve similar layouts using a combination of row, column, layer, and spacer views, anchor views can provide a simpler alternative in many cases.

Anchors are specified as a comma-separated list of edges to which the view will be anchored within its parent. For example, the following markup creates an anchor view containing four labels anchored to its top, left, right, and bottom edges. The labels will all be inset by 16 pixels (they are given a border to make their bounding rectangles visible):

<LMAnchorView layoutMargins="16">
    <UILabel text="Top" anchor="top"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
    <UILabel text="Left" anchor="left"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
    <UILabel text="Right" anchor="right"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
    <UILabel text="Bottom" anchor="bottom"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
</LMAnchorView>

Subviews may also be anchored to the leading and trailing edges of the parent view to support right-to-left locales; for example:

<LMAnchorView layoutMargins="16">
    <UILabel text="Leading" anchor="leading"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
    <UILabel text="Trailing" anchor="trailing"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
</LMAnchorView>

Additionally, subviews may be anchored to multiple edges for a given dimension. For example, the following markup creates an anchor view containing two labels, each of which will span the entire width of the anchor view:

<LMAnchorView layoutMargins="16">
    <UILabel text="Top" anchor="top, left, right" textAlignment="center"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
    <UILabel text="Bottom" anchor="bottom, left, right" textAlignment="center"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
</LMAnchorView>

If no anchor is specified for a given dimension, the subview will be centered within the anchor view for that dimension:

<LMAnchorView layoutMargins="16">
    <UILabel text="Center"
        layer.borderWidth="0.5"
        layer.borderColor="#ff0000"/>
</LMAnchorView>

For more information, see the project README.

Topics:
markup ,anchors ,mobile

Published at DZone with permission of Greg Brown, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}