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コード)

関連記事

I20160129-115948.jpg

【対処法】Swift 2(iOS 9)ではUITextFieldのtextがString?になっている

Swift 1(iOS 8)時代において、UITextFieldのtextプロパティは va

記事を読む

I20160411-122213.jpg

Swift 2.2の変更点をまとめてみた

2016年3月22日、Xcode 7.3と共にSwift 2.2が正式にリリースされました。

記事を読む

I20160212-000722.jpg

Swiftにおけるセレクタ(Selector)について調べてみた

NSTimerなどを使う際、引数に「Selector」という型があるのですが、これがSwiftで

記事を読む

20150327-131839.jpg

【Apple Watchアプリ】ボタン内の文字の先頭に画像を入れる方法【WatchKit】

Apple Watch向けのアプリを作るためのフレームワーク「WatchKit」。そのWatch

記事を読む

20141027-113224.jpg

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

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

記事を読む

I20160122-095132.jpg

Swift 2のドキュメントコメントの書き方(JavaDoc的なやつ)

コード補完時やoptionクリック時などに説明が出てくるようにする「ドキュメントコメント(J

記事を読む

I20150722-185359.jpg

【書籍】12のパターンで学ぶ本「iOSアプリ開発 AutoLayout徹底攻略」

     Auto Layoutの使い方について解説されている本「iOSアプリ開発 A

記事を読む

I20160505-011515.jpg

iOS 9以降で使えるReadable Content Guideを試してみた

iOS 9から追加されたReadable Content Guide(readableConte

記事を読む

20150106-142403.jpg

Auto Layoutをコードで記述してビューを等間隔に並べる【Swift】

Auto Layoutをコードで記述して、ビューを等間隔に並べる方法について紹介します。ちなみに

記事を読む

I20151107-111928.jpg

Swift 2で要求バージョンの指定・実行環境バージョンの確認を行う(#availableと@available)

Swift 2で追加された#available, @availableの使い方についてメモしてお

記事を読む

PAGE TOP ↑