前言

在過(guò)去iOS頁(yè)面布局較為傳統(tǒng)，大多數(shù)人使用Frame或者AutoLayout來(lái)布局，在iOS9以后，引入了UIStackView。UIStackView是用于線性布局的控件，可以自動(dòng)管理子視圖布局，自動(dòng)填充。它借鑒了前端的布局算法Flexbox，可以簡(jiǎn)便地實(shí)現(xiàn)各種頁(yè)面布局。

UIStackView雖然已經(jīng)不是新控件了，但還是有很多同學(xué)并沒(méi)有使用起來(lái)。通常有時(shí)改別人的代碼看到亂糟糟的布局代碼就有很多槽點(diǎn)。所以這也是寫(xiě)這篇文章的目的所在，真的推薦大家使用StackView。事半功倍，省下來(lái)的時(shí)間摸魚(yú)不香嘛。

回歸正題，不管是使用Frame或者AutoLayout來(lái)布局，我們都需要對(duì)所有的控件的位置、大小進(jìn)行設(shè)置，Frame需要指定位置布局，AutoLayout需要指定約束布局；

而UIStackView布局方式凸顯它的優(yōu)勢(shì)在于不需要設(shè)置排列視圖（即子視圖）的位置，大?。ú皇潜仨毜模?，而是通過(guò)自身的排列、分布方式自動(dòng)完成布局。

對(duì)比起來(lái)，使用UIStackView更高效，我們可以通過(guò)嵌套UIStackView快速完成各式各樣的布局。

UIStackView布局思想

UIStackView的初衷就是為了簡(jiǎn)化的界面布局，適用于列或行中布局視圖集合。

StackView使用自動(dòng)布局(AutoLayout)來(lái)定位和設(shè)置其排列視圖的大小。StackView將第一個(gè)和最后一個(gè)排列的視圖與其沿堆棧軸的邊緣對(duì)齊。在水平堆棧中，這意味著第一個(gè)排列視圖的前緣被固定在StackView的前緣上，而最后一個(gè)排列視圖的后緣被固定在StackView的后緣上；在垂直堆棧中，頂部和底部邊緣分別固定在堆棧的頂部和底部邊緣上。

StackView會(huì)根據(jù)自身的布局規(guī)則進(jìn)行填充排列視圖。

distribution：

distribution 即排列方式：

• fill根據(jù)抗拉伸、壓縮優(yōu)先級(jí)填充（默認(rèn)拉伸第一個(gè)排列視圖）
• fillEqually在排列方向上的填充大小相同（即橫向布局寬度相同，縱向布局高度相同）
• fillProportionally根據(jù)排列視圖的大小按比例填充
• equalSpacing均勻地填充視圖之間的間距
• equalCentering根據(jù)排列視圖中心點(diǎn)之間的相同間隔填充

alignment：

alignment即對(duì)齊方式：(垂直于排列方向)

• fill填充排列視圖到StackView的可用空間
• top以StackView的頂部排列（與之相似的是leading）
• bottom以StackView的尾部排列（與之相似的是trailing）
• center以StackView的中間排列
• firstBaseline以第一個(gè)基準(zhǔn)線排列
• lastBaseline以最后一個(gè)的基準(zhǔn)線排列

如需設(shè)置排列視圖之間的間距可以通過(guò)設(shè)置space屬性，若是排列視圖之間的間距不同，可以使用方法指定某個(gè)排列視圖的間距（此方法iOS11以上使用），或者使用一個(gè)無(wú)用的view插入在視圖之間替代間隙，此view僅作為間距使用（使用xib、Storyboard會(huì)經(jīng)常使用此類方法，可以參照）。

當(dāng)你真的了解UIStackView的這些布局思想之后，你就會(huì)知道它能幫你解決很多繁瑣的布局。（如一個(gè)多變的底部操作欄、一行大小各異的控件等等）

從上面的布局思想中，不難看出，其實(shí)我們僅需要確定StackView的排列方向，以及排列方式、對(duì)其方式，就能大體上對(duì)整個(gè)排列視圖初步的布局，而后在根據(jù)不同的視圖進(jìn)行大小上的調(diào)整以及間距的調(diào)整即可。

