视图以彼此下方的 parent 为中心

Question

我正在尝试使用 Layout 扩展制作此视图，我尝试了一点，但无法弄清楚。

到目前为止，这是我的代码：

import UIKit
import Material

class ViewController: UIViewController {
    private var nameField: TextField!
    private var emailField: ErrorTextField!
    private var passwordField: TextField!

    private let constant: CGFloat = 32

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = Color.indigo.base

        prepareNameField()
        preparePasswordField()
        prepareResignResponderButton()
    }

    /// Prepares the resign responder button.
    private func prepareResignResponderButton() {
        let btn = FlatButton(title: "Login", titleColor: Color.white)
        btn.addTarget(self, action: #selector(handleResignResponderButton(button:)), for: .touchUpInside)

        view.layout(btn).width(100).height(constant).right(0).top(8 * constant).horizontally(left: constant, right: constant);
    }

    /// Handle the resign responder button.
    @objc
    internal func handleResignResponderButton(button: UIButton) {
        nameField?.resignFirstResponder()
        passwordField?.resignFirstResponder()
    }

    private func prepareNameField() {
        nameField = TextField()
        nameField.placeholderNormalColor = Color.indigo.lighten4
        nameField.placeholderActiveColor = Color.white
        nameField.dividerNormalColor = Color.indigo.lighten4
        nameField.dividerActiveColor = Color.white
        nameField.isClearIconButtonEnabled = true
        nameField.textColor = Color.white
        nameField.placeholder = "Username"

        view.layout(nameField).top(4 * constant).horizontally(left: constant, right: constant)
    }

    private func preparePasswordField() {
        passwordField = TextField()
        passwordField.placeholderNormalColor = Color.indigo.lighten4
        passwordField.placeholderActiveColor = Color.white
        passwordField.dividerNormalColor = Color.indigo.lighten4
        passwordField.dividerActiveColor = Color.white
        passwordField.isClearIconButtonEnabled = true
        passwordField.textColor = Color.white
        passwordField.placeholder = "Password"
        passwordField.clearButtonMode = .whileEditing
        passwordField.isVisibilityIconButtonEnabled = true

        // Setting the visibilityIconButton color.
        passwordField.visibilityIconButton?.tintColor = Color.white.withAlphaComponent(passwordField.isSecureTextEntry ? 0.38 : 0.54)

        view.layout(passwordField).top(6 * constant).horizontally(left: constant, right: constant)
    }

}

我是 swift 的新手，所以如果有人能向我解释如何完成它，那就太好了。

Answer 1

正如您在下面看到的，使用视觉格式化语言，您基本上是在用代码绘画。

import UIKit

class ViewController: UIViewController {

    var view1:UILabel!
    var view2:UILabel!
    var view3:UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()


