以编程方式创建堆栈视图

时间:2019-02-25 07:44:21

标签: swift uistackview ios-autolayout

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

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

它可以正确地渲染视图,但是设置错误标签后,堆栈视图将无法显示文本。我给分隔符和文本字段指定了固定的宽度,因为我希望它们的宽度和高度都正确。 在这里应用自动布局时,我是否犯任何错误。

0 个答案:

没有答案