iOS Developer

iOS 9: Day by Day 第四天 UIStackVie

2016-03-18  本文已影响253人  戴维营教育

本文翻译自Chris Grant的《iOS9 Day-by-Day :: Day 4 :: UIStack View》(https://www.shinobicontrols.com/blog/ios9-day-by-day-day4-uistack-view)。感谢Chris Grant的辛苦工作！

苹果从iOS 9开始引入UIStackView为应用程序提供简单的水平或垂直布局的能力。UIStackView使用自动布局管理每个子视图的位置和大小，使得UI更容易适配。

在没有UIStackView时，我们要实现同样的布局，需要使用大量的约束。比如手动设置间距，根据方向确定x/y坐标等。

UIStackView替我们把这些事情都做完了，甚至还为增加、隐藏和移除子视图以及修改布局属性等添加了平滑的过渡动画。

使用UIStackView

现在我们来看一下如何使用UIStackView。最终的代码在GitHub上。下面就一步一步来看一下如何使用UIStackView。这个例子使用UISegmentedControl来控制UIStackView的对齐和分布属性。

我们的目标就是实现上图所示的程序。如图所示，界面上显示了4个好友信息和2个分段控件。这个界面使用自动布局来适配不同屏幕尺寸。令人惊讶的是，我们只需要添加4个布局约束就可以了！

所有东西都被放在UIStackView中。我们一共会使用4个UIStackView。其中只要给第一个设置约束，并且将它放在根视图里。

将一个垂直的栈视图添加到页面后，打开约束面板，然后设置上图一样的四个约束。这样栈视图就会一直处于屏幕中央。

然后将三个或更多的水平栈视图加入刚才的垂直栈视图中。最上面的栈视图包含四个图片，每个图片对应一个好友。由于图片的尺寸各自不同，为了避免出现变形，我们将UIImageView的contentMode设置为Aspect Fit。这样不管图片视图的尺寸是什么样的，图片都会保持原始的长宽比！

大家可能注意到在最终的实现里，每个图片之间有一点小的间隙。这通过设置最上层栈视图的spacing属性即可。在同样的地方还可以设置对齐和分布属性，将这些属性都设置为“Fill”。我们在点击分段控件的时候再做其它修改。

另外还有两个水平的栈视图，每个都放置一个标签（Label）和分段控件（UISegmentedControl）。按下面的样子设置标签和分段控件的对齐和分布属性。

我们很快就可以看到每个属性的演示了。需要注意的是，这些属性很大程度上依赖UIStackView的contentSize属性。

现在我们已经将UI创建好，接下来就是实现选择不同分段以后的动作。首先，将包含图片视图的UIStackView连接IBOutlet到视图控制器，并命名为peopleStackView。然后为每一个分段控件拖一个IBAction事件到代码中，用来处理分段控件的Value Changed事件。在这些方法中，我们将为peopleStackView设置对齐和分布属性。

@IBAction func alignmentSegmentSelected(sender: UISegmentedControl) {
    UIView.animateWithDuration(1.0, 
        delay: 0,
        usingSpringWithDamping: 0.5,
        initialSpringVelocity: 0.2,
        options: .CurveEaseInOut,
        animations: { () -> Voie in
            if sender.selectedSegmentIndex == 0 {
                self.peopleStackView.alignment = .Fill
            }
            else if sender.selectedSegmentIndex == 1 {
                self.peopleStackView.alignment = .Top
            }
            else if sender.selectedSegmentIndex == 2 {
                self.peopleStackView.alignment = .Center
            }
            else if sender.selectedSegmentIndex == 3 {
                self.peopleStackView.alignment = .Bottom
            }
        },
        completion: nil)
}

@IBAction func distributionSegmentSelected(sender: UISegmentedControl) {
    UIView.animateWithDuration(1.0,
        delay: 0,
        usingSpringWithDamping: 0.5,
        initialSpringVelocity: 0.2, 
        options: .CurveEaseInOut,
        animations: { () -> Void in
            if sender.selectedSegmentIndex == 0 {
                self.peopleStackView.distribution = .Fill
            }
            else if sender.selectedSegmentIndex == 1 {
                self.peopleStackView.distribution = .FillEqually
            }
            else if sender.selectedSegmentIndex == 2 {
                self.peopleStackView.distribution = .FillProportionally
            }
            else if sender.selectedSegmentIndex == 3 {
                self.peopleStackView.distribution = .EqualSpacing
            }
            else if sender.selectedSegmentIndex == 4 {
                self.peopleStackView.distribution = .EqualCentering
            }
        })
}

我将每每个改变动作都放在一个动画方法中，但这并不是必须的。只是这样能够看起来更舒服一点。如果将动画删掉，视图变化起来更加直接。下面就可以编译运行了。看看结果吧！

结果视频

尝试不同的组合，看看结果是什么样的。我们可以发现，UIStackView自动适配了不同的设备。

将已有视图添加到UIStackView

如果需要将一个现有的布局改用UIStackView，只需要移除这些视图的约束，选中它们并在Interface Builder下方选择UIStackView即可。

Interface Builder自动将这些视图放入一个UIStackView中进行布局。

更多信息

更多关于Xcode 7自动布局的信息，可以观看WWDC session 218（“Mysteries of Auto Layout, Part 1”）。Jason Yao用了15分钟的时间来介绍UIStackView的用法，并且用一个例子来演示如何用更少的约束来快速布局。

戴维营教育

戴维营教育（Dive In Education)，潜心做IT职业教育！紧跟时代潮流，不弄虚作假！不忘初心！

上一篇下一篇

猜你喜欢

热点阅读