UIViewのサイズを中身に応じて変更したい。

Question

UIViewの中にUIViewがいくつか入っているプログラムを組みました。

内側のUIViewはそれぞれ高さが異なり、ボタンを押すと1つだけ表示され、他のUIViewは非表示、高さ0になる様に設定しています。

そこで、外側のUIViewの高さを表示しているUIViewに合わせて自動で変えるプログラムを作りたいのですが、どの様にすれば良いのでしょうか。

添付画像で説明させて頂きますと、緑のViewの中に赤と黄色と青のUIViewが入っていて、下のボタンを押すと、それぞれの色のViewだけ表示する様なものになっています。（外側の緑のUIViewとLabelは残したまま）
redを押したら赤のUIViewだけ表示されて、緑のUIViewが表示しているUIView（この場合赤）に合わせて高さが変わる様にしたいです。（画像だと下側に緑が少しはみ出ていますが、緑のUIViewの中に3つ他のUIViewが入っていると分かりやすくするためで、実際は青のUIViewの下側と緑のUIViewの下側は一致しています。）

全ての制約と内部のUIViewの高さは分かっているので、緑のUIViewの高さを計算で出すことは可能だと思うのですが、何か他に良い方法はあるのでしょうか。

sizeToFitも試したのですが上手く適用されませんでした。またstoryboard上で中のViewの下部に合わせて制約をつける（外側のUIViewの下部を中のUIViewの下部に合わせて制約をつける）という情報もあったのですが、そもそも外側のUIViewの制約をつけるときに中のUIViewが被制約側の選択肢として出てきませんでした。

文章ばかりで恐縮ですが、ご回答頂ければ幸いです。
よろしくお願いいたします。

追記：

Comments

[退会済みユーザー]

2色同時・3色同時表示は必要でしょうか？それとも常に1色だけ表示でしょうか？

[dounatsu]

分かりづらくて申し訳ありません。Story board上三色表示にしていますが、実際は常に赤、黄色、青いずれかが一色だけ表示されており、ボタンを押す度にその色のViewだけが表示される様にしたいです。

[dounatsu]

赤、黄色、青はそれぞれ高さが異なるViewなので、その表示しているViewに合わせて、外側の緑のViewの高さを変えたいです。

[退会済みユーザー]

赤・黄・青の表示切り替えはできていて、緑のviewのボトムだけ操作すればやりたいことが実現できますか？

[dounatsu]

表示切り替えはすでにできているので、緑のボトムだけ中のコンテンツに合わせられれば大丈夫です。

[fuzzball]

選択したViewの高さ変更は制約の値を変更しているのでしょうか？（各Viewの高さ情報をコード側に持っているのか？という質問意図です）

[dounatsu]

全て高さ情報を取得していて、ボタンを押すと押されていないViewをisHiddenで非表示にし、かつHeightを0にしています。

Answer 1

中身のViewを表示したり非表示にしたりして、大外のViewの大きさをいい感じに動的にフィットさせるには、UIStackViewを使うのが非常に簡単だと思います。
必要であればアニメーションも非常に容易です。

但しUIStackView自体には背景やそれ自身を描画する機能はありませんので、今回のケースですと緑のViewをStackViewの大外に設定するか、あるいはその他のViewと同じように一番上に表示されるようにすれば良いでしょう。

制御は

 @IBAction func showRed(_ sender: Any) {
        redView.isHidden = false
        yellowView.isHidden = true
        blueView.isHidden = true
    }
    
    @IBAction func showYellow(_ sender: Any) {
        redView.isHidden = true
        yellowView.isHidden = false
        blueView.isHidden = true
    }
    
    @IBAction func showBlue(_ sender: Any) {
        redView.isHidden = true
        yellowView.isHidden = true
        blueView.isHidden = false
    }
    
    @IBOutlet weak var redView: UIView!
    @IBOutlet weak var yellowView: UIView!
    @IBOutlet weak var blueView: UIView!

こんな感じです。

Comments

[dounatsu]

ご回答ありがとうございます。
StackViewの発想はなかったです。
ありがとうございました。

Answer 2

アウトレット

//内側View
@IBOutlet weak var viewRed: UIView!
@IBOutlet weak var viewYellow: UIView!
@IBOutlet weak var viewBlue: UIView!
//内側Viewのbottom
@IBOutlet weak var bottomRed: NSLayoutConstraint!
@IBOutlet weak var bottomBlue: NSLayoutConstraint!
@IBOutlet weak var bottomYellow: NSLayoutConstraint!

制約

• 内側Viewのbottomを外側Viewのbottomに合わせる。（エラーになるので、一つだけ有効にして他はinstalledのチェックを外しておく）
• その他の制約は適当に。

選択時

• 選んだ内側Viewを表示し、bottom制約を有効にする。
• それ以外の内側Viewを非表示のし、bottom制約を無効にする。

@IBAction func selectedRed(_ sender: UIButton) {
    //red
    viewRed.isHidden = false
    bottomRed.isActive = true
    //yellow
    viewYellow.isHidden = true
    bottomYellow.isActive = false
    //blue
    viewBlue.isHidden = true
    bottomBlue.isActive = false
}

とりあえずベタ書きで‥。

Comments

[fuzzball]

外側Viewって何のために存在しているのでしょうかｗ

[dounatsu]

ご回答ありがとうございます。
やはりViewの高さを計算して出さないといけなさそうですね。sizeToFitというメソッドがあったので何かしら自動で計算する方法があるのかと思っていました。
元々Scroll Viewの中のUIViewの中に色々な要素を詰め込んでいたので、今回外側のViewといった形で質問させていただきました。

