FlexBoxLayout

特点

Flexbox 布局；
链式调用，布局方便；
虚拟视图 Div；
TableView 支持自动高度、布局缓存，contentView 缓存，和自动 cache 失效机制；
ScrollView 支持自适应 contentSize；
异步计算布局。

预览

示例

使用 git clone 命令下载此仓库，Examples 目录包含示例程序；
用 XCode 打开对应项目编译。

或执行以下命令：

git clone [email protected]:LPD-iOS/FlexBoxLayout.git; cd FlexBoxLayout/Example; open 'FlexBoxLayout.xcworkspace'

安装

FlexBoxLayout 可以通过 CocoaPods 进行获取。只需在你的 Podfile 中添加以下代码即可实现引入：

pod "FlexBoxLayout"

然后，执行以下命令即可：

$ pod install

示例代码

- (void)layoutView {

  [self fb_makeLayout:^(FBLayout *layout) {
    layout.flexDirection.equalTo(@(FBFlexDirectionColumn)).margin.equalToEdgeInsets(UIEdgeInsetsMake(0, 15, 0, 15)).alignItems.equalTo(@(FBAlignFlexStart));
  }];

  [_titleLabel fb_makeLayout:^(FBLayout *layout) {
    layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(10, 0, 0, 0)).wrapContent();
  }] ;
  

  [_contentLabel fb_makeLayout:^(FBLayout *layout) {
    layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(10, 0, 0, 0)).wrapContent();
  }];

  [_contentImageView fb_makeLayout:^(FBLayout *layout) {
    layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(10, 0, 0, 0)).wrapContent();
  }];

  [_usernameLabel fb_makeLayout:^(FBLayout *layout) {
    layout.wrapContent().flexGrow.equalTo(@(1.0));
  }];

  [_timeLabel fb_makeLayout:^(FBLayout *layout) {
    layout.wrapContent().flexGrow.equalTo(@(1.0));
  }];

  FBLayoutDiv *div = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionRow ];

  [div fb_makeLayout:^(FBLayout *layout) {
  layout.flexDirection.equalTo(@(FBFlexDirectionRow)).justifyContent.equalTo(@(FBJustifySpaceBetween)).alignItems.equalTo(@(FBAlignFlexStart)).margin.equalToEdgeInsets(UIEdgeInsetsMake(10, 0, 0, 0));
  }];

  div.fb_children = @[_usernameLabel,_timeLabel];

  self.fb_children =@[_titleLabel,_contentLabel,_contentImageView,div];
}

使用

以下是一些有关 Flexbox 的介绍：FlexBox(中文)、Flexbox 完美指南和 CSS3 Flexbox 属性视觉指南。

1. UIView + FBLayout 使用

这里有一些简单用法

UIScrollView *contentView = [UIScrollView new];
contentView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-44);
[self.view addSubview:contentView];


UIView *child1 = [UIView new];
child1.backgroundColor = [UIColor blueColor];

[child1 fb_makeLayout:^(FBLayout *layout) {
  layout.width.height.equalTo(@100);
}];

UIView *child2 = [UIView new];
child2.backgroundColor = [UIColor greenColor];
[child2 fb_makeLayout:^(FBLayout *layout) {
  layout.equalTo(child1);
}];


UILabel *child3 = [UILabel new];
child3.numberOfLines = 0;
child3.backgroundColor = [UIColor yellowColor];
[child3 fb_wrapContent];
[child3 setAttributedText:[[NSAttributedString alloc] initWithString:@"testfdsfdsfdsfdsfdsfdsafdsafdsafasdkkk" attributes:@{NSFontAttributeName :[UIFont systemFontOfSize:18]}] ];

[contentView addSubview:child1];
[contentView addSubview:child2];
[contentView addSubview:child3];


FBLayoutDiv *div1 = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn
                                               justifyContent:FBJustifySpaceBetween
                                                   alignItems:FBAlignCenter
                                                     children:@[child1, child2,child3]];



[div1 fb_makeLayout:^(FBLayout *layout) {
  layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(20, 0, 0, 0));
  layout.width.equalTo(@(150));
}];


UIView *child5 = [UIView new];
child5.backgroundColor = [UIColor blueColor];

child5.CSSStyles = @{FBWidthAttributeName:@(50),
                     FBHeightAttributeName:@(50),
                     FBMarginAttributeName:[NSValue valueWithUIEdgeInsets:UIEdgeInsetsMake(0, 0, 10, 0)],
                     FBFlexGrowAttributeName:@1.0};

UIView *child6 = [UIView new];
child6.backgroundColor = [UIColor greenColor];
[child6 fb_makeLayout:^(FBLayout *layout) {
  layout.equalTo(child5);
  layout.flexGrow.equalTo(@(2.0));
   layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));
}];


UIView *child7 = [UIView new];
child7.backgroundColor = [UIColor yellowColor];
[child7 fb_makeLayout:^(FBLayout *layout) {
  layout.equalTo(child5);
}];

UIView *child8 = [UIView new];
child8.backgroundColor = [UIColor blackColor];

[child8 fb_makeLayout:^(FBLayout *layout) {
  layout.equalTo(child5);
}];

FBLayoutDiv *div2 =[FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn
                                              justifyContent:FBJustifySpaceAround
                                                  alignItems:FBAlignCenter
                                                    children:@[child5,child6,child7,child8]];
[div2 fb_makeLayout:^(FBLayout *layout) {
  layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(20, 0, 0, 0));
  layout.width.equalTo(@(150));
}];

[contentView addSubview:child5];
[contentView addSubview:child6];
[contentView addSubview:child7];
[contentView addSubview:child8];

FBLayoutDiv *root = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionRow
                                               justifyContent:FBJustifySpaceAround
                                                   alignItems:FBAlignCenter
                                                     children:@[div1,div2]];

contentView.fb_contentDiv = root;
[root fb_asyApplyLayoutWithSize:[UIScreen mainScreen].bounds.size];

2. FBLayoutDiv

FBLayoutDiv 是虚拟视图，将视图分割到不同的区域，避免过多视图。

FBLayoutDiv *div1 = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn
                                               justifyContent:FBJustifySpaceBetween
                                                   alignItems:FBAlignCenter
                                                     children:@[child1, child2,child3]];
                                
FBLayoutDiv *div2 =[FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn
                                              justifyContent:FBJustifySpaceAround
                                                  alignItems:FBAlignCenter
                                                    children:@[child5,child6,child7,child8]];
root.fb_children = @[div1,div2];

3. UITableView+FBLayout

它是 UITableViewDataSource 的分类。它支持 FBLayout 的自动单元格高度和易于使用。

[self.tableView fb_setCellContnetViewBlockForIndexPath:^UIView *(NSIndexPath *indexPath) {
  return [[FBFeedView alloc]initWithModel:weakSelf.sections[indexPath.section][indexPath.row]];
}];

....

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
  return [self.tableView fb_heightForIndexPath:indexPath];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  return [self.tableView fb_cellForIndexPath:indexPath];
}

4. UIScrollView+FBLayout

它支持自动内容大小

FBLayoutDiv *root = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionRow
                                               justifyContent:FBJustifySpaceAround
                                                   alignItems:FBAlignCenter
                                                     children:@[div1,div2]];

contentView.fb_contentDiv = root;