Hrvoje
Hrvoje

Reputation: 734

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!")
    }

}

Upvotes: 2

Views: 62

Answers (1)

Shehata Gamal
Shehata Gamal

Reputation: 100549

You use same objects button1 and button2 in both stacks

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

so it's added to stackView2 only you need to create 2 other different ones as a single element can be added to only 1 view

Upvotes: 1

Related Questions