        initViews();
        initLayouts();
    }

    func initViews() {

        view.backgroundColor = UIColor.white


        view1 = createLabel(title: "view1")
        view2 = createLabel(title: "view2")
        view3 = createLabel(title: "view3")

        view.addSubview(view1)
        view.addSubview(view2)
        view.addSubview(view3)
    }

    func initLayouts() {
        for view in view.subviews {
            view.translatesAutoresizingMaskIntoConstraints = false
        }


        var views = [String: AnyObject]()
        views["view1"] = view1
        views["view2"] = view2
        views["view3"] = view3

        // ---------------------------------------------------------
        // Setup horizontal constraints for all three views
        // ---------------------------------------------------------
        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[view1]-20-|",
                                                           options: NSLayoutFormatOptions(rawValue: 0),
                                                           metrics: nil,
                                                           views: views))

        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[view2(==view1)]-20-|",
                                                           options: NSLayoutFormatOptions(rawValue: 0),
                                                           metrics: nil,
                                                           views: views))

        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[view3]-20-|",
                                                           options: NSLayoutFormatOptions(rawValue: 0),
                                                           metrics: nil,
                                                           views: views))

        // special layout condition to make third view half the width of other views
        view.addConstraint(NSLayoutConstraint(item: view3,
                                              attribute: NSLayoutAttribute.width,
                                              relatedBy: NSLayoutRelation.equal,
                                              toItem: view1,
                                              attribute: NSLayoutAttribute.width,
                                              multiplier: 0.5,
                                              constant: 0.0))




        // ---------------------------------------------------------
        // Setup vertical constraints for all three views
        // ---------------------------------------------------------
        view.addConstraints(
            NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[view1]-20-[view2]-20-[view3]",
                                           options: NSLayoutFormatOptions(rawValue: 0),
                                           metrics: nil,
                                           views: views))

        // make all three views equal height
        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[view1(44)]",
                                                           options: NSLayoutFormatOptions(rawValue: 0),
                                                           metrics: nil,
                                                           views: views))

        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[view2(==view1)]",
                                                           options: NSLayoutFormatOptions(rawValue: 0),
                                                           metrics: nil,
                                                           views: views))

        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[view3(==view1)]",
                                                           options: NSLayoutFormatOptions(rawValue: 0),
                                                           metrics: nil,
                                                           views: views))
    }

    // ------------------------------------------------
    // Helper function
    // ------------------------------------------------
    func createLabel(title:String) -> UILabel {
        let textLabel = UILabel()
        textLabel.text = title
        textLabel.backgroundColor = UIColor.red
        textLabel.textColor = UIColor.black
        textLabel.textAlignment = NSTextAlignment.center
        textLabel.layer.borderColor = UIColor.black.cgColor
        textLabel.layer.borderWidth = 2.0

        return textLabel
    }
}

你应该看到这样的东西：

Answer 2

这是一个 TextFields 的例子。

import UIKit
import Material

class ViewController: UIViewController {
    fileprivate var emailField: ErrorTextField!
    fileprivate var passwordField: TextField!

    /// A constant to layout the textFields.
    fileprivate let constant: CGFloat = 32

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = Color.grey.lighten5

        preparePasswordField()
        prepareEmailField()
        prepareResignResponderButton()
    }

    /// Prepares the resign responder button.
    fileprivate func prepareResignResponderButton() {
        let btn = RaisedButton(title: "Resign", titleColor: Color.blue.base)
        btn.addTarget(self, action: #selector(handleResignResponderButton(button:)), for: .touchUpInside)

        view.layout(btn).width(100).height(constant).centerVertically(offset: emailField.height / 2 + 60).right(20)
    }

    /// Handle the resign responder button.
    @objc
    internal func handleResignResponderButton(button: UIButton) {
        emailField?.resignFirstResponder()
        passwordField?.resignFirstResponder()
    }
}

extension ViewController {
    fileprivate func prepareEmailField() {
        emailField = ErrorTextField()
        emailField.placeholder = "Email"
        emailField.detail = "Error, incorrect email"
        emailField.isClearIconButtonEnabled = true
        emailField.delegate = self

        view.layout(emailField).center(offsetY: -passwordField.height - 60).left(20).right(20)

    }

    fileprivate func preparePasswordField() {
        passwordField = TextField()
        passwordField.placeholder = "Password"
        passwordField.detail = "At least 8 characters"
        passwordField.clearButtonMode = .whileEditing
        passwordField.isVisibilityIconButtonEnabled = true

        // Setting the visibilityIconButton color.
        passwordField.visibilityIconButton?.tintColor = Color.green.base.withAlphaComponent(passwordField.isSecureTextEntry ? 0.38 : 0.54)

        view.layout(passwordField).center().left(20).right(20)
    }
}


extension UIViewController: TextFieldDelegate {
    public func textFieldDidEndEditing(_ textField: UITextField) {
        (textField as? ErrorTextField)?.isErrorRevealed = false
    }

    public func textFieldShouldClear(_ textField: UITextField) -> Bool {
        (textField as? ErrorTextField)?.isErrorRevealed = false
        return true
    }

    public func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        (textField as? ErrorTextField)?.isErrorRevealed = false
        return true
    }
}

视图以彼此下方的 parent 为中心

Views centered in parent below each other

swift

swift3

ios-autolayout

cosmicmind