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

Question

I'm trying to create these 6 UITextField centered within a UIVIew that I have centered and is 0.85 the width of self.view . I was able to get it working on one iPhone size however it was hardcoded and doesn't transform well on other iPhone sizes.

So now I'm trying to figure out the best way to properly center these 6 elements.

Here's what I currently have:

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)
        }
    }
}

Here's what I currently have. You can see that the 6 elements' parent view is centered and that I'm struggling to have the 6 children UITextFields perfectly spaced across the highlighted green parent view.

Mockup of how I'd like my UI to look:

Answer 1

You can do this easily with a UIStackView

Here's a quick example (based on your code):

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)
        }
        
    }

}

The result:

Your question didn't indicate how you want the UI to look on a wider device, so here's how that looks when the phone is rotated: