FlexBoxKit 0.1.2

FlexBoxKit 0.1.2

×

由 will 维护。

FlexBoxKit 0.1.2

  • 由
  • will

FlexBoxKit

Version License Platform

特点（Feature）

  • Flexbox 布局；
  • 虚拟视图 (Virtual Div)
  • TableView 支持 FBLayout 自动高度、布局缓存，contentView 缓存，和自动 cache 失效机制；（支持 FBLayout 自动单元格高度和易于使用）
  • ScrollView 支持自适应内容大小；（自适应内容大小）
  • 基于 yoga 最新版本 (基于 yoga 最新版)

预览（Preview）

示例 (example)

  1. 使用 git clone 命令下载本仓库，Examples 目录包含了示例代码；
  2. 使用 XCode 打开对应项目编译即可。

或者执行以下命令：

git clone [email protected]:fengshanjian/FlexBoxKit.git
cd FlexBoxKit/Example
open 'FlexBoxLayout.xcworkspace'

安装 (Install)

pod "FlexBoxKit"

使用

这些是一些Flexbox介绍 FlexBox(中文)，Flexbox完全指南 和 CSS3 Flexbox属性视觉指南。

1. UIView + FBKit && FBKDiv 使用

FBKDiv是一个虚拟的view，用于分割不同的区域，避免使用太多view以至层级太多

(FBKDiv是一个虚拟视图，用于分隔不同的区域，避免使用太多的视图导致层级过多。)

以下是几种简单使用方法

    UIScrollView *contentView = [UIScrollView new];
    contentView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-(iPhoneX?83:49));
    [self.view addSubview:contentView];
    
    UIView *child1 = [UIView new];
    child1.backgroundColor = [UIColor blueColor];
    [child1 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.kWidth = 100;
        layout.kHeight = 100;
    }];
    
    UIView *child2 = [UIView new];
    child2.backgroundColor = [UIColor greenColor];
    [child2 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.kWidth = 100;
        layout.kHeight = 100;
    }];
    
    UILabel *child3 = [UILabel new];
    child3.numberOfLines = 0;
    child3.backgroundColor = [UIColor yellowColor];
    [child3 setAttributedText:[[NSAttributedString alloc] initWithString:@"testfdsfdsfdsfdsfdsfdsafdsafdsafasdkkk" attributes:@{NSFontAttributeName :[UIFont systemFontOfSize:18]}]];
    child3.layout.isEnabled = YES;
    FBKDiv *div1 = [FBKDiv new];
    [div1 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.justifyContent = YGJustifySpaceBetween;
        layout.alignItems = YGAlignCenter;
        layout.kMarginTop = 20;
        layout.kWidth = 150;
    }];
    [div1 setChildren:@[child1,child2,child3]];
    
    UIView *child5 = [UIView new];
    child5.backgroundColor = [UIColor blueColor];
    [child5 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.kWidth = 50;
        layout.kMarginBottom = 10;
        layout.flexGrow = 1.0;
    }];
    
    UIView *child6 = [UIView new];
    child6.backgroundColor = [UIColor greenColor];
    [child6 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.kMargin = 10;
        layout.kWidth = 50;
        layout.flexGrow = 2.0;
    }];

    UIView *child7 = [UIView new];
    child7.backgroundColor = [UIColor yellowColor];
    [child7 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.kMarginBottom = 10;
        layout.kWidth = 50;
        layout.flexGrow = 1.0;
    }];
    
    UIView *child8 = [UIView new];
    child8.backgroundColor = [UIColor blackColor];
    
    [child8 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.kMarginBottom = 10;
        layout.kWidth = 50;
        layout.flexGrow = 1.0;
    }];
    
    FBKDiv *div2 = [FBKDiv new];
    [div2 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.justifyContent = YGJustifySpaceAround;
        layout.alignItems = YGAlignCenter;
        layout.kMarginTop = 20;
        layout.kWidth = 50;
        layout.kHeight = 800;
    }];
    [div2 setChildren:@[child5,child6,child7,child8]];
    
    FBKDiv *root = [FBKDiv new];
    [root configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.flexDirection = YGFlexDirectionRow;
        layout.justifyContent = YGJustifySpaceAround;
        layout.alignItems = YGAlignCenter;
    }];
    [root setChildren:@[div1,div2]];
    contentView.contentDiv = root;
    [contentView.layout applyLayoutPreservingOrigin:NO];

备注 (remark)

  • 请使用addChild替代addSubview 请使用addChild来替代addSubview
  • kWidth kMargin ... layout.kWidth = 10 相当于(equals) layout.width = YGPointValue(10)

2. 绝对布局(absolute layout)

FlexBox中position=absolute的使用

