天天看點

iOS9新特性——堆疊視圖UIStackView(二)

四、再來深入了解下UIStackView

       通過上面的介紹,我們已經基本了解了StackView的使用和特點,下面我們再來仔細介紹一下與其相關的屬性和方法的使用,使我們能夠更加得心應手。

有關被管理視圖的添加與移除:

//初始化方法,通過數組傳入被管理的視圖

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

//擷取被管理的所有視圖

@property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;

//添加一個視圖進行管理

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

//移除一個被管理的視圖

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

//在指定位置插入一個被管理的視圖

- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;

與StackView布局設定相關:

1.布局模式:

@property(nonatomic) UILayoutConstraintAxis axis;

上面這個屬性用于設定布局的模型,枚舉如下:

//stackView隻有兩種布局模式 水準和豎直

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {

   //水準布局

   UILayoutConstraintAxisHorizontal = 0,

   //豎直布局

   UILayoutConstraintAxisVertical = 1

};

2.對齊模式:

@property(nonatomic) UIStackViewAlignment alignment;

這個屬性用于設定控件的對其模式,枚舉如下:

typedef NS_ENUM(NSInteger, UIStackViewAlignment) {

  //水準布局時為高度充滿,豎直布局時為寬度充滿

   UIStackViewAlignmentFill,

   //前邊對其

   UIStackViewAlignmentLeading,

   //頂部對其

   UIStackViewAlignmentTop = UIStackViewAlignmentLeading,

   //第一個控件文字的基線對其 水準布局有效

   UIStackViewAlignmentFirstBaseline,

   //中心對其

   UIStackViewAlignmentCenter,

   //後邊對其

   UIStackViewAlignmentTrailing,

   //底部對其

   UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,

   //基線對其,水準布局有效

   UIStackViewAlignmentLastBaseline,

} NS_ENUM_AVAILABLE_IOS(9_0);

在上面的例子中,我們設定了對其方式為充滿,這樣的話,我們就不需要再做過多控件尺寸的限制,如果我們被管理的控件高度或者寬度不一,我們可以設定中心對其,這樣的話,我們還需要為每個控件添加一個寬度或者高度的限制,如下:

   NSMutableArray * array = [[NSMutableArray alloc]init];

   for (int i =0 ; i<5; i++) {

       UIView * view = [[UIView alloc]init];

       view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];

       float height = arc4random()%90+10;

       [view mas_makeConstraints:^(MASConstraintMaker *make) {

           make.height.equalTo([NSNumber numberWithFloat:height]);

       }];

       [array addObject:view];

   }

   stackView = [[UIStackView alloc]initWithArrangedSubviews:array];

   [self.view addSubview:stackView];

   [stackView mas_makeConstraints:^(MASConstraintMaker *make) {

       make.centerX.equalTo(self.view.mas_centerX);

       make.centerY.equalTo(self.view.mas_centerY);

       make.leading.equalTo(self.view.mas_leading).offset(20);

       make.trailing.equalTo(self.view.mas_trailing).offset(-20);

       make.size.height.equalTo(@100);

   }];

   stackView.axis = UILayoutConstraintAxisHorizontal;

   stackView.distribution = UIStackViewDistributionFillEqually;

   stackView.alignment = UIStackViewAlignmentCenter;

效果如下:

iOS9新特性——堆疊視圖UIStackView(二)

這樣,參差不齊的控件布局我們也可以輕松完成。

3.排列方式

@property(nonatomic) UIStackViewDistribution distribution;

排列方式的枚舉如下:

typedef NS_ENUM(NSInteger, UIStackViewDistribution) {

   //充滿,當隻有一個控件時可以使用

   UIStackViewDistributionFill = 0,

   //平分充滿,每個控件占據相同尺寸排列充滿

   UIStackViewDistributionFillEqually,

   //會優先按照限制的尺寸進行排列,如果沒有充滿,會拉伸最後一個排列的控件充滿

   UIStackViewDistributionFillProportionally,

   //等間距排列

   UIStackViewDistributionEqualSpacing,

   //中心距離相等

   UIStackViewDistributionEqualCentering,

注意,除了我們選擇fill屬性時不需限制控件視圖的尺寸,其他都需要進行限制,例如如果我們選擇等間距,我把改成如下代碼:

    [view mas_makeConstraints:^(MASConstraintMaker *make) {

           make.width.equalTo(@50);

    stackView.distribution = UIStackViewDistributionEqualSpacing;

iOS9新特性——堆疊視圖UIStackView(二)

4.其他

//設定最小間距

@property(nonatomic) CGFloat spacing;

//設定布局時是否參照基線

@property(nonatomic,getter=isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;

//設定布局時是否以控件的LayoutMargins為标準,預設為NO,是以控件的bounds為标準

@property(nonatomic,getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;

五、UIStackView的嵌套

       一個StackView不允許我們進行水準和豎直的交叉布局,但是我們可以通過嵌套的方式來實作複雜的布局效果,比如我們實作一個類似電影表标簽,可以使用水準布局的StackView中嵌套一個豎直布局的StackView:

iOS9新特性——堆疊視圖UIStackView(二)

十分輕松就可以實作如下的效果:

iOS9新特性——堆疊視圖UIStackView(二)

看到了吧,通過StackView,我們沒有添加過多的限制,使我們布局起來更加輕松了。如果你常常使用storyBoard進行開發,還有一個小技巧可以友善的将兩個控件整合到一個StackView中,按住command,選中兩個控件,之後點選右下角的如下圖示,系統會自動幫我們生成一個StackView,将選中的兩個控件整合進去,很酷吧!

繼續閱讀