iOS线性布局

前言

首先写这篇文章以前祝你们周末愉快，而后自我介绍一下，我叫吴海超(WHC)在iOS领域有丰富的开发架构经验Github之后我也会以文章的形式分享具备实战意义的文章给你们，但愿可以给你们有所帮助。

主题

这期我想给你们讲讲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！我会根据你们的需求提供更多的接口！

也借此机会推荐阅读本人其余优秀开源项目：Github
1.存储高性能模型对象数据库：github.com/netyouli/WH…
2.Json转Model类Mac工具：github.com/netyouli/WH…
3.局部监听VC自动管理键盘：github.com/netyouli/WH…
4.扫描iOS/Android项目没有使用图片mac工具：github.com/netyouli/WH…

到了这里很是感谢您的阅读谢谢！