UIStackViewの中に複数のカスタムviewを生成したい

Question

実現したいこと

もう少し詳しく言うと、
「スクロールviewの中のStackView内にカスタムviewをコードで生成し、ボタンを押すことでさらにそのカスタムviewを生成する(ボタンを押すことでStackView内にカスタムviewが増えていく)」

これを実現したいです。

現状

・storyboard
・ViewController.swift
・custumViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var stackView: UIStackView!
    @IBOutlet weak var button: UIButton!
    
    var custumView = custumViewController()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        custumView.heightAnchor.constraint(equalToConstant: 300).isActive = true
        custumView.translatesAutoresizingMaskIntoConstraints = false

        //スタックviewの任意の位置にビューを追加
        stackView.insertArrangedSubview(custumView, at: 2)
        //0と1が指定できないのはなぜ
    }

    @IBAction func buttonAction(_ sender: Any) {
        
        custumView.heightAnchor.constraint(equalToConstant: 300).isActive = true
        custumView.translatesAutoresizingMaskIntoConstraints = false

        //スタックviewの任意の位置にビューを追加
        stackView.insertArrangedSubview(custumView, at: 3)
        
    }
    
}

class custumViewController: UIView {

    //コードから生成したときに通る初期化処理
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }
    
    //InterfaceBulderで配置した場合に通る初期化処理
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.commonInit()
    }
    
    fileprivate func commonInit() {
        //MyCustomView.xibファイルからViewを生成する。
        //File's OwnerはMyCustomViewなのでselfとする。
        guard let view = UINib(nibName: "fukusuuCustumView", bundle: nil).instantiate(withOwner: self, options: nil).first as? UIView else {
            return
        }
        
        //ここでちゃんとあわせておかないと、配置したUIButtonがタッチイベントを拾えなかったりする。
        view.frame = self.bounds
        
        //伸縮するように
        view.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        
        //addする。viewオブジェクトの2枚重ねになる。
        self.addSubview(view)
    }
}

簡易的なサンプルを用意しました。

【storyboard】
viewの中にスクロールview、その中にstackviewを置いています。stackviewの中には紫色、水色、黄色のviewを3つ置いています。ピンク色のボタンは、押すたびにカスタムviewを増やす用のボタンです。

【ViewController.swift】
viewDidLoad内で、カスタムviewを生成しています。
ビルドするとこのように緑色のカスタムVeiwがスタックviewの上から3番目に出現します(custumView, at: 2)。

しかしボタンを押すと、下の画像のように、コードで生成したスタックviewが消え、スタックviewの上から4番目にカスタムviewが生成されます。

最終的な質問

**私はボタンからカスタムviewを生成した時に、コードで生成したカスタムviewを消さず残しておきたいです。（ボタンを押した回数分カスタムviewを増やしたい）
**
これを実現するにはどうしたら良いでしょうか？

また、

//スタックviewの任意の位置にビューを追加
        stackView.insertArrangedSubview(custumView, at: 2)

**スタックviewの0番目や1番目に追加しようとしても追加されませんでした。これは何故でしょうか？
**

**お手数ではございますが分かる方、ご回答よろしくお願いいたします。
**

Comments

[退会済みユーザー]

要件わからんし、好き嫌いもあると思いますので個人的な意見ですが、tableViewでやろうとか思いませんか？
私がscrollView嫌いなだけかもしれませんが。

Answer 1

ScrollViewは使わずに、StackView と View だけのごく簡単なコードで試した結果ですが、
（追記: 念のため後半に ScrollView を使った検証結果も追記しました）

スタックviewの0番目や1番目に追加しようとしても追加されませんでした。これは何故でしょうか？

ScrollView は使っていないので何とも言えませんが、私が試した感じだと任意の場所に追加することができました。

私はボタンからカスタムviewを生成した時に、コードで生成したカスタムviewを消さず残しておきたいです。（ボタンを押した回数分カスタムviewを増やしたい）

CustumViewController のインスタンスを使いまわしていることが原因ではないでしょうか。

つまり、

    @IBAction func buttonAction(_ sender: Any) {

        //スタックviewの任意の位置にビューを追加
        stackView.insertArrangedSubview(custumView, at: 3)

    }

ではなく、

    @IBAction func buttonAction(_ sender: Any) {
        // 新しくインスタンスを作る
        let custumView2 = custumViewController()
        //スタックviewの任意の位置にビューを追加
        stackView.insertArrangedSubview(custumView2, at: 3)

    }

上記のように、ボタンを押すたびに新しいインスタンスを作成し、それを追加するようにすれば、ボタンを押すたびに指定した場所に追加することができました。

以下検証用のコード

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var stackView: UIStackView!
    @IBOutlet weak var button: UIButton!
    
    var customView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        customView.heightAnchor.constraint(equalToConstant: 300).isActive = true
        customView.translatesAutoresizingMaskIntoConstraints = false
        
        //スタックviewの任意の位置にビューを追加
        stackView.insertArrangedSubview(customView, at: 2)
    }
    
    @IBAction func buttonAction(_ sender: Any) {
        let customView2 = UIView()
        
        customView2.backgroundColor = .brown
                
        //スタックviewの任意の位置にビューを追加
        stackView.insertArrangedSubview(customView2, at: 3)
        // デバッグ用
        dump(stackView.arrangedSubviews)
    }
    
}

---

追記

念のため、ScrollView を使って検証してみましたが、やはり任意の場所に view を追加することは可能です。

質問者さんの制約のかけ方を確認しないまま検証したのですが、一応下記の通りとなっています（詳しい制約はスクリーンショットをご確認ください）。ScrollView の Distribution は Full Equally に設定したため、上記のコードにある

        customView.heightAnchor.constraint(equalToConstant: 300).isActive = true
        customView.translatesAutoresizingMaskIntoConstraints = false

を使って動的に高さを設定すると、制約の矛盾が生じ実行時に警告が出ますので、実際は削除して実行しています。

ちなみに、ScrollView の制約については、下記の記事を参考にしてあります。

• Xcode11のIBに追加されたContentLayoutGuideとFrameLayoutGuideについて

Comments

[dddd12233]

ご回答感謝いたします。
インスタンスを新しく作ることで解決いたしました!!!

本当にありがとうございまし!!!