Auto Layout中Stack View的使用

这是关于自动布局的第二篇文章。
<< Auto Layout的使用

上一篇文章介绍了如何使用Auto Layout,这一篇文章主要介绍堆栈视图(Stack View)Stack View提供了一种轻松的方式来使用Auto Layout,不需要引入复杂的约束。单个堆栈视图定义用户界面的行或列,堆栈视图根据以下属性来排列其子视图。

  • axis:定义Stack View的方向,水平方向或竖直方向,只适用于UIStackViewNSStackView中定义方向使用orientation属性。
  • distribution:设定视图沿轴线的排布方式。
  • alignment:设定如何沿轴线垂直方向排布子视图。
  • spacing:设定子视图间距。
Auto Layout中Stack View的使用_第1张图片
UIStackViewProperties.png

UIStackView适用于iOS 9.0+和tvOS 9.0+,NSStackView适用于macOS 10.9+。这篇文章只讲解UIStackView

使用Stack View时可以先从对象库中拖拽出Horizontal Stack ViewVertical Stack Viewstoryboard,后把需要添加的视图放进Stack View;也可以先添加视图,后点击Auto Layout工具Embed in Stack,Auto Layout会根据视图布局插入水平或垂直堆栈视图,也可以点击Editor > Embed In > Stack View插入堆栈视图,与点击Embed In Stack插入没有区别。

1. 创建demo

这里使用Tabbed Application的模板创建demo,Product NameStackView,选择文件位置,创建工程。

下面通过三个示例来学习Stack View

2. 示例1

打开刚创建demo的Main.storyboard,在First Scene添加以下视图:第一行为UILabelUISwitch,第二行为两个UIImageView

Auto Layout中Stack View的使用_第2张图片
StackViewD1Storyboard.png

选中第一行的UILabelUISwitch,点击Embed In Stack插入Stack View。打开Attributes Inspector,设置Stack View的属性如下:

  • Axis:Horizontal,自动创建的应该为Horizontal,不需要修改。
  • Alignment:Center
  • Distribution:Fill,不需要修改。
  • Spacing:16

选中两个UIImageView,重复上面插入Stack View步骤并修改属性,属性与上面相同。UIImageView中图片的Content Mode属性为Aspect Fit

选中刚添加的两个Stack View,点击Embed In Stack再次插入一个堆栈视图。堆栈视图可以嵌入堆栈视图。界面构建器会自动插入一个垂直堆栈视图。修改其属性如下:

  • Axis:Vertical,不需要修改。
  • Alignment:Center
  • Distribution:Fill,不需要修改。
  • Spacing:16

堆栈视图根据子视图大小来调整自身大小,这里子视图保持固有内容大小,所以只需要添加约束指定堆栈视图位置,不需要约束堆栈视图大小。

添加约束指定堆栈视图水平居中,与Top距离为20points。如果添加过程遇到问题,你可以点击这里查看demo,也可以查看上一篇文章学习如何添加约束。添加完毕后视图层级如下:

Auto Layout中Stack View的使用_第3张图片
StackViewD1Hierarchy.png

使用Stack View时一般只需要指定堆栈视图位置,堆栈视图大小会根据子视图大小动态调整。

堆栈视图中子视图显示顺序由其在arrangedSubviews数组的顺序决定。在水平堆栈视图中,视图显示方向与阅读方向一致,arrangedSubviews数组中低索引号视图先显示。在垂直堆栈视图中,视图从上向下显示,低索引号视图在上,高索引号视图在下。

当向arrangedSubviews数组中添加、移除视图时,或视图被隐藏时,Stack View会自动调整布局。

下面从UISwitch连接出一个IBAction的属性,当点击UISwitch时,调整imageStackViewaxisimageStackViewstoryboard中图片堆栈视图的IBOutlet属性。

- (IBAction)axisChange:(UISwitch *)sender
{
    [UIView animateWithDuration:0.25 animations:^{
        [self updateConstraintsForAxis];
    }];
}

