如何向具有前导对齐和垂直轴的堆栈视图中的视图添加自定义水平间距？

Question

我有一个堆栈视图，其中包含标题标签和一个视图，该视图恰好是我想要添加自定义间距的另一个堆栈视图。我使用的组合基于文档中描述的方式，用于在UIStackView中的沿其轴定义堆栈的大小部分中布局视图。堆栈有一个垂直轴，其顶部和底部边缘固定到内容视图的顶部和底部边缘（堆栈是 UICollectionViewCell 的子视图）。堆栈的前缘固定到内容视图的前缘，并偏移恒定的 24 点。

我的实际实现如下：

    func setUp() {
        
        titleView = UILabel()
        femaleIcon = UIImageView()
        maleIcon = UIImageView()
        femaleIcon.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(switchFemaleIcon)))
        
        femaleIcon.contentMode = .scaleAspectFit
        maleIcon.contentMode = .scaleAspectFit
        
        maleIcon.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(switchMaleIcon)))
        
        let iconStackView = UIStackView(arrangedSubviews: [
            femaleIcon,
            maleIcon
        ])
        
        iconStackView.axis = .horizontal
        iconStackView.translatesAutoresizingMaskIntoConstraints = false
        
        iconStackView.setCustomSpacing(50, after: femaleIcon)
        
        iconStackView.backgroundColor = .yellow
        
        let stackView = UIStackView(arrangedSubviews: [
            titleView,
            iconStackView
        ])
        
        stackView.axis = .vertical
        stackView.alignment = .leading
        contentView.addSubview(stackView)
        
        stackView.backgroundColor = .magenta
        
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        
        stackView.setCustomSpacing(14, after: titleView)

        NSLayoutConstraint.activate([
            femaleIcon.widthAnchor.constraint(equalToConstant: 30),
            femaleIcon.heightAnchor.constraint(equalToConstant: 48),
            
            maleIcon.widthAnchor.constraint(equalToConstant: 36),
            maleIcon.heightAnchor.constraint(equalToConstant: 36.5),
            
            stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor)
        ])
    }

我想要实现的表示如下：

Answer 1

我删除了

stackView

并在

titleView

和

iconStackView

上安装了约束，如下所示：

func setUp() {
        
        titleView = UILabel()
        femaleIcon = UIImageView()
        maleIcon = UIImageView()
        
        femaleIcon.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(switchFemaleIcon)))
        femaleIcon.isUserInteractionEnabled = true
        
        femaleIcon.contentMode = .scaleAspectFit
        maleIcon.contentMode = .scaleAspectFit
        
        maleIcon.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(switchMaleIcon)))
        maleIcon.isUserInteractionEnabled = true
        
        let iconStackView = UIStackView(arrangedSubviews: [
            femaleIcon,
            maleIcon
        ])
        
        contentView.addSubview(titleView)
        contentView.addSubview(iconStackView)
        titleView.translatesAutoresizingMaskIntoConstraints = false
        
        iconStackView.axis = .horizontal
        iconStackView.translatesAutoresizingMaskIntoConstraints = false
        
        iconStackView.setCustomSpacing(50, after: femaleIcon)
        
        femaleIcon.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
        maleIcon.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        
        NSLayoutConstraint.activate([
            titleView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 24),
            titleView.topAnchor.constraint(equalTo: contentView.topAnchor),
            
            iconStackView.topAnchor.constraint(equalTo: titleView.bottomAnchor, constant: 14),
            iconStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            iconStackView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor)
        ])
    }