时间戳

首页 > 解决方案 > Constraints for two UIStackView - one under the other

ios - Constraints for two UIStackView - one under the other

问题描述

I working on "Hangman" app. On the top I want image, in middle textfield, and bottom couple UIStackView row for letters. Now I try to add constraints for only two UIStackView one under the other, but one is always behind other ie. not see.

This is image where you can se only second stack view (named: stacklView2), and the first i cant see. Why? What I doing wrong?

enter image description here

And this is code:

import UIKit

class ViewController: UIViewController {

    var imageView: UIImageView!
    var answerTextfield: UITextField!

    override func loadView() {
        view = UIView()
        view.backgroundColor = .white

        imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFit
        imageView.layer.borderWidth = 1
        view.addSubview(imageView)

        answerTextfield = UITextField()
        answerTextfield.translatesAutoresizingMaskIntoConstraints = false
        answerTextfield.textAlignment = .center
        answerTextfield.isUserInteractionEnabled = false
        answerTextfield.layer.borderWidth = 1
        view.addSubview(answerTextfield)

        let button1 = UIButton()
        button1.backgroundColor = .red

        let button2 = UIButton()
        button2.backgroundColor = .blue

        let stackView1 = UIStackView(arrangedSubviews: [button1, button2])
        stackView1.translatesAutoresizingMaskIntoConstraints = false
        stackView1.distribution = .fillEqually
        stackView1.axis = .horizontal
        view.addSubview(stackView1)    

        let stackView2 = UIStackView(arrangedSubviews: [button2, button1])
        stackView2.translatesAutoresizingMaskIntoConstraints = false
        stackView2.distribution = .fillEqually
        stackView2.axis = .horizontal
        view.addSubview(stackView2)

        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor, constant: 5),
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            answerTextfield.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 20),
            answerTextfield.widthAnchor.constraint(equalTo: view.layoutMarginsGuide.widthAnchor, multiplier: 0.5),
            answerTextfield.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            stackView1.topAnchor.constraint(equalTo: answerTextfield.bottomAnchor, constant: 20),
            stackView1.widthAnchor.constraint(equalTo: view.layoutMarginsGuide.widthAnchor, multiplier: 1.0),
            stackView1.centerXAnchor.constraint(equalTo: view.layoutMarginsGuide.centerXAnchor),
            //stackView1.bottomAnchor.constraint(equalTo: stackView2.layoutMarginsGuide.topAnchor, constant: -5),

            stackView2.topAnchor.constraint(equalTo: stackView1.bottomAnchor, constant: 20),
            stackView2.widthAnchor.constraint(equalTo: view.layoutMarginsGuide.widthAnchor, multiplier: 1.0),
            stackView2.centerXAnchor.constraint(equalTo: view.layoutMarginsGuide.centerXAnchor),
            stackView2.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor, constant: -5),
        ])

    }

    override func viewDidLoad() {
        super.viewDidLoad()
        imageView.image = UIImage(named: "Hangman-0")
        answerTextfield.text = "T E X T F I E L D"
        setupNavigationBar()
    }

    func setupNavigationBar() {
        let hintButton = UIButton(type: .infoLight)
        hintButton.addTarget(self, action: #selector(hintTapped), for: .touchUpInside)
        navigationItem.leftBarButtonItem = UIBarButtonItem(customView: hintButton)

        navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(newGameTapped))
    }

    @objc func hintTapped() {
        print("Hint button tapped!")
    }

    @objc func newGameTapped() {
        print("New Game button tapped!")
    }

}

标签： iosswiftuistackview

解决方案

您在两个堆栈中button1使用相同的对象button2

let stackView1 = UIStackView(arrangedSubviews: [button1, button2]) 
let stackView2 = UIStackView(arrangedSubviews: [button2, button1])

所以它被添加到stackView2只需要创建 2 个其他不同的元素，因为单个元素只能添加到 1 个视图

推荐阅读