Swift UIStackView 的使用简单示例

夏天然后

于 2022-07-27 16:58:42 发布

阅读量1.1k

点赞数

分类专栏： [Swift] 文章标签： swift UIStackView

本文链接：https://blog.csdn.net/sinat_30162391/article/details/126018575

版权

[Swift] 专栏收录该内容

43 篇文章

订阅专栏

布局如图中红框内所示样式的一个布局技巧

用户名字是长度可变
浏览数长度可变
本次需求已用户名字控件可拉伸压缩
使用UIStackView 和 UILabel 搭配, 代码如下

首先创建一个容器

/// 容器
    private lazy var stackView = UIStackView().then {
        $0.axis = .horizontal
        $0.alignment = .center
        // 如需要自定义间距, 可使用 
        // open func setCustomSpacing(_ spacing: CGFloat, after arrangedSubview: UIView)
        $0.spacing = 6.px
    }

其中布局代码可简化成

private func setupViews() {

        stackView.snp.makeConstraints {
            $0.left.equalTo(12.px)
            $0.right.equalTo(contentView.snp.right).offset(-12.px)
            $0.bottom.equalTo(-20.px)
            $0.height.equalTo(40.px)
        }

        stackView.addArrangedSubview(avatarImageView)
        stackView.addArrangedSubview(userNameLabel)
        stackView.addArrangedSubview(eyesImageView)
        stackView.addArrangedSubview(browseCountLabel)

        avatarImageView.snp.makeConstraints {
            $0.width.height.equalTo(40.px)
        }
    }

用户名字 label 可这样初始化

private lazy var userNameLabel = UILabel().then {
        $0.font = .pingfang(.regular, pixels: 24)
        $0.textColor = UIColor(0x666666)
        $0.textAlignment = .left
        $0.isUserInteractionEnabled = true
        $0.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        $0.setContentHuggingPriority(UILayoutPriority(200), for: .horizontal)
        $0.onGesture(.tap) { [weak self] _ in
           
        }
    }