ios - 创建一个内部有 2 个 UiView 的水平 Stackview

Question

我想要的:

我想以水平方式并排放置 2 个 Views。为此，我正在以编程方式创建 UIStackView。看下面的片段

我做了什么:

let mStackView = UIStackView()
mStackView.axis  = UILayoutConstraintAxis.horizontal
mStackView.distribution  = UIStackViewDistribution.fillEqually
mStackView.alignment = UIStackViewAlignment.center
mStackView.spacing = 10

现在我想在其中放置 2 个 UIView。每个 UIView 都会使 UIImage 和 UILabel 居中对齐。为此，我在每个 UIView

中使用了另一个 UIStackView

看看这个片段。

let mDonationView = UIView()
mDonationView.backgroundColor = UIColor.green

let SV = UIStackView()
SV.axis  = UILayoutConstraintAxis.vertical
SV.distribution  = UIStackViewDistribution.fill
SV.alignment = UIStackViewAlignment.leading
SV.spacing = 1
SV.alignment = .top

let imageName = "Donate"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)

let lbl = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 21))
lbl.text = "Donate"
lbl.textColor = UIColor(hex:AppColor.colorTextPrimary)
lbl.font = lbl.font.withSize(14)

SV.addArrangedSubview(imageView)
SV.addArrangedSubview(lbl)
SV.translatesAutoresizingMaskIntoConstraints = false

mDonationView.addSubview(SV)

最后，我将其添加回主 UIStackView，即第一个代码片段中的 mStackView。见下文:

mStackView.addArrangedSubview(mDonationView)

类似地，我正在创建另一个 View 并以上面显示的方式添加。

问题:

1. 我的问题是我可以并排看到 2 个 View ，但是因为 UIImageView 和 UILabel 在左侧对齐，我希望水平居中，垂直居中UIView.
2. 两个 UIView 的 width 必须相等
3. UIView 没有使用colors 我已经给每个 UIView
赋予了绿色

Answer 1

几个笔记...

首先，您最好使用自动布局和约束(而不是显式框架)，尤其是堆栈 View 。

其次，UIStackView 属性可能与您的想法略有不同...

对于水平堆栈 View ，

• alignment 控制排列的 subview 的垂直对齐方式
• distribution 控制 subview 如何水平地
填充堆栈 View

对于垂直堆栈 View ，

• alignment 控制排列的 subview 的水平对齐方式
• distribution 控制 subview 如何垂直
填充堆栈 View

我假设这就是您想要的:

这是用于创建它的代码(很多评论，应该让你上路):

class SampleViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let mStackView = UIStackView()

        // horizontal stack view
        mStackView.axis  = .horizontal

        // distribution  = fillEqually ... means make each arranged subview equal width
        mStackView.distribution  = .fillEqually

        // alignment = center ... means center the arranged subviews vertically
        mStackView.alignment = .center

        // spacing = 10 ... horizontal gap between arranged subviews
        mStackView.spacing = 10

        // create the left-side "Donate" view
        let donateView = createMyView("Donate", bgColor: UIColor.green, txtColor: UIColor.black)

        // create the right-side "Receive" view
        let receiveView = createMyView("Receive", bgColor: UIColor.yellow, txtColor: UIColor.blue)

        mStackView.addArrangedSubview(donateView)
        mStackView.addArrangedSubview(receiveView)

        // using auto-layout
        mStackView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(mStackView)

        // setup constraints for mStackView
        // we'll make it the width of the view, and centered vertically
        // allow the height of the donate and receive views to determine the height of the stack view, so
        //      no bottom or height constraint
        NSLayoutConstraint.activate([

            mStackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0.0),
            mStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0.0),
            mStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0),

            ])


    }

    func createMyView(_ imageName: String, bgColor: UIColor, txtColor: UIColor) -> UIView {

        let myView = UIView()
        myView.backgroundColor = bgColor

        let vStackView = UIStackView()

        // vertical stack view
        vStackView.axis  = .vertical

        // alignment = center ... means the arranged subviews will be centered horizontally
        vStackView.alignment = .center

        // distribution = fill ... means the arranged subviews will fill the height of the stack view
        vStackView.distribution  = .fill

        // spacing = 1 ... vertical gap between arranged subviews
        vStackView.spacing = 1

        let vImageName = imageName

        let vImageView = UIImageView()

        if let vImage = UIImage(named: vImageName) {
            vImageView.image = vImage
        }

        let vLabel = UILabel()

        vLabel.text = imageName
        vLabel.textColor = txtColor
        vLabel.textAlignment = .center
        vLabel.font = vLabel.font.withSize(14)
        vLabel.backgroundColor = UIColor(white: 0.9, alpha: 1.0)

        // add the stack view to myView
        myView.addSubview(vStackView)

        // add the image view and label as arranged subviews of the stack view
        vStackView.addArrangedSubview(vImageView)
        vStackView.addArrangedSubview(vLabel)

        // we're going to use auto-layout
        myView.translatesAutoresizingMaskIntoConstraints = false
        vStackView.translatesAutoresizingMaskIntoConstraints = false
        vImageView.translatesAutoresizingMaskIntoConstraints = false
        vLabel.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([

            // add width and height constraints for the image view
            vImageView.widthAnchor.constraint(equalToConstant: 100.0),
            vImageView.heightAnchor.constraint(equalToConstant: 200.0),

            // constrain the stack view to all four side of myView
            vStackView.topAnchor.constraint(equalTo: myView.topAnchor, constant: 0.0),
            vStackView.bottomAnchor.constraint(equalTo: myView.bottomAnchor, constant: 0.0),
            vStackView.leadingAnchor.constraint(equalTo: myView.leadingAnchor, constant: 0.0),
            vStackView.trailingAnchor.constraint(equalTo: myView.trailingAnchor, constant: 0.0),

            ])

        return myView

    }

}