向 UIStackView 水平添加两个按钮，一个覆盖另一个

Question

所以我想在我的视图中添加两个等宽的按钮并排放置。我使用了堆栈视图，因为我认为这会更好。名为 "Sort" 的第二个按钮只有一个在正确宽度下可见，但覆盖了我的 "Add" 按钮离开并在其旁边留空 space。我有运行它没有 "Sort" 按钮，我只是在整个堆栈视图中显示 "Add" 按钮，正如我所期望的那样有点困惑，但是这个。下面的代码不确定它发生了什么。如果认为最好不要使用 stackView，则只需要一点关于处理约束的最佳方法的建议。感谢大家。只是说我只在程序化方面工作。

import UIKit

class PlacesVC: UIViewController {


let topTitle = UILabel()
let logoImage = UIImage(named: "DIYCoffeeLogoDark")
let logoImageView = UIImageView()
let addButton = UIButton()
let sortButton = UIButton()
let buttonStack = UIStackView()

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = #colorLiteral(red: 0.9324248433, green: 0.9268818498, blue: 0.9366856217, alpha: 1)
    logoImageView.image = logoImage
    self.navigationItem.titleView = logoImageView
    self.navigationController?.navigationBar.isHidden = false
    view.addSubview(topTitle)
    view.addSubview(buttonStack)
    setUpTopTital()
    setUpButtonStack()

}

func setUpTopTital() {
    topTitle.translatesAutoresizingMaskIntoConstraints = false
    topTitle.font = UIFont(name: "Futura", size: 25)
    topTitle.text = "Your Saved Places"
    topTitle.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
    topTitle.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
    topTitle.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true
    topTitle.heightAnchor.constraint(equalToConstant: 30).isActive = true
}

func setUpButtonStack() {
    buttonStack.translatesAutoresizingMaskIntoConstraints = false
    buttonStack.addArrangedSubview(addButton)
    buttonStack.addArrangedSubview(sortButton)
    buttonStack.distribution = .fillProportionally
    buttonStack.alignment = .center
    buttonStack.axis = .horizontal
    buttonStack.spacing = 20
    buttonStack.topAnchor.constraint(equalTo: topTitle.bottomAnchor, constant: 20).isActive = true
    buttonStack.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    buttonStack.widthAnchor.constraint(equalToConstant: view.frame.width - 40).isActive = true
    buttonStack.heightAnchor.constraint(equalToConstant: 30).isActive = true
    setUpAddButton()
    setUpSortButton()
}

func setUpAddButton() {
    addButton.translatesAutoresizingMaskIntoConstraints = false
    addButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
    addButton.setTitle("ADD", for: .normal)
    addButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
    addButton.layer.cornerRadius = 5
    addButton.setTitleColor(.white, for: .normal)
}

func setUpSortButton() {
    addButton.translatesAutoresizingMaskIntoConstraints = false
    addButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
    addButton.setTitle("SORT", for: .normal)
    addButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
    addButton.layer.cornerRadius = 5
    addButton.setTitleColor(.white, for: .normal)
}

Answer 1

在 setUpAddButton() 和 setUpSortButton() 这两个函数中，您使用的是同一个按钮，即 addButton。

在 setUpSortButton() 中将 addButton 更改为 sortButton，然后您就可以在堆栈视图中看到这两个按钮。

func setUpSortButton() {
    sortButton.translatesAutoresizingMaskIntoConstraints = false
    sortButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
    sortButton.setTitle("SORT", for: .normal)
    sortButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
    sortButton.layer.cornerRadius = 5
    sortButton.setTitleColor(.white, for: .normal)
}

向 UIStackView 水平添加两个按钮，一个覆盖另一个

Adding two buttons to UIStackView horizontally one covers the other

xcode

constraints

ios

swift

uistackview