UIStackView
UIStackView能夠利用自動(dòng)布局的功能,創(chuàng)建能夠動(dòng)態(tài)適應(yīng)設(shè)備方向凸舵、屏幕大小和可用空間中任何更改的用戶(hù)界面祖娘。UIStackView管理其arrangedSubviews屬性中所有視圖的布局。這些視圖是根據(jù)它們?cè)赼rrangedSubviews數(shù)組中的順序沿堆棧視圖的軸線排列的啊奄。具體布局因UIStackView的軸線渐苏、分布掀潮、對(duì)齊、間距和其他特性而異琼富。我們負(fù)責(zé)定義UIStackView的位置和大小(可選)仪吧,UIStackView管理其內(nèi)容的布局和大小。
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *redButton = [UIButton buttonWithType:UIButtonTypeCustom];
[redButton setTitle:@"紅色按鈕" forState:UIControlStateNormal];
redButton.backgroundColor = [UIColor redColor];
UIButton *greenButton = [UIButton buttonWithType:UIButtonTypeCustom];
[greenButton setTitle:@"綠色按鈕" forState:UIControlStateNormal];
greenButton.backgroundColor = [UIColor greenColor];
UIButton *blueButton = [UIButton buttonWithType:UIButtonTypeCustom];
[blueButton setTitle:@"藍(lán)色按鈕" forState:UIControlStateNormal];
blueButton.backgroundColor = [UIColor blueColor];
UIStackView *stackView = [[UIStackView alloc]initWithArrangedSubviews:@[redButton,greenButton,blueButton]];
stackView.backgroundColor = [UIColor yellowColor];
stackView.alignment = UIStackViewAlignmentCenter;
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFill;
[self.view addSubview:stackView];
stackView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraints:@[
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
}
顯示如下:
當(dāng)設(shè)置藍(lán)色視圖隱藏時(shí)鞠眉,顯示如下:
當(dāng)修改UIStackView約束薯鼠,限制UIStackView大小時(shí),顯示如下:
stackView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraints:@[
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
[stackView.heightAnchor constraintEqualToConstant:100],
[stackView.widthAnchor constraintEqualToConstant:300],
]];
當(dāng)修改子視圖約束凡蚜,限制子視圖大小時(shí)人断,顯示如下:
stackView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraints:@[
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
redButton.translatesAutoresizingMaskIntoConstraints = NO;
[stackView addConstraints:@[
[redButton.heightAnchor constraintEqualToConstant:50],
[redButton.widthAnchor constraintEqualToConstant:100],
]];
greenButton.translatesAutoresizingMaskIntoConstraints = NO;
[stackView addConstraints:@[
[greenButton.heightAnchor constraintEqualToConstant:50],
[greenButton.widthAnchor constraintEqualToConstant:80],
]];
blueButton.translatesAutoresizingMaskIntoConstraints = NO;
[stackView addConstraints:@[
[blueButton.heightAnchor constraintEqualToConstant:50],
[blueButton.widthAnchor constraintEqualToConstant:120],
]];
既限制UIStackView約束,又限制子視圖約束時(shí)朝蜘,至少有一個(gè)子視圖可以由UIStackView進(jìn)行調(diào)整恶迈,顯示如下:
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *redButton = [UIButton buttonWithType:UIButtonTypeCustom];
[redButton setTitle:@"紅色按鈕" forState:UIControlStateNormal];
redButton.backgroundColor = [UIColor redColor];
UIButton *greenButton = [UIButton buttonWithType:UIButtonTypeCustom];
[greenButton setTitle:@"綠色按鈕" forState:UIControlStateNormal];
greenButton.backgroundColor = [UIColor greenColor];
UIButton *blueButton = [UIButton buttonWithType:UIButtonTypeCustom];
[blueButton setTitle:@"藍(lán)色按鈕" forState:UIControlStateNormal];
blueButton.backgroundColor = [UIColor blueColor];
UIStackView *stackView = [[UIStackView alloc]initWithArrangedSubviews:@[redButton,greenButton,blueButton]];
stackView.backgroundColor = [UIColor yellowColor];
stackView.alignment = UIStackViewAlignmentCenter;
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFill;
[self.view addSubview:stackView];
stackView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraints:@[
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
[stackView.heightAnchor constraintEqualToConstant:100],
[stackView.widthAnchor constraintEqualToConstant:200],
]];
redButton.translatesAutoresizingMaskIntoConstraints = NO;
[stackView addConstraints:@[
[redButton.heightAnchor constraintEqualToConstant:50],
[redButton.widthAnchor constraintEqualToConstant:80],
]];
greenButton.translatesAutoresizingMaskIntoConstraints = NO;
[stackView addConstraints:@[
[greenButton.heightAnchor constraintEqualToConstant:50],
[greenButton.widthAnchor constraintEqualToConstant:80],
]];
blueButton.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *blueButtonWidthAnchor = [blueButton.widthAnchor constraintEqualToConstant:120];
blueButtonWidthAnchor.priority = UILayoutPriorityDefaultLow;
[stackView addConstraints:@[
[blueButton.heightAnchor constraintEqualToConstant:50],
blueButtonWidthAnchor,
]];
}
UIStackView就像一個(gè)自動(dòng)適應(yīng)其子視圖約束或管理其子視圖約束的容器視圖,可以大量的節(jié)省設(shè)置或更新約束的代碼谱醇。我們需要在某一方面放權(quán)給UIStackView暇仲,如果我們嚴(yán)格限制UIStackView的約束,就應(yīng)當(dāng)給予UIStackView自動(dòng)調(diào)整其子視圖約束的權(quán)力副渴,如果我們嚴(yán)格限制其子視圖約束奈附,就應(yīng)當(dāng)給予UIStackView自動(dòng)調(diào)整自身約束的權(quán)力,如果我們既嚴(yán)格限制UIStackView的約束煮剧,又嚴(yán)格限制其子視圖約束斥滤,我們會(huì)得到約束沖突,這是來(lái)自UIStackView的抗議勉盅。
常用屬性
@property(nonatomic) UILayoutConstraintAxis axis;
屬性描述 :設(shè)置UIStackView排列視圖時(shí)所沿的軸線方向佑颇。UILayoutConstraintAxis提供了兩個(gè)枚舉值,UILayoutConstraintAxisHorizontal(水平排列)與UILayoutConstraintAxisVertical(垂直排列)草娜,默認(rèn)為UILayoutConstraintAxisHorizontal挑胸。
- UILayoutConstraintAxis提供的枚舉值:
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
//水平排列
UILayoutConstraintAxisHorizontal = 0,
//垂直排列
UILayoutConstraintAxisVertical = 1
};
@property(nonatomic) UIStackViewDistribution distribution;
屬性描述 : 設(shè)置UIStackView沿指定軸線方向布局子視圖的方式。
- UIStackViewDistribution提供的布局子視圖的方式如下:
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
/* 一種布局宰闰,其中UIStackView調(diào)整其排列的視圖的大小茬贵,以便它們沿著UIStackView的軸線方向填充可用空間。
當(dāng)排列的視圖不適合(上溢) UIStackView時(shí)移袍,它會(huì)根據(jù)視圖的抗壓優(yōu)先級(jí)縮小視圖解藻。
如果排列的視圖沒(méi)有填充(下溢) UIStackView時(shí),它會(huì)根據(jù)視圖的擁抱優(yōu)先級(jí)拉伸視圖咐容。
如果存在任何歧義舆逃,UIStackView將根據(jù)排列的子視圖數(shù)組中的索引調(diào)整排列的視圖的大小。
即將UIStackView填充滿(mǎn)。
*/
UIStackViewDistributionFill = 0,
/*一種布局路狮,其中堆棧視圖調(diào)整其排列視圖的大小虫啥,以便它們沿著UIStackView的軸線方向均勻的填充可用空間。
即子視圖以相同大小填充UIStackView
*/
UIStackViewDistributionFillEqually,
/* 一種布局奄妨,其中堆棧視圖調(diào)整其排列視圖的大小涂籽,以便它們沿著UIStackView的軸線方向按比例調(diào)整大小填充可用空。
即子視圖以比例大小填充UIStackView砸抛。
*/
UIStackViewDistributionFillProportionally,
/* 一種布局评雌,其中UIStackView定位其排列視圖,以便它們沿著UIStackView的軸線方向填充可用空間直焙。
當(dāng)排列的視圖沒(méi)有填充UIStackView時(shí)(下溢)景东,它會(huì)均勻地填充視圖之間的間距。
如果排列的視圖不適合UIStackView時(shí)(上溢)奔誓,它會(huì)根據(jù)視圖的抗壓優(yōu)先級(jí)縮小視圖斤吐。
如果存在任何歧義,堆棧視圖將根據(jù)視圖在arrangedSubviews數(shù)組中的索引縮小視圖厨喂。
即子視圖等間距填充UIStackView和措,間距為UIStackView調(diào)整,spacing屬性限制了最小間距蜕煌,但不限制最大間距派阱。
*/
UIStackViewDistributionEqualSpacing,
/* 一種布局,試圖定位排列視圖斜纪,使其沿UIStackView的軸線方向具以相等的中心間距填充可用空間贫母。
當(dāng)排列的視圖沒(méi)有填充UIStackView時(shí)(下溢),如果未設(shè)置spacing屬性盒刚,則自動(dòng)插入間距颁独,并調(diào)整間距以滿(mǎn)足排列的子視圖有相等的中心間距。
如果設(shè)置spacing屬性伪冰,在維持以spacing屬性設(shè)置間距值為最小間距的同時(shí),它會(huì)根據(jù)視圖的抗壓優(yōu)先級(jí)縮小視圖以滿(mǎn)足排列的子視圖有相等的中心間距樟蠕。
當(dāng)排列的視圖不適合UIStackView時(shí)(上溢)贮聂,如果未設(shè)置spacing屬性,它會(huì)根據(jù)視圖的抗壓優(yōu)先級(jí)縮小視圖以滿(mǎn)足排列的子視圖有相等的中心間距寨辩。
如果設(shè)置spacing屬性吓懈,在維持以spacing屬性設(shè)置間距值為最小間距的同時(shí),它會(huì)根據(jù)視圖的抗壓優(yōu)先級(jí)縮小視圖以滿(mǎn)足排列的子視圖有相等的中心間距靡狞。
即子視圖等中心間距填充UIStackView耻警,間距為UIStackView調(diào)整,spacing屬性限制了最小間距,但不限制最大間距甘穿。
*/
UIStackViewDistributionEqualCentering,
} API_AVAILABLE(ios(9.0));
@property(nonatomic) UIStackViewAlignment alignment;
屬性描述 :UIStackView排列的子視圖的對(duì)齊方式腮恩,其對(duì)齊方式受UIStackView排列視圖時(shí)所沿的軸線方向影響。
- UIStackViewAlignment提供的對(duì)齊子視圖的方式如下:
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
/* 填充式布局温兼,如果UIStackView為水平排列秸滴,則子視圖頂部與底部對(duì)齊UIStackView。
如果UIStackView為垂直排列募判,則子視圖前部與后部對(duì)齊UIStackView荡含。
*/
UIStackViewAlignmentFill,
/* 前部對(duì)齊式布局届垫,UIStackView為垂直排列有效释液。
*/
UIStackViewAlignmentLeading,
/* 頂部對(duì)齊式布局,UIStackView為水平排列有效装处。
*/
UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
/*按照第一個(gè)子視圖的第一行文文本基線對(duì)齊误债,且高度最大的子視圖底部對(duì)齊。UIStackView為水平排列有效符衔。
*/
UIStackViewAlignmentFirstBaseline,
/* 子視圖沿軸線方向劇中對(duì)齊
*/
UIStackViewAlignmentCenter,
/* 后部對(duì)齊式布局找前,UIStackView為垂直排列有效。
*/
UIStackViewAlignmentTrailing,
/*底部對(duì)齊式布局判族,UIStackView為水平排列有效躺盛。
*/
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
/*按照第一個(gè)子視圖的最后一行文文本基線對(duì)齊,且高度最大的子視圖頂部對(duì)齊形帮。UIStackView為水平排列有效槽惫。
*/
UIStackViewAlignmentLastBaseline, // Valid for horizontal axis only
} API_AVAILABLE(ios(9.0));
@property(nonatomic) CGFloat spacing;
屬性描述 :UIStackView排列子視圖相鄰邊之間的間距。此屬性定義了UIStackViewDistributionFill辩撑、UIStackViewDistributionFillEqually界斜、UIStackViewDistributionFillProportionally布局的排列視圖之間的嚴(yán)格間距,UIStackViewDistributionEqualSpace和UIStackViewDistributionEqualCenter布局的最小間距合冀。使用負(fù)值允許重疊各薇。默認(rèn)值為0.0。
@property(nonatomic,getter=isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;
屬性描述 :一個(gè)布爾值君躺,默認(rèn)值為NO峭判,用于確定是否從視圖的基線測(cè)量視圖之間的垂直間距。如果為YES棕叫,視圖之間的垂直間距將從基于文本的視圖的最后一條基線到其下方視圖的第一條基線進(jìn)行測(cè)量林螃。頂部和底部視圖的定位也使其最近的基線距離堆棧視圖的邊緣指定的距離。此屬性?xún)H由垂直排列的UIStackView視圖使用俺泣。水平排列的UIStackView可以使用alignment屬性控制疗认。
@property(nonatomic,getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;
屬性描述 :如果為YES完残,UIStackView將相對(duì)于其布局邊距布局其排列視圖。如果為NO横漏,它將相對(duì)于其邊界布置排列的視圖谨设。默認(rèn)為NO。
@property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;
屬性描述 :由UIStackView排列的視圖數(shù)組绊茧。UIStackView確保了arrangedSubviews數(shù)組總是它的子視圖數(shù)組(subviews)的一個(gè)子集铝宵。每當(dāng)調(diào)用addArrangedSubview:方法時(shí),如果尚未添加該子視圖华畏,UIStackView都會(huì)將該視圖添加為子視圖鹏秋,每當(dāng)調(diào)用removeFromSuperview:方法時(shí),UIStackView也會(huì)將其從arrangedSubviews中刪除亡笑。
常用函數(shù)
- (instancetype)initWithFrame:(CGRect)frame NS_DESIGNATED_INITIALIZER;
- (instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;
函數(shù)描述 :初始化UIStackView侣夷。
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;
函數(shù)描述 :返回管理所提供的視圖的UIStackView對(duì)象。UIStackView將所有需要排列的視圖添加到其arrangedSubviews組中仑乌,并這些視圖添加為子視圖百拓。如果arrangedSubviews數(shù)組中包含的任何視圖收到removeFromSuperview的方法調(diào)用,UIStackView也會(huì)將其從arrangedSubviews中刪除晰甚。
參數(shù) :
views :要由UIStackView排列的視圖數(shù)組衙传。
返回值 : 一個(gè)新的UIStackView對(duì)象。
- (void)addArrangedSubview:(UIView *)view;
函數(shù)描述 :將視圖添加到arrangedSubviews數(shù)組的末尾厕九。UIStackView確保了arrangedSubviews數(shù)組總是它的子視圖數(shù)組(subviews)的一個(gè)子集蓖捶。如果尚未添加該子視圖,此方法會(huì)自動(dòng)將提供的視圖添加為UIStackView的子視圖扁远,如果已經(jīng)添加該子視圖俊鱼,此函數(shù)不做操作。
參數(shù) :
view : 要添加到由UIStackView排列的視圖數(shù)組中的視圖畅买。
- (void)removeArrangedSubview:(UIView *)view;
函數(shù)描述 :此方法從UIStackView的arrangedSubviews數(shù)組中刪除提供的視圖并闲。視圖的位置和大小將不再由堆棧視圖管理。但是谷羞,此方法不會(huì)從堆棧的子視圖數(shù)組中(subviews)刪除提供的視圖帝火,因此視圖仍然顯示為視圖層次的一部分,視圖仍顯示在屏幕上湃缎,需要通過(guò)調(diào)用視圖的removeFromSuperview方法從子視圖數(shù)組中顯式刪除視圖购公。
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;
函數(shù)描述 :將提供的視圖添加到排列的子視圖數(shù)組中指定的索引處。如果索引已被占用雁歌,UIStackView會(huì)增加arrangedSubviews數(shù)組的大小,并將其被占用的索引及被占用的索引以上位置的所有內(nèi)容移動(dòng)到數(shù)組中更高的空間(索引后移)知残,然后UIStackView將提供的視圖存儲(chǔ)在索引處靠瞎。如果插入的視圖尚未添加到UIStackView比庄,此方法會(huì)自動(dòng)將提供的視圖添加為UIStackView的子視圖,但插入的索引位置僅影響arrangedSubviews數(shù)組中視圖的順序乏盐,它不會(huì)影響子視圖數(shù)組(subviews)中視圖的順序佳窑,也就是說(shuō)插入的視圖仍舊添加到子視圖數(shù)組(subviews)的末尾。
參數(shù) :
view : 要插入到由UIStackView排列的視圖數(shù)組中的視圖父能。
stackIndex : 其在arrangedSubviews數(shù)組中插入新視圖的索引神凑,此值不得大于此數(shù)組中當(dāng)前的視圖數(shù),如果索引超出范圍何吝,此方法將拋出NSInternalInconsistencyException異常溉委。
- (void)setCustomSpacing:(CGFloat)spacing afterView:(UIView *)arrangedSubview API_AVAILABLE(ios(11.0),tvos(11.0));
函數(shù)描述 :水平排列時(shí),在指定視圖后緣應(yīng)用自定義間距爱榕。垂直排列時(shí)瓣喊,在指定視圖下緣應(yīng)用自定義間距。
參數(shù) :
spacing : 自定義間距黔酥。
arrangedSubview : 指定視圖藻三。
- (CGFloat)customSpacingAfterView:(UIView *)arrangedSubview API_AVAILABLE(ios(11.0),tvos(11.0));
函數(shù)描述 :水平排列時(shí),返回指定視圖后緣應(yīng)用自定義間距跪者。垂直排列時(shí)棵帽,返回指定視圖下緣自定義間距。
參數(shù) :
arrangedSubview : 指定視圖渣玲。