使用stackview模仿計(jì)算器布局

簡(jiǎn)介

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

本文會(huì)詳細(xì)介紹UIStackView的使用,可以參考代碼理解,上圖就是使用stackview制作的計(jì)算器UI,也在此代碼庫(kù)中.

內(nèi)部控件如何布局

在給內(nèi)部控件進(jìn)行布局之前,stackview應(yīng)該首先有確定的布局,內(nèi)部子控件可以不設(shè)置frame或者約束,而使用stackview的屬性來(lái)完成布局

決定UIStackView內(nèi)部控件的布局具體布局主要是axis,space,alignment,alignment,其中稍微繞一些是distribution和alignment,理解這兩個(gè)屬性首先需要理解軸方向,也就是屬性axis值.

distribution控制子視圖沿軸方向的布局

alignment控制子視圖垂直于軸方向的布局

詳細(xì)解釋如下所示. 如果還是不好理解可以參考代碼看下效果

用來(lái)測(cè)試UIStackview的Demo

open var axis: NSLayoutConstraint.Axis // 子控件布局方向(水平或者垂直),也就是下面說(shuō)的軸方向,
/**
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è)人感覺(jué)比較重要摘抄下來(lái),出自

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在計(jì)算size的時(shí)候使用子控件的intrinsicContentSize屬性

內(nèi)部控件添加約束

stackview不僅可以使用屬性自動(dòng)計(jì)算約束,也可以主動(dòng)添加約束,可以代碼中的計(jì)算器布局

另外也可以使用iOS 11新增apisetCustomSpacing來(lái)調(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,如果可見(jiàn)的話是會(huì)顯示出來(lái)的.個(gè)人感覺(jué)這點(diǎn)比較坑,不太懂為何這么設(shè)計(jì).

stackview 的顯示

雖然stackview繼承自UIView,但是并不會(huì)渲染什么內(nèi)容,僅僅是給arrangedSubviews提供布局而已

所以設(shè)置stackview的backgroundColor沒(méi)有任何效果,也不能夠重寫draw等方法

參考

apple UIStackview

UIStackview 使用起來(lái)還是比較方便的,熟練使用能夠減少繁瑣的UI布局,希望你會(huì)喜歡
最后推薦一個(gè)使用UIStackview的demo:UIStackViewPlayground