带有 UISegmentedControl 的 UIStackView

Posted 2023-03-11

【中文标题】带有 UISegmentedControl 的 UIStackView

【英文标题】：UIStackView with UISegmentedControl

【发布时间】：2021-01-12 12:12:59

【问题描述】：

我正在尝试使用此代码创建带有 3 个 UISegmentedControl 的 UIStackView，并且我希望它们在垂直和水平方向上都居中：

let segmented = UISegmentedControl(items: ["SOLID","GRADIENT"])
let segmented2 = UISegmentedControl(items: ["SOLID","GRADIENT"])
let segmented3 = UISegmentedControl(items: ["SOLID","GRADIENT"])

segmented.selectedSegmentIndex = 0
segmented2.selectedSegmentIndex = 0
segmented3.selectedSegmentIndex = 0

let st = UIStackView(arrangedSubviews: [segmented, segmented2, segmented3])
st.axis = .vertical
st.spacing = 5;
st.alignment = .center

self.addSubview(st)

st.translatesAutoresizingMaskIntoConstraints = false
st.topAnchor.constraint(greaterThanOrEqualTo: self.topAnchor, constant: 0.0).isActive = true
st.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0.0).isActive = true
st.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0.0).isActive = true
st.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor, constant: 0.0).isActive = true
st.centerXAnchor.constraint(equalTo: self.centerXAnchor, constant: 0.0).isActive = true
st.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true

问题是我得到了这个观点：

知道如何解决这个问题吗？我希望它们都处于相同的高度。

【参考方案1】：

首先，由于您的约束使用self（如self.topAnchor），此代码必须属于UIView 子类。

不清楚您的最终目标是什么...您希望分段控件堆栈来确定视图的高度吗？或者您是否希望控件高度由视图的高度确定？您如何设置包含此控件堆栈的自定义视图的约束？

在任何情况下，您都可以通过添加以下行来使分段控件的高度相等：

st.distribution = .fillEqually

但是，无论您在做什么，您当前对堆栈视图的约束都可能不正确。

试试这样：

    st.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
    st.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
    st.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
    st.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true

不需要centerX 或centerY 约束。

另一种设置这些约束的方法更简洁易读，如下所示：

    NSLayoutConstraint.activate([
        st.topAnchor.constraint(equalTo: self.topAnchor),
        st.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        st.trailingAnchor.constraint(equalTo: self.trailingAnchor),
        st.bottomAnchor.constraint(equalTo: self.bottomAnchor),
    ])

【参考方案2】：

我相信这一点：

st.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor, constant: 0.0).isActive = true

应该倒置为：

st.bottomAnchor.constraint(lessThanOrEqualTo: self.bottomAnchor, constant: 0.0).isActive = true

因为您希望堆栈视图底部锚点的 y 位置小于视图自身底部锚点的 y 位置值。

一般来说，尾锚和底部锚的约束常数必须反转。