项目主页    by: zhenglibao     Star:    Fork:     


CI Status Version License Platform



FlexLib is an obj-c layout framework for iOS. It's based on flexbox model which is standard for web layout. So the layout capability is powerful and easy to use.

With FlexLib, you can write iOS ui much faster than before, and there are better adaptability.


This demo is hot preview:


Can you imagine you almost need nothing code to implement the following effect?

example1 example2 example3


  • layout based on xml format
  • auto variable binding
  • onPress event binding
  • support layout attribute (padding/margin/width/...)
  • support view attribute (eg: bgColor/fontSize/...)
  • support reference predefined style
  • view attributes extensible
  • support modal view
  • table cell height calculation
  • support iPhoneX perfectly
  • support hot preview


Use xml layout file for ViewController:

  • Write layout with xml file. The following is a demo file:
<UIView layout="flex:1,justifyContent:center,alignItems:center" attr="bgColor:lightGray">
    <UIView layout="height:1,width:100%" attr="bgColor:red"/>
    <FlexScrollView name="_scroll" layout="flex:1,width:100%,alignItems:center" attr="vertScroll:true">
        <UILabel name="_label" attr="@:system/buttonText,text:You can run on iPhoneX,color:blue"/>
        <UIView onPress="onTest:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test ViewController"/>
        <UIView onPress="onTestTable:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test TableView"/>
        <UIView onPress="onTestScrollView:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test ScrollView"/>
        <UIView onPress="onTestModalView:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test ModalView"/>
        <UIView onPress="onTestLoginView:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Login Example"/>
  • Derive view controller class from FlexBaseVC
@interface FlexViewController : FlexBaseVC
@interface FlexViewController ()
    // these will be binded to those control with same name in xml file
    FlexScrollView* _scroll;
    UILabel* _label;

@implementation FlexViewController

- (void)viewDidLoad
    [super viewDidLoad];
    self.navigationItem.title = @"FlexLib Demo";
- (void)didReceiveMemoryWarning
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
- (void)onTest:(id)sender {
    TestVC* vc=[[TestVC alloc]init];
    [self presentViewController:vc animated:YES completion:nil];
- (void)onTestTable:(id)sender {
    TestTableVC* vc=[[TestTableVC alloc]init];
    [self presentViewController:vc animated:YES completion:nil];

  • Now you can use the controller as normal:
    FlexViewController *vc = [[FlexViewController alloc] init];

    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
    self.window.rootViewController = nav;

    [self.window makeKeyAndVisible];

Use xml layout file for TableCell:

  • Write layout with xml file. There is no difference than view controller layout except that it will be used for tabel cell.

  • Derive table cell class from FlexBaseTableCell:

@interface TestTableCell : FlexBaseTableCell
@interface TestTableCell()
    UILabel* _name;
    UILabel* _model;
    UILabel* _sn;
    UILabel* _updatedBy;

    UIImageView* _return;
@implementation TestTableCell
  • In cellForRowAtIndexPath callback, call initWithFlex to build cell. In heightForRowAtIndexPath, call heightForWidth to calculate height
- (nonnull UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath {

    static NSString *identifier = @"TestTableCellIdentifier";
    TestTableCell* cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil) {
        cell = [[TestTableCell alloc]initWithFlex:nil reuseIdentifier:identifier];
    return cell;
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
        _cell = [[TestTableCell alloc]initWithFlex:nil reuseIdentifier:nil];
    return [_cell heightForWidth:_table.frame.size.width];

Use xml layout file for other view:

  • Write layout xml file.

  • Use FlexRootView to load xml file, then set attribute to make it have flexible width or height

  • add this FlexRootView as child view to other normal parent view

Hot preview

Hot preview for view controller

  • start http server in your local folder

    For mac with python2.7 installed:

    open Terminal and go to your folder, then input:

    python -m SimpleHTTPServer 8000

  • Set preview base url, call like this:


  • Run your project, you can press Cmd+R to reload the layout on simulator. Notice: this shortcut is available only on debug mode.

hot preview for any ui

  • Start http server in your local folder as before

  • Set preview base url

  • Set resource load way FlexSetLoadFunc(YES) or FlexSetCustomLoadFunc(loadfunc)


To run the example project, clone the repo, and open Example/FlexLib.xcworkspace with XCode to run.

Attribute Reference

Layout attributes are stable, but view attributes are still in rapid increased. You can search FLEXSET in the library to find all supported view attributes. And you can make extendsion in your project by the catagory to support more view attributes.

layout attributes

view attributes


FlexLib is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'FlexLib'

About Flexbox




zhenglibao, 798393829@qq.com. QQ qun: 687398178

You can contact me if you have any problem.

I hope you will like it. :)


FlexLib is available under the MIT license. See the LICENSE file for more info.