概述
UIStackView
是iOS9
中新增的API,類似于Android
中的線性布局。UIStackView提供了一個高效的接口用于平鋪一行或一列的視圖組合。對于嵌入到StackView的視圖,你不用再添加自動布局的約束了。Stack View管理這些子視圖的布局,并幫你自動布局約束。也就是說,這些子視圖能夠適應不同的屏幕尺寸。此外,你可以嵌入一個stack View到另一個stack view中來創建更為復雜的用戶界面。不要誤解我的意思,這并不意味著你就不需要處理自動布局了。你仍舊要定義一些布局約束來約束stack view。它只是幫你節約了為每個UI元素創建約束的時間,同時它更容易的從布局中添加/刪除一個視圖。
UIStackView的優點
- 對于一些開發者來說使用autolayout設計一些復雜的交互界面是比較困難的。
UIStackView
正好能幫助到并讓我們的開發者的工作變得更容易些。(StackView內部的控件 StackView會自動給它們添加約束的) 但是 并不是 就完全不需要 AutoLayout了 。你仍舊要定義一些布局約束來約束stack view - 更容易的從布局中添加/刪除一個視圖。
UIStackView介紹
1.初始化
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;//初始化方法傳入需要用UIStackView管理的存放子視圖的數組,并按照數組中的順序添加這些子視圖。
2.添加/移除子視圖
- (void)addArrangedSubview:(UIView *)view;//添加view到UIStackView對象上并且讓UIStackView管理這個view布局
- (void)removeArrangedSubview:(UIView *)view;//取消UIStackView的管理,但是這個view不從UIStackView上移除 如果想從UIstackView從移除 還要配合 removeFromSuperview 使用
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;//UIStackView管理存放子視圖的數組,按照順序來布局,這個方法是向這個數組里指定位置添加view
3.UIStackView排列方式
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis)
{
UILayoutConstraintAxisHorizontal = 0, //子視圖水平排列
UILayoutConstraintAxisVertical = 1 //子視圖垂直排列
};
@property(nonatomic) UILayoutConstraintAxis axis;
//這個屬性是用來設置UIStackView中子視圖的排列方式
4.子視圖分布樣式
typedef NS_ENUM(NSInteger, UIStackViewDistribution)
{
UIStackViewDistributionFill = 0,
UIStackViewDistributionFillEqually,
UIStackViewDistributionFillProportionally,
UIStackViewDistributionEqualSpacing,
UIStackViewDistributionEqualCentering,}
NS_ENUM_AVAILABLE_IOS(9_0);
@property(nonatomic) UIStackViewDistribution distribution;
//UIStackView中子視圖的分布樣式
- UIStackViewDistributionFill
根據UIStackView
的排列方式,用子視圖鋪滿填充指定的 方向, -
UIStackView
:垂直排列:UIStackView
中的子視圖將填充滿UIStackView
的高度。 -
UIStackView
:水平排列:UIStackView
中的子視圖將填充滿UIStackView
的寬度。 - 由于每個視圖是由
UIStackView
自動添加約束的,要進行鋪滿操作就對視圖進行拉伸,指定某個視圖拉伸,可以更改其壓縮或者拉伸的優先級實現。- 拉伸優先級priority值越低 優先級越高 先被拉伸
-
如果優先級相同 默認 拉伸第一個UI控件
-
UIStackViewDistributionFillEqually
UIStackViewDistributionFillEqually
保證鋪滿后如果是垂直排列所有的子視圖高度相等,如果是水平排列所有的子視圖寬度相等。
UIStackViewDistributionFillEqually UIStackViewDistributionFillProportionally
根據每個子視圖里面內容的尺寸來進行填充操作
UIStackViewDistributionFillProportionally
-
UIStackViewDistributionEqualSpacing
排列視圖,保證每個子視圖之間的間距相等
UIStackViewDistributionEqualSpacing UIStackViewDistributionEqualCentering
排列視圖,保證每個子視圖中心直接的間距相等
UIStackViewDistributionEqualCentering
- 5、子視圖對齊方式
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
UIStackViewAlignmentFill, //水平:subView的上下和StackView的上下邊距 相等 垂直: subView的左右邊距和 StackView的所有相等
UIStackViewAlignmentLeading,//垂直有效 :左對齊
UIStackViewAlignmentTop =UIStackViewAlignmentLeading, // 水平有效 上對齊
UIStackViewAlignmentFirstBaseline,//水平有效,第一行基準線對齊。
UIStackViewAlignmentCenter, //中心基準線對齊 1.水平 高度中點對齊 2.垂直:寬度中點對齊
UIStackViewAlignmentTrailing, //垂直有效,右邊界對齊。
UIStackViewAlignmentBottom =UIStackViewAlignmentTrailing,// 水平有效 ,下邊界對齊。
UIStackViewAlignmentLastBaseline,//水平有效,最后一行基準線對齊。
} NS_ENUM_AVAILABLE_IOS(9_0);
@property(nonatomic) UIStackViewAlignment alignment;//設置UIStackView中子視圖對齊的方式
- 5.子視圖之間的間距
@property(nonatomic) CGFloat spacing//每個子視圖之間的間距,在某些布局的情況下spacing將作為最小的間距。
UIStackView的創建
1、第一種方式
- 直接創建UIStackView ,再向其中添加 UI控件
先創建在添加 - 接下來,放置一個ImageView到
StackView
里,這個時候你會發現imageview自動填充了這個Stackview
,接下繼續拖入兩個imageview,神奇的事情發生了,Stackview
內的圖片都做到了很好的自適應。 - 前提是 你把
Stackview
的Distribution屬性設置成Fill Equally
Snip20160221_16.png
添加一個ImageView
添加第二個ImageView
添加第三個ImageView
2、第二種方式
- 先創建控件 在通過控件 創建
UIStackView
先創建控件 在通過控件 創建`UIStackView` - 注意 : 如果是通過這種方法創建的
UIStackView
會根據 控件的排列 自動判斷是創建豎直的
還是水平的
,可以通過下圖設置,按需求修改,豎直
還是水平
。
3、通過代碼創建UIStackView
//創建UIStackView
UIStackView * stackView=[[UIStackView alloc] initWithArrangedSubviews:@[imageView1,imageView