前言

首先写这篇文章之前祝大家周末愉快,然后自我介绍一下,我叫吴海超(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开源地址:https://github.com/netyouli/WHC_AutoLayoutKit

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

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

到了这里非常感谢您的阅读谢谢!