(绝对布局的FlexBox)

    UIView *view5 = [UIView new];
    view5.backgroundColor = [UIColor orangeColor];
    //绝对布局 absolute layout
    [view5 configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.position = YGPositionTypeAbsolute;
        layout.kLeft = 10;
        layout.kTop = 64;
        layout.kWidth = 100;
        layout.kHeight = 100;
    }];
    [root addChild:view5];
    [root.layout applyLayoutPreservingOrigin:NO];

3. UITableView+FBLayout

自动cell高度计算

(UITableView+FBLayout是UITableView的一个分类。它支持FBLayout的自动cell高度和易于使用。)

 [self.tableView fb_setCellContnetViewBlockForIndexPath:^UIView *(NSIndexPath *indexPath) {
    return [[FBKFeedView 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+FBKit

自动contentSize计算

(它支持自动计算contentSize)

    FBKDiv *root = [FBKDiv new];
    [root configureLayout:^(FBKLayout * _Nonnull layout) {
        layout.flexDirection = YGFlexDirectionRow;
        layout.justifyContent = YGJustifySpaceAround;
        layout.alignItems = YGAlignCenter;
    }];
    [root setChildren:@[div1,div2]];
    contentView.contentDiv = root;

5. 柔性容器属性

5.1 柔性方向

该属性指定了如何使用柔性容器排列内部的柔性项目，通过设置柔性容器的主轴方向。柔性项目可以按两个主方向排列，例如水平排列成行或垂直排列成列。

YGFlexDirectionRow;

ROW

YGFlexDirectionRowReverse;

RowReverse

YGFlexDirectionColumn;

Colum

YGFlexDirectionColumnReverse;

ColumReverse

5.2 柔性换行

初始的柔性容器概念是将项目设置在一行中。柔性换行属性控制柔性容器是否将项目排列在一行或多行中，以及新行堆叠的方向。它仅支持 'nowrap'（默认值）或 'wrap'。

YGWrapNoWrap;

noWrap

YGWrapWrap;

noWrap

5.3 对齐内容

对齐内容属性沿着当前行的柔性容器主轴排列柔性项目。当一行上所有的柔性项目都是不可伸缩的，或者都是可伸缩但已达到最大大小时，它有助于分配左侧的自由空间。

YGJustifyFlexStart;

JustifyFlexStart

YGJustifyCenter;

JustifyFlexStart

YGJustifyFlexEnd

JustifyFlexStart

YGJustifySpaceBetween;

JustifyFlexStart

YGJustifySpaceAround;

JustifyFlexStart

5.4 对齐项目

柔性项目可以沿着当前行的柔性容器交叉轴对齐，类似于对齐内容，但在垂直方向上。此属性设置所有柔性项目的默认对齐方式，包括匿名柔性项目。

YGAlignFlexStart;

CSSAlignFlexStart

YGAlignCenter;

CSSAlignCenter

YGAlignFlexEnd;

CSSAlignFlexEnd

YGAlignStretch;

CSSAlignStretch

5.5 align-content

align-content 属性在交叉轴有额外空间时对齐 flex 容器中的行，类似于 justify-content 如何在主轴中对齐单个项目。

YGAlignFlexStart;

CSSAlignFlexStart

YGAlignCenter;

CSSAlignFlexStart

YGAlignFlexEnd;

CSSAlignFlexStart

YGAlignStretch;

CSSAlignFlexStart

6. 弹性盒子项目属性

6.1 flex-grow

该属性指定了弹性增长因子，决定当分配正自由空间时，弹性项目相对于容器中其余弹性项目的增长多少。

FlexGrow;

FlexGrow-1.0

FlexGrow-3.0

6.2 flex-shrink

flex-shrink 属性指定了弹性收缩因子，决定当分散负自由空间时，弹性项目相对于容器中其余弹性项目的收缩多少。

默认情况下，所有弹性项目都可以收缩，但如果将其设置为 0（不收缩），则它们将保持原始大小

FlexShrink;

flex-shrink

6.3 flex-basis

该属性与 width 和 height 属性具有相同的值，并指定了在根据弹性因子分配自由空间之前，弹性项目的初始主大小。

FlexBasis:350;

flex-basis

6.4 align-self

此 align-self 属性允许为单个 flex 项目覆盖默认对齐方式（或 align-items 指定的方式）。有关 flex 容器中 align-items 的说明，请参阅相关解释以了解可用的值。

YGAlignFlexStart;

align-self

作者

will

感谢

该项目是在 YogaKit 基础上的二次封装，基本保留了 YogaKit 的所有特性，同时参照 FlexBoxLayout，引入了 virtual Div 及 TableView 的 cache 机制，因此项目中许多 FlexBoxLayout 项目的影子都在，许多甚至未经修改（拿来主义）。在此感谢@carlSQ，同时感谢 Facebook 对 Yoga 的开源。

协议

FlexBoxKit 基于 MIT 协议进行分发和使用，更多信息请参阅协议文件。MIT License

版权所有 (c) 2018 will