2014-12-26

iOS UIKit flow layout views like in web style

Views: 2634 | Add Comments

I have made a small library to help easy building iOS layout. It will do the UI layout in the famous and popular Flow Layout. Flow Layout is the basic of web browser, it made UI program simple and powerful.

For years until now, Apple never provide Flow Layout for iOS and Mac OS X developers. The auto-resizing and auto-layout(contrant-layout) is complicated and few useful. You ofter ruin the WHOLE UI design in XCode IB if you make one LITTLE mistake.

So I develop Flow Layout for iOS UI design, you can do the UI layout like millions of web developers do everyday, and save a lot of time. I will build a UI simulator very soon, the simulator will work as a web browser: you write XML with text editor, save it, and refresh the simulator App installed in you iPhone, then the UI reflects.

Here’s a simple example to do Flow Layout in Objective-C programmatically:

// the container doing Flow Layout
IView *iview = [IView viewWithSize:CGSizeMake(340, 0)];

[self.iview addSubview:make_btn(@"+", 35, 35) style:@"clear: left;"];
[self.iview addSubview:make_btn(@"+", 35, 35) style:@"float: right;"];
[self.iview addSubview:make_btn(@"Middle", 35, 35) style:@"width: 100%;"];

// now set the container as view controller's view
viewController.view = iview;

The UI will display as

# the container
+--------------------------------+
| +------+ +----------+ +------+ |
| | Left | |  Middle  | | Right| |
| +------+ +----------+ +------+ |
+--------------------------------+

# as the container's width grows
+----------------------------------------+
| +------+ +------------------+ +------+ |
| | Left | |      Middle      | | Right| |
| +------+ +------------------+ +------+ |
+----------------------------------------+

# Middle's width(100%) grows, Left and Right keep fixed width

Supported layout style properties: float, clear, margin, width, height.

Posted by ideawu at 2014-12-26 23:10:39

Leave a Comment