簡(jiǎn)介
UIStackView是iOS 9 的新增控件,唯一的作用就是幫助布局
本文會(huì)詳細(xì)介紹UIStackView的使用,可以參考代碼理解,上圖就是使用stackview制作的計(jì)算器UI,也在此代碼庫中.
內(nèi)部控件如何布局
在給內(nèi)部控件進(jìn)行布局之前,stackview應(yīng)該首先有確定的布局,內(nèi)部子控件可以不設(shè)置frame或者約束,而使用stackview的屬性來完成布局
決定UIStackView內(nèi)部控件的布局具體布局主要是axis,space,alignment,alignment,其中稍微繞一些是distribution和alignment,理解這兩個(gè)屬性首先需要理解軸方向,也就是屬性axis值.
distribution控制子視圖沿軸方向的布局
alignment控制子視圖垂直于軸方向的布局
詳細(xì)解釋如下所示. 如果還是不好理解可以參考代碼看下效果
open var axis: NSLayoutConstraint.Axis // 子控件布局方向(水平或者垂直),也就是下面說的軸方向,
/**
case fill 沿軸方向填充視圖.會(huì)按照優(yōu)先級(jí)壓縮或者拉伸子視圖
case fillEqually 沿軸方向使子視圖等寬或者等高
case fillProportionally 沿軸方向按照`intrinsic content`的比例壓縮或者拉伸
case equalSpacing 沿軸按照優(yōu)先級(jí)壓縮或者拉伸子視圖,使間隙相等
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 情況下使用, 按照第一個(gè)子視圖的baseline對(duì)齊,并保證最高視圖底部對(duì)齊
case lastBaseline .horizontal 情況下使用, 按照最后一個(gè)子視圖的baseline對(duì)齊,并保證最高視圖頂部對(duì)齊
*/
open var alignment: UIStackView.Alignment // 非軸方向的控件布局方式
open var spacing: CGFloat // 子控件的最小間距
以下個(gè)人感覺比較重要摘抄下來,出自
For all distributions except the
UIStackView.Distribution.fillEquallydistribution, the stack view uses each arranged view’sintrinsicContentSizeproperty when calculating its size along the stack’s axis.For all alignments except the
UIStackView.Alignment.fillalignment, the stack view uses each arranged view’sintrinsicContentSizeproperty when calculating its size perpendicular to the stack’s axis.大致含義是除了
fillEqually和fill,stackview在計(jì)算size的時(shí)候使用子控件的intrinsicContentSize屬性
內(nèi)部控件添加約束
stackview不僅可以使用屬性自動(dòng)計(jì)算約束,也可以主動(dòng)添加約束,可以代碼中的計(jì)算器布局
另外也可以使用iOS 11新增apisetCustomSpacing來調(diào)整兩個(gè)子控件之間距離
動(dòng)態(tài)改變stackview的內(nèi)容
當(dāng)stackview的屬性改變,或者添加/刪除arrangedSubviews的時(shí)候.stackview可以動(dòng)態(tài)的更新layout
需要注意的是:如果把view從arrangedSubviews移除,此時(shí)被移除的view還是屬于stackview的subview,如果可見的話是會(huì)顯示出來的.個(gè)人感覺這點(diǎn)比較坑,不太懂為何這么設(shè)計(jì).
stackview 的顯示
雖然stackview繼承自UIView,但是并不會(huì)渲染什么內(nèi)容,僅僅是給arrangedSubviews提供布局而已
所以設(shè)置stackview的backgroundColor沒有任何效果,也不能夠重寫draw等方法
參考
UIStackview 使用起來還是比較方便的,熟練使用能夠減少繁瑣的UI布局,希望你會(huì)喜歡
最后推薦一個(gè)使用UIStackview的demo:UIStackViewPlayground
