Auto Layoutで非表示にした部分を詰める(トルツメ)する方法

公開日: : iPhoneアプリ開発

20160730-172416.jpg

Auto Layoutを使って非表示にしたコントロールの部分を詰める(トルツメ)方法を説明します!

    

スポンサード リンク

UIImageViewを3つ並べて、真ん中のUIImageViewの表示・非表示を切り替える例

20160730-180601.jpg

画面には以下のように3つのUIImaveViewを配置しているとしましょう。そしてボタンをタップすると真ん中のUIImageViewの表示・非表示を切り替えることができ、非表示になった際は空いた部分が詰められる(一番右のUIImageViewの位置が左にずれる)とします。

    

一番左のUIImageViewの制約を設定する

20160730-180704.jpg

1つ目のUIImageViewには、以下のように制約を設定します。

  1. 左から0空ける(Priority:1000)
  2. 上から8空ける(Priority:1000)
  3. 幅は50(Priority:1000)
  4. 高さは50(Priority:1000)

    

真ん中のUIImageViewの制約を設定する

20160730-173340.jpg

2つ目のUIImageViewには、以下のように制約を設定します。

  1. 1つ目のUIImageViewから20空ける(Priority:999)
  2. 上から8空ける(Priority:1000)
  3. 幅は50(Priority:1000)
  4. 高さは50(Priority:1000)

1番の制約の優先度を999に設定しているのがポイントです。2つ目のUIImageViewを非表示にした際、この制約の優先度を1に変更したいのですが、優先度1000の制約(いわゆる必須制約)の優先度を変更することはできないので、ここではそれを避けるために優先度を999に設定しています。

    

一番右のUIImageViewの制約を設定する

20160730-173525.jpg

3つ目のUIImageViewには、以下のように制約を設定します。

  1. 1つ目のUIImageViewから20空ける(Priority:1)
  2. 2つ目のUIImageViewから20空ける(Priority:1000)
  3. 上から8空ける(Priority:1000)
  4. 幅は50(Priority:1000)
  5. 高さは50(Priority:1000)

1つ目の制約の優先度を1に設定しているのがポイントです。この制約は他の制約と矛盾しており、優先度が一番低いので初期状態では破棄されます。

    

Hiddenボタンがタップされた時の処理を記述する

20160730-173727.jpg

Hiddenボタンがタップされた時のアクションを作り、以下の様なコードを記述します。

faceImageView2.hidden = !faceImageView2.hidden

if faceImageView2.hidden {
    face2To1Constraint.priority = 1
    face3To1Constraint.priority = 999
} else {
    face2To1Constraint.priority = 999
    face3To1Constraint.priority = 1
}

    

20160730-175841.jpg

初期状態での制約を図で表現してみました。「ImageView1とImageView2の間を20空ける」という制約は他の制約と矛盾していますが、優先度1なので無視されます。

    

20160730-180441.jpg

ボタンがタップされて2つ目のUIImageViewを非表示にした時の状態を図で表現してみました。優先度を変更したことで「ImageView1・2間の制約」が無視され、「ImageView1・3間の制約」が採用されることで、間が詰められます。

    

@akio0911はこう思った。

UIStackViewを使えばもっと簡単に実装できるんですが、UIStackViewはiOS 9以降でしか使用できないので、iOS 8以前もサポートしたい場合は今回紹介したような方法を採用するしかなさそうです。

    

この記事が気に入ったら「いいね!」しよう

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

LINEでご感想・ご要望お送りください!
(スマホでLINEを起動 > 友だち追加 > QRコード)

関連記事

20150108-113233.jpg

【Swift】コードをコンパクトに記述できるオプショナルチェーン(optional chaining)の性質と活用例

最近はSwiftでコーディングすることが多い@akio0911です。今日はSwiftでコード

記事を読む

iPhoneアプリ開発の初心者にオススメな本はこれだ!iOS 7とXcode 5に対応!

僕が講師をしている初心者向けのiPhoneアプリ開発講座「アプリクリエイター道場」でも参考書とし

記事を読む

20141027-113224.jpg

【Swift】「詳解 Objective-C 2.0 第3版」の著者による「詳解Swift」が予約受付中!

「詳解 Objective-C 2.0 第3版」の筆者「荻原 剛志」さんによる新しい技術書「詳細

記事を読む

20160804-193842.jpg

【Xcode 7】Storyboardで複数の制約をまとめて追加する方法

Xcode 7のStoryboardで、複数の制約をまとめて追加する方法について解説します!

記事を読む

I20160201-112159.jpg

ライブラリ管理ツールCarthageのCartfileの書き方

iOS(Cocoa)ライブラリ管理ツール「Carthage」で使用するCartfileの書き方を

記事を読む

I20160126-141427.jpg

Swift 2でtoIntが使えない!unavailableエラーが出た時の対処方法

Swift 2でtoInt()を使うと、 'toInt()' is unavailable:

記事を読む

20140724-103334.jpg

iPhoneアプリ開発にオススメの本10選(2014年7月版)

@akio0911です。2013年12月に「レベル・目的別!iPhoneアプリ開発おすすめ本

記事を読む

20150104-120413.jpg

【おすすめ本】Swiftではじめる iPhoneアプリ開発の教科書【iOS 8&Xcode 6対応】

     入門者にオススメな、Swift&Xcode 6の入門書「Swiftではじめる

記事を読む

I20151119-165939.jpg

Swift 2.1に対応した本「詳解 Swift 改訂版」が出るぞ!

Swiftの文法に関する解説書の定番「詳解 Swift」の、Swift2.1に対応した改訂版「詳

記事を読む

20150525-224340.jpg

【Swift】クロージャをメソッドや関数の引数として渡す方法

Swiftでメソッドの引数としてクロージャを渡す方法について解説したいと思います。     

記事を読む

I20170228-002742.jpg
約3ヶ月で体脂肪率を6.2%も落とせたキッカケについて

(右上の赤枠内がダイエット開始前、左下の赤枠内が3ヶ月後の数値

I20161224-174949.jpg
「季節の野菜を直接配送!季節のスムージー」を買ってみた

「FiNCモール」で、「季節の野菜を直接配送!季節のスムージー」を

I20161002-152537.jpg
【メンズネイル】東京・新宿のネイルサロンでマットネイルしてもらった

2016年7月18日、東京・新宿のメンズOKなネイルサロン「Tot

I20160925-163452.jpg
タブバーアイコン非選択時の色を変更する方法【iOS 10】

UITabBarControllerで、タブバーアイコン非選択時の

I20160924-123726.jpg
iPad Pro 9.7インチ SIMフリーモデルにFREETELのSIMを入れて使ってみた

今までiPad miniで使っていたFREETELのSIM

→もっと見る

PAGE TOP ↑