stackViewで横並びと縦並びの入れ子をコードで書きたい

Question

stackViewで横並びと縦並びの入れ子をコードで書きたいのですが
入れ子の書き方が分からず、教えてください。

配置の構成イメージとしては以下のようにしたいです

今段階では、横並びのスタックビューはかけています。

       // StackView を作る
        let stack:UIStackView = UIStackView()
        stack.backgroundColor = UIColor.purple
        view.addSubview(stack)
        stack.translatesAutoresizingMaskIntoConstraints = false                        // オートレイアウトオフ
        stack.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true    // 横方向の中心は、親ビューの横方向の中心と同じ
        stack.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true    // 縦方向の中心は、親ビューの縦方向の中心と同じ
        
        // 画面の大きさを取得
        let screenWidth = Int( UIScreen.main.bounds.size.width);
        let screenHeight = Int(UIScreen.main.bounds.size.height);
        
        // 上のラベル
        let myView = UIView()
        myView.backgroundColor = UIColor.gray
        myView.translatesAutoresizingMaskIntoConstraints = false
        myView.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true
        myView.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        let myView2 = UIView()
        myView2.backgroundColor = UIColor.purple
        myView2.translatesAutoresizingMaskIntoConstraints = false
        myView2.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true
        myView2.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        let myView3 = UIView()
        myView3.backgroundColor = UIColor.red
        myView3.translatesAutoresizingMaskIntoConstraints = false
        myView3.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true
        myView3.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        let myView4 = UIButton()
        myView4.backgroundColor = UIColor.green
        myView4.translatesAutoresizingMaskIntoConstraints = false
        myView4.widthAnchor.constraint(equalToConstant: CGFloat(screenWidth/4)).isActive = true
        myView4.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        // 画像
        let image:UIImage = UIImage(named:"menu")!
        let imageView = UIImageView(image:image)
        myView4.addSubview(imageView)            
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.centerXAnchor.constraint(equalTo: myView4.centerXAnchor).isActive = true
        imageView.centerYAnchor.constraint(equalTo: myView4.centerYAnchor).isActive = true
        imageView.contentMode = UIView.ContentMode.scaleAspectFit
                
        stack.addArrangedSubview(myView)
        stack.addArrangedSubview(myView2)
        stack.addArrangedSubview(myView3)
        stack.addArrangedSubview(myView4)

Comments

[hayabusabusash]

とりあえず以下は間違っています。
stack.translatesAutoresizingMaskIntoConstraints = false // オートレイアウトオフ

これはAutosizingのレイアウトの仕組みをAuto Layoutに変換するかどうかを設定するフラグなので
オートレイアウトはオフになりません。
( https://developer.apple.com/documentation/uikit/uiview/1622572-translatesautoresizingmaskintoco )

Answer 1

作ってみました。
大枠になるStackViewの高さとか幅は適当です。

        // 大枠のStackView
        let verticalStackView = UIStackView()
        verticalStackView.axis = .vertical
        verticalStackView.alignment = .fill
        verticalStackView.distribution = .fillEqually
        verticalStackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(verticalStackView)
        
        // Auto layout
        NSLayoutConstraint.activate([
            verticalStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0),
            verticalStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
            verticalStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0),
            verticalStackView.heightAnchor.constraint(equalToConstant: 220)
            ])
        
        let greenView = UIView()
        greenView.translatesAutoresizingMaskIntoConstraints = false
        greenView.backgroundColor = .green
        
        verticalStackView.addArrangedSubview(greenView)
        
        // 入れ子になるStackView
        let horizontalStackView = UIStackView()
        horizontalStackView.axis = .horizontal
        horizontalStackView.alignment = .fill
        horizontalStackView.distribution = .fillEqually
        horizontalStackView.translatesAutoresizingMaskIntoConstraints = false
        verticalStackView.addArrangedSubview(horizontalStackView)
        
        let orangeView = UIView()
        orangeView.translatesAutoresizingMaskIntoConstraints = false
        orangeView.backgroundColor = .orange
        
        horizontalStackView.addArrangedSubview(orangeView)
        
        let redView = UIView()
        redView.translatesAutoresizingMaskIntoConstraints = false
        redView.backgroundColor = .red
        
        horizontalStackView.addArrangedSubview(redView)
        
        let blueView = UIView()
        blueView.translatesAutoresizingMaskIntoConstraints = false
        blueView.backgroundColor = .blue
        
        horizontalStackView.addArrangedSubview(blueView)

Comments

[syosinsya_swift]

ありがとうございます！参考にさせていただきます

[hayabusabusash]

????