Swift 教程之UIStackview 01 基础使用

• 请点击，免费订阅《学Swift挣美元》专栏

简介

UIStackView是支持线性流式界面布局集合视图，他支持column和row两种方向。UIStackView依托于Auto Layout的强大布局功能呢，可以根据不同设备方向、屏幕大小、容器大小来实现动态界面布局。

UIStackView通过arrangedSubviews属性来管理子视图。这些子视图根据UIStackview的axis（轴）进行排列。另外我们还需要axis、distrubtion、alignment、spacing等参数来完成节目布局。

您负责定义UIStackView的大小和位置，UIStackView负责管理其内部的布局和大小。

Jietu20190508-112642@2x.jpg

效果图

Jietu20190508-101712@2x.jpg

1. 定义一个stackview

fileprivate let stackView: UIStackView = {let stack = UIStackView()stack.translatesAutoresizingMaskIntoConstraints = falsestack.distribution = .fillEquallystack.axis = .verticalstack.spacing = 40return stack}()

2. 配置一下显示内容

 view.addSubview(stackView)stackView.heightAnchor.constraint(equalToConstant: view.frame.height - 100).isActive = truestackView.widthAnchor.constraint(equalToConstant: view.frame.width - 40).isActive = truestackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = truestackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true// Do any additional setup after loading the view.let iv1 = UIImageView(image: UIImage(named: "001_jydc.jpg"))let iv2 = UIImageView(image: UIImage(named: "002_yqch.jpg"))let iv3 = UIImageView(image: UIImage(named: "003_tyqf.jpg"))stackView.addArrangedSubview(iv1)stackView.addArrangedSubview(iv2)stackView.addArrangedSubview(iv3)/*iv1.contentMode = .scaleAspectFitiv2.contentMode = .scaleAspectFitiv3.contentMode = .scaleAspectFit*/iv1.contentMode = .scaleAspectFilliv2.contentMode = .scaleAspectFilliv3.contentMode = .scaleAspectFilliv1.clipsToBounds = trueiv2.clipsToBounds = trueiv3.clipsToBounds = trueiv1.layer.cornerRadius = 40iv2.layer.cornerRadius = 40iv3.layer.cornerRadius = 2