使用stackview模仿计算器布局

简介

UIStackView是iOS 9 的新增控件,唯一的作用就是帮助布局

本文会详细介绍UIStackView的使用,可以参考代码理解,上图就是使用stackview制作的计算器UI,也在此代码库中.

内部控件如何布局

在给内部控件进行布局之前,stackview应该首先有确定的布局,内部子控件可以不设置frame或者约束,而使用stackview的属性来完成布局

决定UIStackView内部控件的布局具体布局主要是axis,space,alignment,alignment,其中稍微绕一些是distribution和alignment,理解这两个属性首先需要理解轴方向,也就是属性axis值.

distribution控制子视图沿轴方向的布局

alignment控制子视图垂直于轴方向的布局

详细解释如下所示. 如果还是不好理解可以参考代码看下效果

用来测试UIStackview的Demo

open var axis: NSLayoutConstraint.Axis // 子控件布局方向(水平或者垂直),也就是下面说的轴方向,
/**
case fill   沿轴方向填充视图.会按照优先级压缩或者拉伸子视图
case fillEqually    沿轴方向使子视图等宽或者等高
case fillProportionally     沿轴方向按照`intrinsic content`的比例压缩或者拉伸
case equalSpacing   沿轴按照优先级压缩或者拉伸子视图,使间隙相等
case equalCentering     沿轴方向子视图中心等分
*/
open var distribution: UIStackView.Distribution // 轴方向的控件布局方式
/**
case fill   垂直于轴方向填充视图
case center     子视图中心和轴线重合

case leading    .vertical 情况下使用,垂直于轴方向靠左
case trailing   .vertical 情况下使用,垂直于轴方向靠右

case top    .horizontal 情况下使用,子视图
public static var bottom: UIStackView.Alignment { get } .horizontal 情况下使用
case firstBaseline  .horizontal 情况下使用, 按照第一个子视图的baseline对齐,并保证最高视图底部对齐
case lastBaseline   .horizontal 情况下使用, 按照最后一个子视图的baseline对齐,并保证最高视图顶部对齐
*/
open var alignment: UIStackView.Alignment // 非轴方向的控件布局方式
open var spacing: CGFloat // 子控件的最小间距

以下个人感觉比较重要摘抄下来,出自

For all distributions except the UIStackView.Distribution.fillEqually distribution, the stack view uses each arranged view’s intrinsicContentSize property when calculating its size along the stack’s axis.

For all alignments except the UIStackView.Alignment.fill alignment, the stack view uses each arranged view’s intrinsicContentSize property when calculating its size perpendicular to the stack’s axis.

大致含义是除了fillEqually和fill,stackview在计算size的时候使用子控件的intrinsicContentSize属性

内部控件添加约束

stackview不仅可以使用属性自动计算约束,也可以主动添加约束,可以代码中的计算器布局

另外也可以使用iOS 11新增apisetCustomSpacing来调整两个子控件之间距离

动态改变stackview的内容

当stackview的属性改变,或者添加/删除arrangedSubviews的时候.stackview可以动态的更新layout

需要注意的是:如果把view从arrangedSubviews移除,此时被移除的view还是属于stackview的subview,如果可见的话是会显示出来的.个人感觉这点比较坑,不太懂为何这么设计.

stackview 的显示

虽然stackview继承自UIView,但是并不会渲染什么内容,仅仅是给arrangedSubviews提供布局而已

所以设置stackview的backgroundColor没有任何效果,也不能够重写draw等方法

参考

apple UIStackview

UIStackview 使用起来还是比较方便的,熟练使用能够减少繁琐的UI布局,希望你会喜欢
最后推荐一个使用UIStackview的demo:UIStackViewPlayground