Создайте горизонтальный Stackview с 2 UiView внутри

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.Для этого я использую еще один UIStackView в каждом UIView

. Посмотрите на этот фрагмент.

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)

аналогичным образом я создаю другое представление и добавляю в показанный выше способ.

Проблема:

1. Моя проблема в том, что я вижу 2 вида рядом, но в том, что UIImageView и UILabel выровнены по левому краюгде я хотел быть в центре по горизонтали и вертикали внутри UIView.
2. Оба UIView должны быть равны в width
3. UIView не принимают colors, которые я далзеленый каждому UIView

Answer 1

Пара примечаний ...

Во-первых, вам будет лучше использовать автоматическое расположение и ограничения (в отличие от явных кадров), особенно с представлениями стека.

Во-вторых, *Свойства 1005 *, вероятно, немного отличаются от того, что вы думаете ...

Для горизонтального стекового вида

• alignment управляет по вертикали выравнивание упорядоченных подпредставлений
• distribution контролирует, как подпредставления заполняют представление стека по горизонтали

Для стека по вертикали

• alignment управляет выравниванием по горизонтали упорядоченных подпредставлений
• distribution контролирует, как подпредставления заполняют представление стека по вертикали

Я предполагаю, что это то, что вы собираетесьдля:

Вот код, использованный для его создания (множество комментариев, должен тебя на тебянаш путь):

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

    }

}