[iOS 9] UIStackViewでAndroidのView.GONEを実装する

はじめに

こんにちは！加藤潤です。

これまでこちらにあるように条件によって特定のビューの表示/非表示を切り替える場合、 非表示にした場合にその分のスペースを詰めたり、逆に表示した場合にスペースを空ける等の処理はConstraintを2つ用意して差し替えたり、少々トリッキーなやり方でやっていました。 Android Developerの方は「View.GONEがあれば。。。」と思ったに違いありません。

しかしiOS 9で追加されたUIStackViewを使えばViewのhiddenを切り替えるだけでView.GONEの動きが出来ちゃいます。今回はその方法をご紹介します。

開発環境

開発環境は以下の通りです。

• Xcode 7.0.1
• iPhone 6sシミュレータ

ビューの配置 & 制約の追加

今回はUISwitchと2つのUITextViewを配置し、UISwitchのON/OFFで先頭のUITextViewの表示/非表示を切り替えます。

まずはStoryboard上で下記のようにUISwitchと2つのUITextViewを貼り付けます。 わかりやすいようにUITextViewには背景色、テキストを設定します。

この時点でUISwitchに以下の制約を追加します。

• Leading Space to: Superview
• TopSpace to: Top Layout Guide Equals: 20

続いて2つのUITextViewをUIStackViewで包みましょう。 下記のように2つのUITextViewを選択した状態で「Stack」をクリックします。

すると下記のように選択したUITextViewがUIStackViewで包まれます。

この状態だとAutolayoutの制約が不足しているのでエラーとなります。 下記の制約を追加してください。

• 1番目のUITextViewにHeight Equals: 100を設定
• 2番目のUITextViewにHeight Equals: 200を設定
• UIStackViewにTrailing Space to Superviewを設定
• UIStackViewにLeading Space to Superviewを設定
• UIStackViewにTop Space to: Switch Equals 20を設定

最終的に制約は下記のようになります。

コーディング

ここまででビューを配置して制約の設定が終わったので後はコーディングするだけです。 とは言っても簡単で、下記のように1番目のUITextViewのアウトレットとUISwitchの値変更アクションメソッドを実装します。 アクションメソッドの中で1番目のUITextViewのhiddenを切り替えるだけです。

class ViewController: UIViewController {
    
    // 1番目のテキストビュー
    @IBOutlet weak var firstTextView: UITextView!
    
    // UISwitchの変更イベント
    @IBAction func didChangeValue(sender: UISwitch) {
        UIView.animateWithDuration(0.3) { () -> Void in
            self.firstTextView.hidden = !sender.on
        }
    }
}

動作確認

実行結果は下記の通りです。

まとめ

UIStackViewを使って簡単にAndroidのView.GONEを実装する方法をご紹介しました。 今回ご紹介した内容はUIStackViewを使った例の1つに過ぎません。 iOS 9から追加されたUIStackViewをどんどん活用していきましょう！！