Question

现在尝试通过简单的登录视图示例了解ios中的UIStackView，但是从变形输出中感到困惑。以下是我的详细信息：

我的登录视图文件：

import UIKit
import SnapKit

class LoginView: UIView {

    let loginStackView = UIStackView();

    let emailStackView = UIStackView()
    let emailImageView = UIImageView()
    let emailTextView = UITextView();

    let passStackView = UIStackView()
    let passImageView = UIImageView()
    let passTextView = UITextView();

    let loginButton = UIButton();
    let loginButton2 = UIButton();

    override init(frame: CGRect) {
        super.init(frame: frame)
        loadUI();
    }

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

    private func loadUI(){

        self.addSubview(loginStackView);

        emailStackView.axis = .horizontal
        emailStackView.distribution = .equalSpacing
        emailStackView.translatesAutoresizingMaskIntoConstraints = false
        emailStackView.addArrangedSubview(emailImageView);
        emailStackView.addArrangedSubview(emailTextView);

        passStackView.axis = .horizontal
        passStackView.distribution = .equalSpacing
        passStackView.translatesAutoresizingMaskIntoConstraints = false
        passStackView.addArrangedSubview(passImageView);
        passStackView.addArrangedSubview(passTextView);

        loginStackView.axis = .vertical
        loginStackView.distribution = .fill
        loginStackView.alignment = .fill
        loginStackView.spacing = 10
        loginStackView.translatesAutoresizingMaskIntoConstraints = false
        loginStackView.addArrangedSubview(emailStackView);
        loginStackView.addArrangedSubview(loginButton);
        loginStackView.addArrangedSubview(passStackView);
        loginStackView.addArrangedSubview(loginButton2);
        loginStackView.snp.makeConstraints{(make) -> Void in
            make.center.equalToSuperview();
        }

        emailImageView.image = UIImage(named: "sample");
        emailImageView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(50)
        }

        emailTextView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(200)
        }


        passImageView.image = UIImage(named: "sample2");
        passImageView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(50)
        }


        passTextView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(200)
        }

        loginButton.setTitle("Login", for: .normal);
        loginButton.snp.makeConstraints{ (make) in
            make.height.equalTo(50)
            make.width.equalTo(250)
        }

        loginButton2.setTitle("Login2", for: .normal);
        loginButton2.snp.makeConstraints{ (make) in
            make.height.equalTo(50)
            make.width.equalTo(250)
        }


    }

}

然后我在登录视图控制器中使用了这个类：

let superview = self.view;

let loginView = LoginView();
superview?.addSubview(loginView);
superview?.backgroundColor = UIColor.lightGray;
loginView.backgroundColor = UIColor.red;

loginView.snp.makeConstraints{(make) -> Void in
make.height.equalTo(superview!);
make.width.equalTo(superview!);
}

对于上面的代码，我的输出是这样的：

我的疑问：

为什么passStackView之前的视图没有显示？
为什么loginView没有全屏显示（限制在loginStackView上，假设将loginStackView放入 loginView的中间）

只有使用单个堆栈一切正常时，才会发生嵌套堆栈视图。请告诉我这里缺少的东西。

这就是我所期待的：

Answer 1

你真的只错过了两个设置：

    loginView.snp.makeConstraints{(make) -> Void in
        make.height.equalTo(superview!);
        make.width.equalTo(superview!);

        // you also need to set position,
        // this will center the view
        make.centerX.equalTo(superview!);
        make.centerY.equalTo(superview!);
    }

请注意，您还有一个“内置”superview方法，因此可以这样写：

    loginView.snp.makeConstraints{(make) -> Void in
        make.width.equalToSuperview()
        make.height.equalToSuperview()
        make.centerX.equalToSuperview()
        make.centerY.equalToSuperview()
    }

对你强烈推荐...我知道很多人为了方便使用SnapKit，你可能会发现学习的自动布局和约束工作。当你遇到这样的情况时，了解它的基础知识会有很大的帮助。

无论如何，它的价值。

Swift嵌套堆栈视图

1 个答案: