IOS线性布局

主题
这期我想给大家讲讲iOS中的线性布局,我想做过Android的朋友都熟悉线性布局，非常好用快捷强大，而我们iOS9官方也推出了类似线性布局的框架UIStackView，好下面我们详细介绍这个UIStackView。
UIStackView介绍
我相信很多做iOS的同学都还没正式开始使用这个框架吧，因为它最低支持iOS9，很显然我们App很多都需要支持iOS7甚至iOS6。UIStackView是一种快速UI布局框架（水平/垂直方向）根据参数自动约束子视图，能大大提高我们开发效率。使用UIStackView我们不需要对添加其中的子视图添加约束了，取而代之的是你需要设置一些很有描述性的属性，比如坐标（Axis）、间隔（Spacing）、对齐（Alignment）以及分布（Distribution ）等。自然的，你可以在属性设置面板上来配置，这样你就可以通过鼠标轻松的制作出在所有iOS设备上都还不错的用户界面了。
下面我们看看这个使用UIStackView的例子：
实现代码如下：

• (void)viewDidLoad {
  [super viewDidLoad];
  // 创建StackView实例
  UIStackView containerView = UIStackView.new;
  [self.view addSubview: containerView];
  // 对StackView添加约束
  containerView.whc_LeftSpace(0)
  .whc_TopSpace(100)
  .whc_RightSpace(0)
  .whc_Height(200);
  /// 设置布局方向水平
  containerView.axis = UILayoutConstraintAxisHorizontal;
  /// 设置子视图分布StackView比例相等
  containerView.distribution = UIStackViewDistributionFillEqually;
  /// 设置子视图之间间隙为10
  containerView.spacing = 10;
  /// 设置子视图填充StackView
  containerView.alignment = UIStackViewAlignmentFill;
  /// 往StackView里面添加4个子视图
  for (NSInteger i = 0; i < 4; i++) {
  UIView view = [[UIView alloc] init];
  view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
  [containerView addArrangedSubview:view];
  }
  }复制代码上面使用约束布局库WHC_AutoLayout
  UIStackView总结
  我们现在可以看到UIStackView确实给我们开发带来了很多方便，但是它也有两个不足的地方：（1）由于只支持iOS9以上的系统，这让我们兼容很困难。（2）只支持水平和垂直方向，有时候我们需要向九宫格一样的布局（同时具有水平和垂直方向布局），这就有点不方便。（3）布局参数理解比较困难，表达不够清楚（可能是我的问题，呵呵。。。）
  WHC_StackView介绍
  我根据上面3点不足我自己就开始了构造类似UIStackView的计划名为：WHC_StackView。首先WHC_StackView是完全基于自动布局库WHC_AutoLayout而开发也是其中的一个子模块，所以WHC_StackView有Swift，OC版本。
  优点
  （1）支持iOS6以上系统（2）支持水平/垂直和同时水平垂直布局（类似九宫格）（3）支持自动分割线设置（3）简单清晰的参数配置
  例子

• (void)viewDidLoad {
  [super viewDidLoad];
  WHC_StackView * stackView = [WHC_StackView new];
  [self.view addSubview: stackView];

  /// 一行代码添加约束
  stackView.whc_LeftSpace(10)
  .whc_TopSpace(10)
  .whc_RightSpace(10)
  .whc_Height(100);

  /// 配置StackView
  stackView.whc_Edge = UIEdgeInsetsMake(10, 10, 10, 10); // 内边距
  stackView.whc_Orientation = All; // 自动水平垂直混合布局
  stackView.whc_HSpace = 10; // 子视图横向间隙
  stackView.whc_VSpace = 10; // 子视图垂直间隙
  stackView.whc_Column = 2； // 设置水平子视图为2列

  /// 向StackView中添加4子视图
  for (int i = 0; i < 4; i++) {
  UIView * view = UIView.new;
  [stackView addSubview:view];
  }
  /// 开始进行布局
  [stackView whc_StartLayout];
  }复制代码Demo

支持分割线设置的WHC_StackView（水平，垂直，水平垂直方向）

自动宽高的WHC_StackView

结束
WHC_StackView开源地址：github.com/netyouli/WH…

如果您在使用过程中有任何问题，欢迎issue me!
很乐意为您解答任何相关问题!
与其给我点star，不如向我狠狠地抛来一个BUG！
如果您想要更多的接口来自定义或者建议/意见，欢迎issue me！我会根据大家的需求提供更多的接口！

作者：WHC
链接：https://juejin.im/post/586b546c1b69e60063f4f345
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。