OC FlexLib 布局库的基本使用与常用API

FlexLib 是一个强大且灵活的 Objective-C 布局库，基于 Facebook 的 Yoga 引擎构建，支持 Flexbox 布局模型。它可以帮助开发者更方便地构建复杂的 UI 布局。

下面列举了一些常用的 API 及其注释，以帮助你更好地理解和使用 FlexLib。

常用 API 列表

布局方向和换行

• flexDirection(FlexDirection)：设置主轴方向。

  • FlexDirectionRow：主轴为水平方向。
  • FlexDirectionColumn：主轴为垂直方向。
  • FlexDirectionRowReverse：主轴为水平方向，起点为右端。
  • FlexDirectionColumnReverse：主轴为垂直方向，起点为底端。

• flexWrap(FlexWrap)：设置是否换行。

  • FlexWrapNoWrap：不换行。
  • FlexWrapWrap：换行，第一行在上。
  • FlexWrapWrapReverse：换行，第一行在下。

对齐方式

• justifyContent(FlexJustify)：设置主轴对齐方式。

  • FlexJustifyStart：从主轴起点对齐。
  • FlexJustifyCenter：居中对齐。
  • FlexJustifyEnd：从主轴终点对齐。
  • FlexJustifySpaceBetween：两端对齐，项目之间间隔相等。
  • FlexJustifySpaceAround：每个项目两侧间隔相等。

• alignItems(FlexAlign)：设置交叉轴对齐方式。

  • FlexAlignStretch：拉伸到容器的高度。
  • FlexAlignStart：从交叉轴起点对齐。
  • FlexAlignCenter：沿交叉轴居中对齐。
  • FlexAlignEnd：从交叉轴终点对齐。
  • FlexAlignBaseline：基线对齐。

• alignSelf(FlexAlign)：设置单个项目沿交叉轴的对齐方式，覆盖 alignItems。

  • 参数同 alignItems。

• alignContent(FlexAlign)：设置多根轴线的对齐方式。

  • 参数同 alignItems。

子视图属性

• flexGrow(CGFloat)：设置项目的放大比例。
• flexShrink(CGFloat)：设置项目的缩小比例。
• flexBasis(CGFloat)：设置项目的基准值。
• flexSize(CGSize)：设置项目的大小。
• margin(CGFloat)：设置项目的外边距。
• padding(CGFloat)：设置项目的内边距。

其他

• flex_addSubview(UIView *)：向视图添加子视图。
• flex_layout：计算并应用布局。

示例

下面是一些示例代码，展示如何使用这些 API：

UIView *containerView = [UIView new];
containerView.flexDirection = FlexDirectionRow; // 设置主轴为水平方向
containerView.flexWrap = FlexWrapWrap; // 设置自动换行

UIView *subview1 = [UIView new];
subview1.flexSize(CGSizeMake(50, 50)).margin(10); // 设置子视图大小和外边距

UIView *subview2 = [UIView new];
subview2.flexSize(CGSizeMake(50, 50)).margin(10); // 设置子视图大小和外边距

[containerView flex_addSubview:subview1];
[containerView flex_addSubview:subview2];

// 添加到父视图并设置约束
[self.view addSubview:containerView];
containerView.frame = self.view.bounds;
[containerView flex_layout];

下面是一些常用和稍微复杂的使用示例，以帮助你更好地理解 FlexLib 的功能和用法。

常用示例

示例 1：简单的水平和垂直布局

这是一个常见的水平和垂直布局示例，包含两个子视图。

UIView *containerView = [UIView new];
containerView.flexDirection = FlexDirectionRow; // 设置为水平布局

[containerView flex_addSubview:[[UIView alloc] init]].flexSize(CGSizeMake(50, 50)).margin(10);
[containerView flex_addSubview:[[UIView alloc] init]].flexSize(CGSizeMake(50, 50)).margin(10);

// 添加到父视图并设置约束
[self.view addSubview:containerView];
containerView.frame = self.view.bounds;
[containerView flex_layout];

示例 2：自动换行的水平布局

当子视图超出父视图宽度时，自动换行。

UIView *containerView = [UIView new];
containerView.flexDirection = FlexDirectionRow;
containerView.flexWrap = FlexWrapWrap; // 启用换行

for (int i = 0; i < 10; i++) {
    [containerView flex_addSubview:[[UIView alloc] init]].flexSize(CGSizeMake(50, 50)).margin(10);
}

// 添加到父视图并设置约束
[self.view addSubview:containerView];
containerView.frame = self.view.bounds;
[containerView flex_layout];

复杂示例

示例 3：嵌套布局

这是一个稍微复杂的示例，展示了嵌套布局的使用。

UIView *rootView = [UIView new];
rootView.flexDirection = FlexDirectionColumn; // 主轴为垂直方向

UIView *headerView = [UIView new];
headerView.flexSize(CGSizeMake(FLEX_AUTO, 60)).backgroundColor([UIColor redColor]);

UIView *bodyView = [UIView new];
bodyView.flexDirection = FlexDirectionRow; // 主轴为水平方向
bodyView.flexGrow(1).backgroundColor([UIColor greenColor]);

// 左侧视图
UIView *leftView = [UIView new];
leftView.flexSize(CGSizeMake(100, FLEX_AUTO)).backgroundColor([UIColor blueColor]);
[bodyView flex_addSubview:leftView];

// 主内容视图
UIView *mainContentView = [UIView new];
mainContentView.flexGrow(1).backgroundColor([UIColor yellowColor]);
[bodyView flex_addSubview:mainContentView];

// 添加子视图到根视图
[rootView flex_addSubview:headerView];
[rootView flex_addSubview:bodyView];

// 添加到父视图并设置约束
[self.view addSubview:rootView];
rootView.frame = self.view.bounds;
[rootView flex_layout];

示例 4：复杂的表单布局

这里是一个复杂的表单布局示例，包括标签和输入框。

UIView *formView = [UIView new];
formView.flexDirection = FlexDirectionColumn;
formView.padding(20);

NSArray *fields = @[@"Name", @"Email", @"Phone"];

for (NSString *field in fields) {
    UIView *fieldContainer = [UIView new];
    fieldContainer.flexDirection = FlexDirectionRow;
    fieldContainer.marginBottom(10);
    
    UILabel *label = [UILabel new];
    label.text = field;
    label.flexSize(CGSizeMake(80, FLEX_AUTO));
    
    UITextField *textField = [UITextField new];
    textField.borderStyle = UITextBorderStyleRoundedRect;
    textField.flexGrow(1);
    
    [fieldContainer flex_addSubview:label];
    [fieldContainer flex_addSubview:textField];
    [formView flex_addSubview:fieldContainer];
}

// Submit 按钮
UIButton *submitButton = [UIButton buttonWithType:UIButtonTypeSystem];
[submitButton setTitle:@"Submit" forState:UIControlStateNormal];
submitButton.flexMarginTop(20).alignSelf(FlexAlignCenter);

[formView flex_addSubview:submitButton];

// 添加到父视图并设置约束
[self.view addSubview:formView];
formView.frame = self.view.bounds;
[formView flex_layout];

结论

FlexLib 提供了一种基于 Flexbox 的布局方式，可以方便地实现响应式和复杂的 UI 布局。无论是简单的水平、垂直布局，还是复杂的嵌套和表单布局，FlexLib 都能高效地完成任务。通过学习这些示例，你可以更好地理解和应用这个强大的布局库。在实际项目中，根据需求调整布局参数，能实现更符合设计要求的 UI 界面。