Question

我试图根据屏幕大小动态约束stackView中的按钮。最终目标是将按钮的半径限制为stackView中每个堆栈的50％。

我在stackView中有三个按钮。到目前为止我的代码：

class PeopleContainerView: UIView {

    let stackContainerView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .blue
        return v
    }()

    let stackView: UIStackView = {
        let sv = UIStackView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.distribution = .fillEqually
        sv.backgroundColor = .gray
        return sv
    }()

    let previousButton: UIButton = {
        let b = UIButton()
        b.translatesAutoresizingMaskIntoConstraints = false
        b.backgroundColor = .faintGray
        b.setImage(UIImage(named: "ic_keyboard_arrow_left"), for: .normal)
        return b
    }()

    let nextButton: UIButton = {
        let b = UIButton()
        b.translatesAutoresizingMaskIntoConstraints = false
        b.backgroundColor = .faintGray
        b.setImage(UIImage(named: "ic_keyboard_arrow_right"), for: .normal)
        return b
    }()

    let chatButton: UIButton = {
        let b = UIButton()
        b.translatesAutoresizingMaskIntoConstraints = false
        b.backgroundColor = .customPink
        b.setImage(UIImage(named: "ic_forum"), for: .normal)
        return b
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        setupViews()
    }

    func setupViews() {
        addSubview(stackContainerView)
        stackContainerView.addSubview(stackView)

        stackContainerView.topAnchor.constraint(equalTo: collectionView.bottomAnchor).isActive = true
        stackContainerView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 15).isActive = true
        stackContainerView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -15).isActive = true
        stackContainerView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.3).isActive = true

        stackView.topAnchor.constraint(equalTo: stackContainerView.topAnchor).isActive = true
        stackView.heightAnchor.constraint(equalTo: stackContainerView.heightAnchor).isActive = true
        stackView.widthAnchor.constraint(equalTo: stackContainerView.widthAnchor, multiplier: 0.75).isActive = true
        stackView.centerXAnchor.constraint(equalTo: stackContainerView.centerXAnchor).isActive = true

        stackView.addArrangedSubview(previousButton)
        stackView.addArrangedSubview(chatButton)
        stackView.addArrangedSubview(nextButton)

        //Below two lines break the constraints
        previousButton.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.3 * 0.5).isActive = true
        previousButton.heightAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.3 * 0.5).isActive = true

    }

}

此后在viewController，我将执行此视图的addSubview（）。我当前代码的最后两行确实调整了我的按钮大小，但打破了其他约束。最后，我还需要动态添加一个cornerRadius。请参阅截图：

最后两行 -

没有最后两行 -

如果有人可以建议我哪里出错了，那将是很好的，谢谢。

EDIT1：我的最终目标是实现以下UI：

EDIT2：我对Rikesh的建议的尝试

class PeopleContainerView: UIView {

    let stackContainerView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let stackView: UIStackView = {
        let sv = UIStackView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.distribution = .fillEqually
        return sv
    }()

    let previousButton: UIButton = {
        let b = UIButton()
        b.translatesAutoresizingMaskIntoConstraints = false
        b.backgroundColor = .faintGray
        b.setImage(UIImage(named: "ic_keyboard_arrow_left"), for: .normal)
        return b
    }()

    let nextButton: UIButton = {
        let b = UIButton(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
        b.translatesAutoresizingMaskIntoConstraints = false
        b.backgroundColor = .faintGray
        b.setImage(UIImage(named: "ic_keyboard_arrow_right"), for: .normal)
        return b
    }()

    //New attempt to create a custom Wrapper View
    let chatButton: ButtonView = {
        let b = ButtonView()
        b.translatesAutoresizingMaskIntoConstraints = false
        return b
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }

    func setupViews() {
        addSubview(stackContainerView)
        stackContainerView.addSubview(stackView)

        stackContainerView.topAnchor.constraint(equalTo: collectionView.bottomAnchor).isActive = true
        stackContainerView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 15).isActive = true
        stackContainerView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -15).isActive = true
        stackContainerView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.3).isActive = true

        stackView.topAnchor.constraint(equalTo: collectionView.bottomAnchor).isActive = true
        stackView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.2).isActive = true
        stackView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 0.75).isActive = true
        stackView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true

        stackView.addArrangedSubview(previousButton)
        stackView.addArrangedSubview(chatButton)
        stackView.addArrangedSubview(nextButton)
    }
}

class ButtonView: UIView {
    let containerView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .customPink
        return v
    }()

    let button: UIButton = {
        let b = UIButton()
        b.translatesAutoresizingMaskIntoConstraints = false
        b.layer.cornerRadius = 30
        return b
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        setupViews()
    }

    func setupViews() {
        addSubview(containerView)
        containerView.addSubview(button)

        containerView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        containerView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
        containerView.widthAnchor.constraint(equalToConstant: 20).isActive = true
        containerView.heightAnchor.constraint(equalToConstant: 20).isActive = true

        button.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        button.widthAnchor.constraint(equalToConstant: 20).isActive = true
        button.heightAnchor.constraint(equalToConstant: 20).isActive = true
        button.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
    }

切换peopleContainerView时的结果：

未切换时的结果：

Answer 1

如果我已正确理解您的问题，我想建议解决方案如下：

首先将1个视图添加到stackview
使stackview等于间距
在视图中添加按钮
为按钮添加约束

一个。宽高比1：1

湾高度= 0.6 *父视图的高度

℃。水平居中

d。垂直居中
在stackview中制作3份视图

Swift：根据屏幕尺寸动态约束按钮大小

1 个答案: