如何在父 UIView 中居中多個 UI 元素

Question

我正在嘗試創建以 UIVIew 為中心的這 6 個 UITextField ，並且是self.view寬度的 0.85。 我能夠讓它在一種 iPhone 尺寸上工作，但是它是硬編碼的，並且在其他 iPhone 尺寸上不能很好地轉換。

所以現在我試圖找出正確居中這 6 個元素的最佳方法。

這是我目前擁有的：

class FormView: UIViewController {
    //INSTANTIATING VARIABLES
    ...


    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        setupCodeFieldView()
    }
    
    private func setupCodeFieldView(){
        codeFieldView.backgroundColor = .green
        codeFieldView.translatesAutoresizingMaskIntoConstraints = false
        parentSubview.addSubview(codeFieldView)
        codeFieldView.heightAnchor.constraint(equalToConstant: 60).isActive = true
        codeFieldView.topAnchor.constraint(equalTo: parentSubview.bottomAnchor, constant: 5).isActive = true
        //SETTING WIDTH SIZE AND CENTERING PARENT VIEW
        codeFieldView.widthAnchor.constraint(equalTo:view.widthAnchor, multiplier: 0.85).isActive = true
        codeFieldView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        
        setupCodeFields()
    }

    fileprivate func setupCodeFields() {
        var textFieldArr: [UITextField] = []
        for index in 0...5{
            let field: UITextField = UITextField()
            field.returnKeyType = .next
            field.setUnderline()
            field.borderStyle = .none
            field.keyboardType = .numberPad
            field.backgroundColor = UIColor.white
            field.tag = index
            field.textAlignment = .center
            let valueWidth = codeFieldView.bounds.size.width/6
            field.placeholder = String(describing: valueWidth)
            field.accessibilityIdentifier = "field" + String(index)
            codeFieldView.addSubview(field)
            field.layer.cornerRadius = 5.0
            field.layer.borderWidth = 1.0
            field.layer.borderColor = UIColor(red: 0.45, green: 0.46, blue: 0.50, alpha: 1.00).cgColor
            field.translatesAutoresizingMaskIntoConstraints = false
            
            //HERE IS HOW SET THE WIDTH OF THE BUTTON
            field.widthAnchor.constraint(equalToConstant: floor(valueWidth)-5).isActive = true
            field.heightAnchor.constraint(equalToConstant: 60).isActive = true
            field.topAnchor.constraint(equalTo: codeFieldView.topAnchor).isActive = true
            if index == 0 {
                field.leftAnchor.constraint(equalTo:codeFieldView.leftAnchor).isActive = true
                
            } else {
                field.leftAnchor.constraint(equalTo: textFieldArr[index-1].rightAnchor, constant: 5).isActive = true
            }
            textFieldArr.append(field)
        }
    }
}

這是我目前擁有的。 您可以看到 6 個元素的父視圖居中，我正在努力讓 6 個子 UITextFields 完美地分布在突出顯示的綠色父視圖中。

我希望我的 UI 外觀的樣機：

Answer 1

您可以使用UIStackView輕松完成此操作

這是一個簡單的示例（基於您的代碼）：

class FormView: UIViewController {
    //INSTANTIATING VARIABLES
    //...
    
    let codeFieldView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .gray
        
        setupCodeFieldView()

    }
    
    private func setupCodeFieldView() {
        codeFieldView.backgroundColor = .green
        codeFieldView.translatesAutoresizingMaskIntoConstraints = false
        
        // not clear what you're doing with "parentSubview"
        //  so let's just add it to the root view
        
        view.addSubview(codeFieldView)
        
        // always respect safe-area
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // height of 60
            codeFieldView.heightAnchor.constraint(equalToConstant: 60),
            // 85% of the width
            codeFieldView.widthAnchor.constraint(equalTo: g.widthAnchor, multiplier: 0.85),
            // centered vertically and horizontally
            codeFieldView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
            codeFieldView.centerXAnchor.constraint(equalTo: g.centerXAnchor),

        ])
        
        setupCodeFields()
    }
    
    fileprivate func setupCodeFields() {
        
        // let's add a stack view to codeFieldView
        let stackView = UIStackView()
        stackView.spacing = 5
        stackView.distribution = .fillEqually
        
        stackView.translatesAutoresizingMaskIntoConstraints = false
        codeFieldView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            // constrain stack view to all 4 sides of code field view
            stackView.topAnchor.constraint(equalTo: codeFieldView.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: codeFieldView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: codeFieldView.trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: codeFieldView.bottomAnchor),
        ])
        
        // now we add the text fields
        for index in 0...5 {
            let field: UITextField = UITextField()
            field.returnKeyType = .next
            //field.setUnderline()
            field.borderStyle = .none
            field.keyboardType = .numberPad
            field.backgroundColor = UIColor.white
            field.tag = index
            field.textAlignment = .center
            field.accessibilityIdentifier = "field" + String(index)
            field.layer.cornerRadius = 5.0
            field.layer.borderWidth = 1.0
            field.layer.borderColor = UIColor(red: 0.45, green: 0.46, blue: 0.50, alpha: 1.00).cgColor
            
            // add it to the stack view
            stackView.addArrangedSubview(field)
        }
        
    }

}

結果：

您的問題並未表明您希望 UI 如何在更寬的設備上顯示，因此以下是手機旋轉時的外觀：