首页 > 解决方案 > 以编程方式创建堆栈视图

问题描述

我正在尝试通过以编程方式使用堆栈视图来创建日期组件。如果用户输入错误的日期,错误标签将相应地显示消息。如果我通过情节提要创建它,它工作正常,但是当我使用我以编程方式创建的组件时,它已在堆栈视图中添加了所有元素。我看不到错误标签。我验证了我在故事板和组件类中添加的自动布局,两者看起来都很相似。这是我的组件的代码。

        class CustomDateView: UIView {

    // MARK: - Variable
    private let dayTextField: UITextField = {
        let inputField = UITextField()
        inputField.borderStyle = .none
        inputField.layer.cornerRadius = 8.0
        inputField.layer.borderColor = UIColor.darkGray.cgColor
        inputField.backgroundColor = UIColor.blue
        inputField.textAlignment = .center
        inputField.tag = 0
        inputField.translatesAutoresizingMaskIntoConstraints = false
        return inputField
    }()

    private let monthTextField: UITextField = {
        let inputField = UITextField()
        inputField.borderStyle = .none
        inputField.layer.cornerRadius = 8.0
        inputField.layer.borderColor = UIColor.darkGray.cgColor
        inputField.backgroundColor = UIColor.blue
        inputField.textAlignment = .center
        inputField.tag = 1
        inputField.translatesAutoresizingMaskIntoConstraints = false
        return inputField
    }()

    private let yearTextField: UITextField = {
        let inputField = UITextField()
        inputField.borderStyle = .none
        inputField.layer.cornerRadius = 8.0
        inputField.layer.borderColor = UIColor.darkGray.cgColor
        inputField.backgroundColor = UIColor.blue
        inputField.textAlignment = .center
        inputField.tag = 2
        inputField.translatesAutoresizingMaskIntoConstraints = false
        return inputField
    }()

    private let errorLabel: UILabel = {
        let errorLabel = UILabel()
        errorLabel.textColor = .red
        errorLabel.textAlignment = .center
        errorLabel.numberOfLines = 0
        errorLabel.translatesAutoresizingMaskIntoConstraints = false
        return errorLabel
    }()

    private let monthSeparator: UILabel = {
        let label = UILabel()
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private let yearSeparator: UILabel = {
        let label = UILabel()
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private let horizontalStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.alignment = .fill
        stackView.distribution = .fillProportionally
        stackView.spacing = 16.0
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

    private let verticalStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fillProportionally
        stackView.spacing = 8.0
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()


    // MARK: - Initialisers
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setup()
    }

    // MARK: - Private Functions
    private func setup() {
        self.horizontalStackView.addArrangedSubview(self.dayTextField)
        self.horizontalStackView.addArrangedSubview(self.monthSeparator)
        self.horizontalStackView.addArrangedSubview(self.monthTextField)
        self.horizontalStackView.addArrangedSubview(self.yearSeparator)
        self.horizontalStackView.addArrangedSubview(self.yearTextField)
        self.verticalStackView.addArrangedSubview(self.horizontalStackView)
        self.verticalStackView.addArrangedSubview(self.errorLabel)
        self.addSubview(self.verticalStackView)

        self.translatesAutoresizingMaskIntoConstraints = false

        let selfType = type(of: self)

        NSLayoutConstraint.activate([
            self.dayTextField.heightAnchor.constraint(equalToConstant: 48.0),
            self.dayTextField.widthAnchor.constraint(equalToConstant: 62.0),
            self.monthTextField.widthAnchor.constraint(equalToConstant: 62.0),
            self.monthSeparator.widthAnchor.constraint(equalToConstant: 14.0),
            self.yearSeparator.widthAnchor.constraint(equalToConstant: 14.0)
            ])

        NSLayoutConstraint.activate([
            self.verticalStackView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),
            self.verticalStackView.topAnchor.constraint(equalTo: self.topAnchor, constant: 0.0),
            self.bottomAnchor.constraint(equalTo: self.verticalStackView.bottomAnchor),
            self.trailingAnchor.constraint(equalTo: self.verticalStackView.trailingAnchor)
            ])
        } 
}

它正确呈现视图,但在设置错误标签堆栈视图后不会增长以显示文本。我为分隔符和文本字段提供了固定宽度,因为我希望它们具有精确的宽度和高度。我在这里应用自动布局时是否犯了任何错误。

标签: swiftuistackviewios-autolayout

解决方案


推荐阅读