- (void)updateConstraintsForAxis
{
    // 在水平、垂直堆栈视图间切换
    if (self.imageStackView.axis == UILayoutConstraintAxisHorizontal)
    {
        self.imageStackView.axis = UILayoutConstraintAxisVertical;
    }
    else
    {
        self.imageStackView.axis = UILayoutConstraintAxisHorizontal;
    }
}

使用animateWithDuration: animations:方法可以让视图的变换以动画形式呈现。

Auto Layout中Stack View的使用_第4张图片
StackViewD1AxisChange.gif

3. 示例2

通过示例1我们可以在runtime手动修改堆栈视图axis,但更好的方式是Stack View自动跟随设备旋转。例如,当设备从竖屏(portrait)旋转为横屏(landscape)时,堆栈视图axis属性自动从UILayoutConstraintAxisVertical调整为UILayoutConstraintAxisHorizontal

进入Second Scene,添加两个UIImageView,其contentMode属性为Aspect Fit,图片分别为HeartStar,可以通过文章底部网址下载源码获取图片。选中两个UIImageView插入一个Horizontal堆栈视图。堆栈视图与LeadingTrailingTopBottom距离分别为00Standard ValueStandard ValueStack View其它属性如下:

  • Axis:Horizontal
  • Alignment:Center
  • Distribution:Fill Proportionally
  • Spacing:0
Auto Layout中Stack View的使用_第5张图片
StackViewD2Stroyboard.png

上面的DistributionFillFill EquallyFill ProportionallyEqual SpacingEqual Centering五个属性,这五个属性的区别:

  • UIStackViewDistributionFillStack View调整子视图大小以便填充所有可用空间。当子视图大小大于可用空间时,根据Compression Resistance优先级压缩视图;当子视图不能填充满可用空间时,根据Content Hugging优先级拉伸视图。如果优先级相同,优先调整arrangedSubviews数组中index小的视图。
  • UIStackViewDistributionFillEqually:调整所有子视图为相同大小,占用所有可用空间。
  • UIStackViewDistributionFillProportionally:会保持每一个子视图的固有大小,但如果有可用空间、或需要压缩视图,会按比例拉伸、压缩。如一个视图宽为100,另一个视图宽为200Stack View想要拉伸视图以便填充可用空间,第一个视图宽被拉伸为150,第二个视图宽就会被拉伸为300
  • UIStackViewDistributionEqualSpacing:不调整子视图大小,通过移动子视图位置让子视图间距相等。如果子视图大于可用空间,会按照Compression Resistance优先级压缩。如果优先级相同,优先调整arrangedSubviews数组中index小的视图。
  • UIStackViewDistributionEqualCentering:让子视图的中心距离相等。如果视图大于可用空间,会压缩spacing属性直到设定的最小值,如果此时仍旧大于可用空间,会根据子视图Compression Resistance优先级压缩子视图。如果优先级相同,优先调整arrangedSubviews数组中index小的视图。

选中Stack View,打开Attributes Inspector,你会发现每一个Stack View属性前会有一个+

Auto Layout中Stack View的使用_第6张图片
StackViewD2Attributes.png

点击这些+,可以自定义水平、垂直堆栈视图的属性。下面添加一个当宽度为compact、高度为regularaxis为垂直的属性。

Auto Layout中Stack View的使用_第7张图片
StackViewD2AttributesAxis.png

你还可以通过相同方式,添加一个当宽度为compact、高度为regularspacing属性,一般不需要添加其它属性。

现在运行app,当竖屏时,堆栈视图的axis是垂直的;当横屏时,堆栈视图的axis是水平的。

Auto Layout中Stack View的使用_第8张图片
StackViewAxis.gif

4. 示例3

Stack View主要优点之一是会自动为其每个子视图创建自动布局约束,也可以对这些子视图的大小和位置进行设置。

为刚创建的demo添加一个View Controller,并连接到选项卡控制器,设定Bar Item的标题为Third

