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

Posted 2023-02-27

【中文标题】创建一个内部有 2 个 UiView 的水平 Stackview

【英文标题】：Create a Horizontal Stackview with 2 UiView Inside

【发布时间】：2019-02-25 11:28:39

【问题描述】：

我想要什么：

我想以水平方式并排放置 2 个Views。为此，我以编程方式创建UIStackView。看下面sn -p

我做了什么：

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

看看这个sn-p。

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)

最后我在第一个代码 sn-p 中将其添加回主 UIStackView 即 mStackView。见下文：

mStackView.addArrangedSubview(mDonationView)

同样，我正在创建另一个视图并以上面显示的方式添加。

问题：

我的问题是我可以并排看到 2 个视图，但 UIImageView 和 UILabel 在左侧对齐，我想水平居中，垂直居中 UIView。 UIView 在width 中必须相等 UIView 不接受colors，我给每个UIView 赋予了绿色

【参考方案1】：

情侣笔记...

首先，最好使用自动布局和约束（相对于显式框架），尤其是堆栈视图。

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

对于水平堆栈视图，

alignment 控制排列的子视图的

垂直

对齐方式 distribution 控制子视图如何填充堆栈视图

水平

对于垂直堆栈视图，

alignment 控制排列的子视图的

水平

对齐方式 distribution 控制子视图如何

垂直地

填充堆栈视图

我假设这就是你想要的：

这是用于创建它的代码（很多 cmets，应该让您上路）：

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