Swift UIStackView 的使用简单示例

Posted 2023-03-01 夏天然后

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

• 用户名字是长度可变
• 浏览数长度可变
• 本次需求已用户名字控件可拉伸压缩
• 使用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
           
        
    

这样就可完成本次的简单布局, 由此可以延伸出, 多子模块布局, 竖直方向布局, 还可以使用 StackView 和 StackView 的"嵌套".