読者です 読者をやめる 読者になる 読者になる

iOSで表示要素を動的に消して親ビューの高さを変える

はじめに

ログイン前後で表示要素の数を動的にし、ビューの高さを変えるという仕様があり、実現方法を調べました。

意外とめんどくさかった。もっと効率の良いやり方もありそうです。

バージョン

XCode Version 7.3.1 (7D1014)

サンプル

ラベル2つとボタン1つを持つフッターがあり、状態によって2つ目のラベルを非表示にして、その分ボタンを上に詰めるという仕様で考えます。

やりかた

制約

添付のような状態にします。

ポイントはボタンのconstraintsにLabel2を使わないこと。

ここでは高さと左右下のマージンだけ設定しています。

f:id:y_sumida:20160615152027p:plain

コード

調べるまで知らなかったのですがconstraintsもIBOutletでViewControllerに接続できます。

フッターの高さとLabel2の上マージンを接続して、viewDidLoadでLabel2を非表示にするため高さを0に、空いた隙間を詰めるためフッターの高さを調整しています。

確認用にボタンタップで表示するようにしています。

もちろん、他のタイミングでもできるのでやりたいことに合わせて読み替えましょう。

ちなみに、Label2自体をIBOutletで接続してhiddentrueで非表示にしても、htmlと違って高さを維持するのでうまくいかないです。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var footerHeight: NSLayoutConstraint!
    @IBOutlet weak var label2TopMargin: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.label2TopMargin.constant = 0
        self.footerHeight.constant = 120
    }

    @IBAction func tapButton(sender: AnyObject) {
        self.label2TopMargin.constant = 4
        self.footerHeight.constant = 150
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

実行結果

初期ロード時

Label2が非表示でLabel1とボタンの間が詰まっています。

f:id:y_sumida:20160615152125p:plain

ボタンタップ時

フッターの高さが高くなり、Label2を表示しています。

f:id:y_sumida:20160615152135p:plain