2015-01-26

Flow Layout UI for iOS Apps

Views: 24139 | Add Comments

Flow Layout is the key of Web UI, it is a more human natural mechanism of laying out UI/GUI widgets in the screen. With Flow Layout, UI widgets like buttons, labels, text-inputs are placed one by one into an area(rectangle) of the screen, each widget occupy its own area, normally, widgets are not overlapped.

Years ago, there is only Fixed Layout for iOS Apps development, Fixed Layout requres developers to determine the exact position(x, y) and size(width, height) of each widget, so it is so limited functionality, one of its most noticable weakness is that it can not properly deal with iPhone 4 and iPhone 5, because they have different screen resolutions.

Later Apple introduced Auto Layout layout, which is yet another Relative Layout. Flow Layout and Auto Layout(Relative Layout) are both adaptive UI layout mechanisms, both work fine with multi screen resolutions.

But the most significant between them is that:

  • Flow Layout focus on one widget at a time.
  • Auto Layout requires two or more widgets to work around.

Apparently, dealing with one thing is simpler than dealing with many things. So, Flow Layout is superior to Auto Layout, not mention that Apple’s Auto Layout over complicated.

Here is codes using Auto Layout(taken from https://github.com/Masonry/Masonry):

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[superview addConstraints:@[
    //view1 constraints
    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:padding.top],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:padding.left],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-padding.bottom],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeRight
                                multiplier:1
                                  constant:-padding.right],

]];

With Flow Layout, it is one line of code:

[superview.style set:@"padding: 10;"];

Auto Layout could not (easily) work when you don’t know who is beside you; With Flow Layout you only concern about yourself, you don’t care who lies beside you.

Next, I will introduce the simplicity and power of Flow Layout to you, you will learn a new skill in one hour, for web developers, it is three minutes. Let’s go!

float: left or right

iOS Flow Layout

We want to place two views into the destination area(rect), but we don’t need to specify the coordinations of them, just let View1 to float: left, and then tell View2 to float: right. No matter how the dest area grows or shrinks, View1 will always lay at the top left edge, and View2 lies on the top right edge.

float: center

iOS Flow Layout

Place View2 at horizontal center.

when space won’t fit

iOS Flow Layout

View1 is placed at left, View2 is placed at right. When placing View3, it first look for the space between View1 and View2, and it finds out that space is too small, so View3 will be placed stacked on top of View1.

clear: left – I do not allow any other widgets lay at my left

iOS Flow Layout

We apply clear: left on View2, so it will be placed stacked on top of View1, it will not be placed right nex to View1, because it requires no widget on its left.

clear: right

iOS Flow Layout

Imagine we apply clear: right on View1, the first widget being placed. Then View2 will not be able to occupy the space on View1’s right.

percentage width

iOS Flow Layout

When specify percentage width of a view, it is not the percentage of its superview(the destination area), but the percentage of the space it is being placed.

So, if you want to implement an n columns layout, just specify ratio width of each view as:

  • view 1: 1.0/n
  • view 2: 1.0/(n-1)
  • view 3: 1.0/(n-2)
  • view n: 1.0/(n-(n-1))

The Box Model

iOS Flow Layout

The Box Model of CocoaUI‘s Flow Layout consists of: margin, border, padding, inner. These properties are explained in the picture.

Posted by ideawu at 2015-01-26 12:42:30 Tags: ,

Leave a Comment