使用UIStackView來(lái)自動(dòng)布局子視圖，你只需要每個(gè)子視圖關(guān)注自身的大小即可。

以此類操作欄為例，舉個(gè)栗子??：

先說(shuō)說(shuō)我們常用的布局方式，可能還是會(huì)有一部分人會(huì)選擇Frame布局，或者AutoLayout布局。

但此類UI在設(shè)計(jì)之初，通常會(huì)有很多狀態(tài)、特征，每一種狀態(tài)下，控件都會(huì)變化。

那么Frame布局在這種布局容易變化的情況下，就顯得有非常的繁瑣，布局代碼非常的多，并且狀態(tài)很多的時(shí)候不好維護(hù)。 同樣AutoLayout也是如此，需要寫(xiě)很多的更新布局約束。

這個(gè)時(shí)候，借用UIStackView的思想，我們可以很簡(jiǎn)單的實(shí)現(xiàn)這個(gè)布局。每個(gè)控件只關(guān)注自身大小，不會(huì)對(duì)其他的空間產(chǎn)生依賴關(guān)系，在需要時(shí)顯示出來(lái)，不需要時(shí)隱藏起來(lái)。

我們先以文本輸入入口“說(shuō)點(diǎn)什么”小試牛刀。

下面就是用StackView布局的效果。

這里我是使用的xib結(jié)合StackView。如果我們平時(shí)使用的代碼布局，也可以使用代碼結(jié)合StackView布局，這樣也會(huì)減少很多代碼量，可以自行腦補(bǔ)。

UIStackView用法

初始化

與其他控件一樣的初始化方式；

- (instancetype)initWithFrame:(CGRect)frame NS_DESIGNATED_INITIALIZER;
- (instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;

當(dāng)然也可以選擇專屬的初始化方式；

- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;

添加、刪除子視圖

- (void)addArrangedSubview:(UIView *)view;
- (void)removeArrangedSubview:(UIView *)view;

排列方向

@property(nonatomic) UILayoutConstraintAxis axis;
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = 0, // 水平方向
    UILayoutConstraintAxisVertical = 1    // 垂直方向
};

布局方式

@property(nonatomic) UIStackViewDistribution distribution;
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
    UIStackViewDistributionFill = 0, //子視圖填充滿指定方向，優(yōu)先拉伸第一個(gè)控件
    UIStackViewDistributionFillEqually, //每個(gè)子視圖填充大小相等，
    UIStackViewDistributionFillProportionally, //根據(jù)每個(gè)子視圖里面內(nèi)容的尺寸來(lái)進(jìn)行填充操作
    UIStackViewDistributionEqualSpacing, //每個(gè)子視圖之間的間距相等
    UIStackViewDistributionEqualCentering, //每個(gè)子視圖中心直接的間距相等
} API_AVAILABLE(ios(9.0));

對(duì)齊方式

@property(nonatomic) UIStackViewAlignment alignment;
typedef NS_ENUM(NSInteger, UIStackViewAlignment) { 
    UIStackViewAlignmentFill, //水平:subView的上下和StackView的上下邊距 相等   垂直: subView的左右邊距和 StackView的所有相等 
    UIStackViewAlignmentLeading,//垂直有效 ：左對(duì)齊
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading, // 水平有效 上對(duì)齊
    UIStackViewAlignmentFirstBaseline,//水平有效，第一行基準(zhǔn)線對(duì)齊。
    UIStackViewAlignmentCenter, //中心基準(zhǔn)線對(duì)齊 1.水平 高度中點(diǎn)對(duì)齊 2.垂直：寬度中點(diǎn)對(duì)齊
    UIStackViewAlignmentTrailing,  //垂直有效，右邊界對(duì)齊。
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,// 水平有效 ，下邊界對(duì)齊。
    UIStackViewAlignmentLastBaseline,//水平有效，最后一行基準(zhǔn)線對(duì)齊。
} API_AVAILABLE(9_0);

間距

@property(nonatomic) NSInteger space; //排列視圖相鄰邊緣之間的距離。

以上就是iOS界面布局簡(jiǎn)化UIStackView使用詳解的詳細(xì)內(nèi)容，更多關(guān)于iOS UIStackView布局簡(jiǎn)化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論