質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,285

dounatsu

score 74

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が被制約側の選択肢として出てきませんでした。

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

追記:
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • dounatsu

    2018/03/29 06:05

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

    キャンセル

  • fuzzball

    2018/03/29 11:25 編集

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

    キャンセル

  • dounatsu

    2018/03/29 14:11

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

    キャンセル

回答 2

+2

中身の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!


こんな感じです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/29 13:48

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

    キャンセル

checkベストアンサー

+1

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

}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/29 07:02

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






    赤・黄・青は

    キャンセル

  • 2018/03/29 07:08

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

    キャンセル

  • 2018/03/29 08:23

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

    キャンセル

+1

 アウトレット
//内側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
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/29 15:34

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

    キャンセル

  • 2018/03/29 15:37

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

    キャンセル

  • 2018/03/30 06:19

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる