swift - 如何使用 SWIFT 向包含 UILabel 的 UITextField 正确添加约束？

Question

总的来说，我对编程还比较陌生，我才刚刚开始了解约束和自动布局以及如何正确设置。目前，我想要弄清楚的是如何使最上面的 UITextfield 及其内部的 UILabel (显示 Weight(lbs): 70.0 的那个)与我为其配置的规范对齐(参见下面的代码) ...)。

当我指定宽度和长度 anchor 的大小时，我总是得到一个忽略我的尺寸规范和 anchor 到整个屏幕的 View (参见下图)。

任何帮助将不胜感激。

import UIKit
import RealmSwift

class ThirdViewController: UIViewController {

    let realm = try! Realm()

    var stats : Results<WeightSetsReps>?

    var weightTextField = UITextField()
    var weightLabel = UILabel()

    var repsTextField = UITextField()
    var repsLabel = UILabel()

    var timerImage = UIImageView()


    var selectedExercise : Exercises? {
        didSet{
            loadWsr()
        }
    }


    //MARK: - ViewDidLoad()
    override func viewDidLoad() {
        super.viewDidLoad()

//        timeClock()
        navConAcc()
        labelConfig()
        setTextFieldConstraints()
//        setImageViewConstraints()
    }


    //MARK: - UILabel
    func labelConfig(){
        weightTextField.placeholder = "Total weight..."
        weightTextField.layer.borderWidth = 1
        weightTextField.backgroundColor = .white
        weightTextField.layer.cornerRadius = 25
        weightTextField.layer.borderColor = UIColor.lightGray.cgColor

        weightLabel.text = "  Weight (lbs): "
        weightLabel.textColor = .black

        weightTextField.leftView = weightLabel
        weightTextField.leftViewMode = .always


        repsTextField.placeholder = "Number of Reps..."
        repsTextField.layer.borderWidth = 1
        repsTextField.backgroundColor = .white
        repsTextField.layer.cornerRadius = 25
        repsTextField.layer.borderColor = UIColor.lightGray.cgColor


        repsLabel.text = "  Repetitions: "
        repsLabel.textColor = .black

        repsTextField.leftView = repsLabel
        repsTextField.leftViewMode = .always

        [weightTextField, repsTextField].forEach{view.addSubview($0)}

    }

    //MARK: - TextField Constrainst
    func setTextFieldConstraints(){

        weightTextField.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: view.leadingAnchor, bottom: view.safeAreaLayoutGuide.bottomAnchor, trailing: view.trailingAnchor, size: .init(width: 20, height: 20))

        repsTextField.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: view.leadingAnchor, bottom: view.safeAreaLayoutGuide.bottomAnchor, trailing: view.trailingAnchor, size: .init(width: 20, height: 20))
    }

    //MARK: - ImageView Constraints
//    func setImageViewConstraints(){
//
//        timerImage.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: view.leadingAnchor, bottom: view.safeAreaLayoutGuide.bottomAnchor, trailing: view.trailingAnchor, padding: .init(top: 40, left: 40, bottom: 450, right: 50))
//
//    }





    //MARK: - Navigation Bar Setup
    func navConAcc(){
        navigationItem.title = selectedExercise?.exerciseName
        navigationController?.navigationBar.prefersLargeTitles = true
    }

    //MARK: - Stopwatch
//    func timeClock(){
//        let image1 = UIImage(named: "stopwatch")
//        timerImage = UIImageView(image: image1)
//        timerImage.contentMode = .scaleAspectFit
//        self.view.addSubview(timerImage)
//    }

    //MARK: - Load Data
    func loadWsr() {
        stats = selectedExercise?.wsr.sorted(byKeyPath: "sets", ascending: true)
    }

    //MARK: - Save Data
    func save(wsr : WeightSetsReps){
        do {
            try realm.write {
                realm.add(wsr)
            }
        } catch {
            print("Error saving wsr data \(error)")
        }
    }

}

extension UIView {
    func anchor(top: NSLayoutYAxisAnchor?, leading: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, trailing: NSLayoutXAxisAnchor?, padding: UIEdgeInsets = .zero, size: CGSize = .zero){

        translatesAutoresizingMaskIntoConstraints = false

        if let top = top {
            topAnchor.constraint(equalTo: top, constant: padding.top).isActive = true
        }

        if let leading = leading {
            leadingAnchor.constraint(equalTo: leading, constant: padding.left).isActive = true
        }

        if let bottom = bottom {
            bottomAnchor.constraint(equalTo: bottom, constant: padding.bottom).isActive = true
        }

        if let trailing = trailing {
            trailingAnchor.constraint(equalTo: trailing, constant: padding.right).isActive = true
        }

        if size.width != 0 {
            widthAnchor.constraint(equalToConstant: size.width).isActive = true
        }

        if size.height != 0 {
            heightAnchor.constraint(equalToConstant: size.height).isActive = true
        }
    }
}

Answer 1

您需要删除底部 anchor

repsTextField.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: view.leadingAnchor, bottom:nil, trailing: view.trailingAnchor, size: .init(width: 20, height: 20))