UIStackView 使用

为什么使用它

1.动态实现视图的添加。不用修改删除、添加、隐藏后的布局约束。
2.布局速度快， 不需要写autolayout 繁琐的代码。

⚠️注意 它是介于绝对布局和 autolayout直接的布局。自己动手写下面的Demo， 才能细细体会其中的坑与优秀的点。

基础属性介绍

• axis （视图的排列方向， 是按水平/垂直）
• distribution（视图的分布方式）
• alignment （视图的对齐方式）
• spacing （视图之间的间距）
• isLayoutMarginsRelativeArrangement （打开layoutMargins 的开关）
• layoutMargins （边框）

需要实现的效果（红色框）

效果.png

代码实现部分

        
        // 1.分析视图 2.规划布局
        let contentStackView = UIStackView.make(axis: .horizontal, distribution: .fill, alignment: .center, spacing: 10)
        contentStackView.translatesAutoresizingMaskIntoConstraints = false
        contentStackView.isLayoutMarginsRelativeArrangement = true
        contentStackView.layoutMargins = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
        view.addSubview(contentStackView)
        
        NSLayoutConstraint.activate([
            contentStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0),
            contentStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            contentStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
            
        ])
        
        
        let imageView = UIImageView(image: UIImage(named: "icon"))
        imageView.widthAnchor.constraint(equalToConstant: 120).isActive = true
        imageView.heightAnchor.constraint(equalToConstant: 120).isActive = true
//        imageView.setContentHuggingPriority(.required, for: .horizontal)
        imageView.backgroundColor = .gray
        imageView.layer.masksToBounds = true
        imageView.layer.cornerRadius = 20
        contentStackView.addArrangedSubview(imageView)
        
        
        let verticalStackView = UIStackView.make(axis: .vertical, distribution: .fill, alignment: .fill, spacing: 15)
        verticalStackView.translatesAutoresizingMaskIntoConstraints = false
        contentStackView.addArrangedSubview(verticalStackView)
        
        let titleLable = UILabel()
        titleLable.text = "哔哩哔哩-弹幕番剧直播高清视频"
        titleLable.font = UIFont.boldSystemFont(ofSize: 22)
        titleLable.textColor = .black
        titleLable.numberOfLines = 2
        verticalStackView.addArrangedSubview(titleLable)
        verticalStackView.setCustomSpacing(5, after: titleLable)
        
        let lightGrayLable = UILabel()
        lightGrayLable.text = "你感兴趣的视频都在B站"
        lightGrayLable.font = UIFont.systemFont(ofSize: 17)
        lightGrayLable.textColor = .lightGray
        verticalStackView.addArrangedSubview(lightGrayLable)
        
        
        
        let horizontalStackView = UIStackView.make(axis: .horizontal, distribution: .fill, alignment: .center, spacing: 10)
        horizontalStackView.translatesAutoresizingMaskIntoConstraints = false
        verticalStackView.addArrangedSubview(horizontalStackView)

        let getButton = UIButton(type: .custom)
        getButton.setTitle("获取", for: .normal)
        getButton.backgroundColor = .blue
        // 不指定宽度和高度， 就会被压缩， 并且不能得到想要的宽高
        getButton.widthAnchor.constraint(equalToConstant: 80).isActive = true
        getButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
        getButton.layer.cornerRadius = 15
        getButton.titleLabel?.font = UIFont.systemFont(ofSize: 15)
        getButton.clipsToBounds = true
        horizontalStackView.addArrangedSubview(getButton)
        
        // 不要使用 autoLayout 否则约束冲突
//        getButton.leadingAnchor.constraint(equalTo: horizontalStackView.leadingAnchor, constant: 10).isActive = true

        let payLable = UILabel()
        payLable.text = "App内购买"
        payLable.font = UIFont.systemFont(ofSize: 8)
        payLable.textColor = .lightGray
        
        // 宽/高度模糊的时候， 水平/垂直位置模糊的时候  （运行时， 可以看出这个问题）
        payLable.setContentHuggingPriority(.required, for: .horizontal)
        payLable.setContentCompressionResistancePriority(.required, for: .horizontal)
        horizontalStackView.addArrangedSubview(payLable)

        let shareButton = UIButton(type: .custom)
        shareButton.setTitle("分享", for: .normal)
        shareButton.contentHorizontalAlignment = .right
        shareButton.setTitleColor(.cyan, for: .normal)
        shareButton.titleLabel?.font = UIFont.systemFont(ofSize: 15)
        horizontalStackView.addArrangedSubview(shareButton)

extension UIStackView {
    static func make(axis: NSLayoutConstraint.Axis, distribution:Distribution,  alignment: Alignment, spacing: CGFloat = 0) -> UIStackView {
        let stackView = UIStackView()
        stackView.axis = axis
        stackView.distribution = distribution
        stackView.alignment = alignment
        stackView.spacing = spacing
        return stackView
    }
}