[fuzzball]

>>やはりViewの高さを計算して出さないといけなさそうですね
？？？どういう意味？
「内部のUIViewの高さは分かっている」のではないのですか？

[dounatsu]

言葉足らずですみません。今回の例で言うと緑のUIViewの中にボタンやラベルやら色々入っていて、それらの高さや制約は一応わかるので、全て合計すれば高さは分かるのですが、単純にもっと良い方法がないか質問させて頂いた次第です。

[fuzzball]

ごめん、全然分からんｗ
もしまだやる気があるなら、各色を選択した時のスクショを追加して下さい。

[dounatsu]

画像追加しました。左側がredを押した時の状態、右側がyellowを押した時の状態です。赤と黄色のViewは緑のViewの中に入っています。

[fuzzball]

赤黄青を緑の中に入れている理由は何でしょうか？
緑の下ではいけないのでしょうか？

[dounatsu]

先にも記入しましたが、元々Scroll Viewの中に大きいUIView（今回の例で緑の部分）を入れてその中に要素を色々詰め込んだ（今回の例でいうとsampleのラベルや赤や青のVIew）のが理由です。緑の部分を取っ払ってScroll Viewに直接並べられるのであれば良いのですが、調べた方法だとScroll Viewの中に大きなUIViewを入れていたので、それに倣ってプログラムを組みました。

[fuzzball]

赤黄青の部分も、下の緑が見えないといけない（赤黄青は横幅一杯ではない）ということでいいでしょうか？

[dounatsu]

赤、黄、青は横幅いっぱいで緑に合わせています。

[fuzzball]

回答を修正してみました。

[dounatsu]

ありがとうございました。

[fuzzball]

やりたいことと違ってましたか？

[dounatsu]

多分できると思うのですが、今ちょっと頭がごっちゃになってて、自分のに適用するには時間がかかりそうなので、落ち着いた時にもう一回試してみます。ありがとうございます。

Answer 3

GreenViewしかいじっていないので手抜きですが。

width0のダミーUIViewを設置して、そのBottomにGreenViewのBottomを合わせる方法を
ご自身で作られたものと組み合わせてみてはどうでしょうか？

github → https://github.com/tyobigoro/showUIView

識者の方に問題点など指摘していだだけたりすると嬉しいです。

import UIKit

class ViewController: UIViewController {

    // Bottom制約のOutlet接続
　　 // greenBottom = redBottom
    @IBOutlet weak var RedBottom: NSLayoutConstraint!
    // greenBottom = yellowBottom
    @IBOutlet weak var YellowBottom: NSLayoutConstraint!
    // greenBottom = blueBottom
    @IBOutlet weak var blueBottom: NSLayoutConstraint!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
   
    override func viewDidLayoutSubviews () {
        super.viewDidLayoutSubviews ()
        // 制約の初期設定
        NSLayoutConstraint.deactivate([blueBottom])
        NSLayoutConstraint.deactivate([YellowBottom])
        NSLayoutConstraint.activate([RedBottom])
        self.view.layoutIfNeeded()
      }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func redBottom(_ sender: UIButton) {
        // 制約の切り替え
        NSLayoutConstraint.deactivate([blueBottom])
        NSLayoutConstraint.deactivate([YellowBottom])
        NSLayoutConstraint.activate([RedBottom])
        // アニメーション効果
        UIView.animate(withDuration: 0.5, animations: { self.view.layoutIfNeeded() }, completion: nil)
    }

    @IBAction func yellowBottom(_ sender: UIButton) {
        // 制約の切り替え
        NSLayoutConstraint.deactivate([blueBottom])
        NSLayoutConstraint.deactivate([RedBottom])
        NSLayoutConstraint.activate([YellowBottom])
        // アニメーション効果
        UIView.animate(withDuration: 0.5, animations: { self.view.layoutIfNeeded() }, completion: nil)
    }
    
    @IBAction func blueBottom(_ sender: UIButton) {
        // 制約の切り替え
        NSLayoutConstraint.deactivate([RedBottom])
        NSLayoutConstraint.deactivate([YellowBottom])
        NSLayoutConstraint.activate([blueBottom])
        // アニメーション効果
        UIView.animate(withDuration: 0.5, animations: { self.view.layoutIfNeeded() }, completion: nil)
    }
 
}

Comments

[dounatsu]

ご回答ありがとうございます。
このやり方だと、緑のUIViewの高さをダミーのUIViewに合わせているので、緑のUIViewの中のコンテンツに応じて緑の高さを変えようとすると、いずれにせよ緑のUIViewのコンテンツの高さや制約を計算してダミーのViewの高さを出さないといけないということにならないでしょうか？

[dounatsu]

度々申し訳ありません。少し考えたのですが、緑のVIewの一番下のコンテンツのBottomとダミーのBottomを合わせて高さを取得すれば、何とかやりたいことは達成できそうです。他に何か良い方法があればご教示頂ければ幸いです。

[退会済みユーザー]

中身を計算してダミーの高さを設定して、緑のボトムをそれに合わせるのかと。
緑のボトム = 赤・黄・青のトップじゃダメ？とおもってみたり(重なってる部分見えないし。)
赤・黄・青の高さは固定ですか？それとも中身があってその内容に応じてつど高さがかわりますか？

赤・黄・青は

[退会済みユーザー]

自分はダミー置きますが、SafeAreaHeightに対するrateだけでもよいのではないかとも思います。

[dounatsu]

赤、黄、青の高さは固定ですが、実際は緑のViewの中に色々たくさん入っているので、今回はダミーを置いてちょっと試してみます。ありがとうございました。