Swift - UIStackView使用详解3（纯代码使用样例）

2017-08-18 发布：hangge 阅读：6447

在之前的两篇文章中，我都是在 StoryBoard 里使用 StackView 的。本文接着演示如何在不使用 StoryBoard 的情况下，在代码中创建并使用 UIStackView。

一、相关的方法与属性

1，UIStackView 的方法

init(frame: CGRect)：创建一个 UIStackView
init(arrangedSubviews views: [UIView])：同样是创建一个 UIStackView，但我们可以将子视图传入。views 数组里的顺序即为子视图显示的顺序。
arrangedSubviews: [UIView] { get }：获得 UIStackView 里所有的子视图。
addArrangedSubview(view: UIView)：添加一个子视图
removeArrangedSubview(view: UIView)：删除一个子视图
insertArrangedSubview(view: UIView, at stackIndex: Int)：在指定位置插入一个子视图

2，UIStackView 的属性

axis：子视图的布局方向（水平、垂直）
alignment：子视图的对齐方式。
distributlon：子视图的分布比例。
spacing：子视图间的间距。
isBaselineRelativeArrangement：视图间的垂直间隙是否根据基线测量得到（默认值：false）。
isLayoutMarginsRelativeArrangement：stack view 平铺其管理的视图时是否要参照它的布局边距（默认值：false）。

二、使用样例

这里同样以第一篇文章演示的三栏布局为例，只不过我们这次使用纯代码实现。

1，效果图

（1）默认情况下，3 个 ImageView 在垂直方向上三等分排列显示。它们的尺寸间隔完全相同。

（2）当设备横置时，3 个 ImageView 变成水平排列，同时仍然保持大小间隔相等。

2，样例代码

import UIKit

class ViewController: UIViewController {
    
    var stackView:UIStackView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    
        //创建StackView
        stackView = UIStackView()
        
        //设置自视图间隔
        stackView.spacing = 10
        
        //子视图的高度或宽度保持一致
        stackView.distribution = .fillEqually
        
        //创建并添加内部视图
        let imageView1 = UIImageView(image: UIImage(named: "image1"))
        imageView1.contentMode = .scaleAspectFill
        imageView1.clipsToBounds = true
        stackView.addArrangedSubview(imageView1)
        
        let imageView2 = UIImageView(image: UIImage(named: "image2"))
        imageView2.contentMode = .scaleAspectFill
        imageView2.clipsToBounds = true
        stackView.addArrangedSubview(imageView2)
        
        let imageView3 = UIImageView(image: UIImage(named: "image3"))
        imageView3.contentMode = .scaleAspectFill
        imageView3.clipsToBounds = true
        stackView.addArrangedSubview(imageView3)
        
        //将StackView添加到主视图中
        self.view.addSubview(stackView)
    }
    
    //将要对子视图布局时调用
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        let padding:CGFloat = 10
        
        //横竖屏判断
        let orientation = UIApplication.shared.statusBarOrientation
        
        //如果是竖屏
        if UIInterfaceOrientationIsPortrait(orientation) {
            stackView.frame = CGRect(x:padding, y:64 + padding,
                                     width:view.frame.width - padding * 2,
                                     height:view.frame.height - 64 - padding * 2)
            //内部视图垂直排列
            stackView.axis = .vertical
        }
        //如果是横屏
        else {
            stackView.frame = CGRect(x:padding, y:32 + padding,
                                     width:view.frame.width - padding * 2,
                                     height:view.frame.height - 32 - padding * 2)
            //内部视图水平排列
            stackView.axis = .horizontal
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}