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

関連記事

I20160204-120840.jpg

Swiftでプロトコル型に対して===演算子を使いたい時の対処法

プロトコル型の変数や定数に対して===演算子を使うと「error: binary opera

記事を読む

20140807-182914.jpg

【アプリ開発】iOS 8とiOS 7でUIAlertController・UIAlertView・UIActionSheetを切り替えて使う方法

@akio0911です。今までお世話になったUIAlertViewとUIActionShee

記事を読む

20141027-113224.jpg

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

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

記事を読む

20150406-121104.jpg

【アプリ開発】選んだ色をUIColorの生成コードに変換できる「Developer Color Picker」

選んだ色をUIColorの生成コードに変換できる「Developer Color Picker」

記事を読む

I20150907-185322.jpg

uGUIの使い方が分かる本「uGUIではじめるUnity UIデザインの教科書」

株式会社マイナビ様より献本御礼。 本書は、公式のUIフレームワーク「Unity UI(uGUI

記事を読む

I20160119-155700.jpg

Xcodeで80文字目のところにガイドラインを表示する方法

Xcodeで80文字目のところに線(ガイドライン)を表示する方法について解説します! 「ソース

記事を読む

20150116-114410.jpg

プログラミング未経験者がSwiftの文法を学ぶのにオススメな本!「たのしいSwiftプログラミング」

楽しみにしていたSwiftの入門書「たのしいSwiftプログラミング」を読み終わったので、レビュ

記事を読む

20141225-223049.jpg

【Xcode6】Auto Layoutで制約のFirst ItemとSecond Itemを逆にする方法

一度追加した制約のFirst ItemとSecond Itemを入れ替える方法について紹介します

記事を読む

I20160918-133158.jpg

StoryboardでChild View Controllerにデータを渡す方法(Xcode 8 & Swift 3)

Storyboardで、Child View Controllerにデータを渡す方法を紹介します

記事を読む

I20160125-104438.jpg

iPhoneアプリの開発に必要なものをまとめてみた

僕はアプリ開発講座を開催していますが、その関係もあって「iPhoneアプリを開発するには、ど

記事を読む

PAGE TOP ↑