protez / mllayout

Flexbox in Objective-C, using Facebook's css-layout.

MLLayout

       

Flexbox in Objective-C, using Facebook's css-layout.

Inspired by React Native.

• Flexbox is the best way to layout in mobile platform. So many popular libraries use it, eg: componentkit, AsyncDisplayKit, React Native, weex and so on.
• React Native,weex and MLLayout are based on the C implementation of facebook/css-layout.
• Some code references from React Native, eg: snapping to the pixel grid(No misaligned images to improve drawing performance]).
• MLLayout can be just used for layout calculation. The calculation will update frames of layouts. Every layout associated with a view usually. You may or may choose not to use the frames or change them. with your mind.
• MLTagViewFrameRecord can preserve current topology of layouts or views. A prerequisite is that each has a valid tag.
• Using MLTagViewFrameRecord related TableView and TableViewCell can ensure that the layout calculation for one row would not be excuted twice unless reloading it explicitly. The feather can improve scrolling performance greatly.

FlexBox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

##中文介绍

• Flexbox是现今移动端最优的布局方式，像componentkit, AsyncDisplayKit, React Native, weex等等优秀的开源库都在使用此种布局方式。
• React Native和weex以及MLLayout都一样是基于facebook开源facebook/css-layout的c实现。
• MLLayout的一些代码实现是借鉴于React Native，例如布局计算结果进行默认像素对齐，提升渲染性能。
• 对以往纯代码布局的开发者而言，MLLayout也可以作为仅仅用来以语义化的形式快速计算布局结果的工具，像对关联的view的frame进行设置，再次调整啊这些都可以自己来做，也可以通过提供的方法自动设置。
• MLTagViewFrameRecord可以记录当前的布局结构，但是前提是需要缓存frame的view需要有独特的tag用以之后将记录应用到对应的view上。
• MLTagViewFrameRecord相关的TableView和TableViewCell呢，提供了自动缓存cell布局(当然顺带也有高度啦)的实现，这样的话能保证同一行的布局只会计算一次，除非显式reload。这个能大大的提高列表的滚动性能。

FlexBox教程: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Usage

Simple demo below:

MLLayout *bkgViewLayout = [MLLayout layoutWithTagView:_bkgView block:^(MLLayout * _Nonnull l) {
        l.marginLeft = l.marginRight = 10.0f;
        //test for round pixel
        l.padding = UIEdgeInsetsMake(10.34f, 15.37f, 10.5608f, 15.3567f);
        
        l.flexDirection = MLLayoutFlexDirectionColumn;
        l.alignItems = MLLayoutAlignmentCenter;
        l.alignSelf = MLLayoutAlignmentCenter;
        l.sublayouts = @[
                         [MLLayout layoutWithTagView:_firstLabel block:nil],
                         [MLLayout layoutWithTagView:_secondLabel block:^(MLLayout * _Nonnull l) {
                             l.marginTop = 10.0f; //space
                             l.flex = -1;
                         }],
                         ];
    }];
    
    _layout = [MLLayout layoutWithTagView:self.view block:^(MLLayout * _Nonnull l) {
        l.flexDirection = MLLayoutFlexDirectionColumn;
        l.justifyContent = MLLayoutJustifyContentCenter;
        l.alignItems = MLLayoutAlignmentCenter;
        l.sublayouts = @[
                         [MLLayout layoutWithTagView:nil block:^(MLLayout * _Nonnull l) {
                             //test MLLayoutPositionAbsolute
                             l.position = MLLayoutPositionAbsolute;
                             l.bottom = 20.0f;
                             l.right = 20.0;
                             
                             l.flexDirection = MLLayoutFlexDirectionColumn;
                             l.sublayouts = @[
                                              [MLLayout layoutWithTagView:_button block:nil],
                                              [MLLayout layoutWithTagView:displaySwitchButton block:^(MLLayout * _Nonnull l) {
                                                  l.marginTop = 10.0f;
                                              }]
                                              ];
                         }],
                         [MLLayout layoutWithTagView:_imageView block:^(MLLayout * _Nonnull l) {
                             //test MLLayoutPositionRelative
                             l.position = MLLayoutPositionRelative;
                             l.bottom = 10.0f;
                         }],
                         bkgViewLayout
                         ];
    }];
    

The demo uses MLLayout to layout subviews of cells and MLTagViewFrameRecord to preserve all layout result. Ensure that the layout calculation for one row would not be excuted twice unless reloading it explicitly. The feather can improve scrolling performance greatly.

Installation

CocoaPods

1. Add pod 'MLLayout' to your Podfile.
2. Run pod install or pod update.
3. Import <MLLayout/MLLayout.h>.

Requirements

This library requires iOS 7.0+ and Xcode 7.0+.

License

MLLayout is provided under the MIT license. See LICENSE file for details.