打开Third Scene,自上而下添加UILabelUIImageViewUIButton,并插入到一个垂直堆栈视图中。堆栈视图属性设置如下:

  • Axis: Vertical
  • Alignment: Center
  • Distribution: Equal Spacing
  • Spacing: 0
Auto Layout中Stack View的使用_第9张图片
StackViewD3Stroyboard.png

其中UIImageViewcontentModeAspect Fit,为上面Stack View添加约束,与LeadingTrailingTop距离分别为0020

在上图Add Star下面添加一个水平堆栈视图,属性设置如下:

  • Axis: Horizontal
  • Alignment: Center
  • Distribution: Fill Equally
  • Spacing: 10

完成后为其添加约束,与LeadingTrailingTopBottom距离分别为00Standard Value20,高度为120

Auto Layout中Stack View的使用_第10张图片
StackViewD3StoryboardFinal.png

虽然UIStackView继承自UIView,但它只管理子视图的位置和大小,不提供用户界面,也就是有些属性不适用于UIStackView,如backgroundColor,也不能重写drawRect:方法。

堆栈视图中有subviewsarrangedSubviews两个属性,其遵守以下规则。

  • Stack ViewarrangedSubviews数组添加视图时,也会将该视图添加为subviews
  • Stack View移除一个视图,该视图也会被从arrangedSubviews数组移除。
  • arrangedSubviews数组移除一个视图,该视图依然存在于subviews数组。Stack View不在管理被移除视图的位置和大小,但它会存在于视图层级中。

所以,通过调用addArrangedSubview:insertArrangedSubview: atIndex:方法向arrangedSubviews数组添加元素,该元素同时会被加入subviews数组。通过removeFromSuperView方法移除的视图,会被同步从arrangedSubviews数组移除。通过removeArrangedSubview:移除的视图,还会存在于subviews数组。

UIButton连接出一个名为addStarIBAction点击事件。当点击时,在底部的horizontalStackView添加一个五角星。

- (IBAction)addStar:(UIButton *)sender
{
    UIImageView *filledStarView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"filledStar"]];
    
    // 添加视图到堆栈视图
    [self.horizontalStackView addArrangedSubview:filledStarView];
    filledStarView.contentMode = UIViewContentModeScaleAspectFit;
    
    [UIView animateWithDuration:0.25 animations:^{
        [self.horizontalStackView layoutIfNeeded];
    }];
}

现在增加移除五角星的功能。从对象库拖拽一个UIButtonAdd Star下方。选中UIButtonAdd Star,点击Embed In Stack按钮插入堆栈视图。修改刚插入堆栈视图属性如下:

  • Axis: Horizontal
  • Alignment: Center
  • Distribution: Equal Spacing
  • Spacing: 10

刚添加UIButton标题为Remove Star,文字颜色为red

Auto Layout中Stack View的使用_第11张图片
StackViewD3Remove.png

为刚添加的UIButton创建名为removeStar的IBAction点击事件,并实现移除方法。

- (IBAction)removeStar:(UIButton *)sender
{
    UIView *filledView = self.horizontalStackView.arrangedSubviews.lastObject;
    
    // 如果视图存在,移除视图
    if (filledView)
    {
        [filledView removeFromSuperview];   // 会自动从arrangedSubviews移除
        [UIView animateWithDuration:0.25 animations:^{
            [self.horizontalStackView layoutIfNeeded];
        }];
    }
}

运行app,现在可以添加、移除五角星,且视图会随着设备旋转自动调整布局。

Auto Layout中Stack View的使用_第12张图片
StackViewD3.gif

总结

通过这篇文章,可以看到UIStackView极大降低了用户界面开发难度,简化了许多工作,仅仅添加少量约束便可实现自动布局。在布局时,应该优先考虑使用Stack View来布局界面。

Demo名称:StackView
源码地址:https://github.com/pro648/BasicDemos-iOS

参考资料:

  1. Stacks
  2. iOS 9: Getting Started with UIStackView
  3. What are the different UIStackView distribution types?

欢迎更多指正:https://github.com/pro648/tips/wiki

你可能感兴趣的:(Auto Layout中Stack View的使用)