【Auto Layout】readableContentGuideを使わずに最大幅を定義する

公開日: : iPhoneアプリ開発

20160509-200435.jpg

iOS 9からUIViewにreadableContentGuideが追加されましたが、readableContentGuideを使わずに通常の制約だけでビューの最大幅を設定する方法について解説したいと思います。

    

スポンサード リンク

必須の制約を追加する

今回はビューコントローラーの中にUITextViewを1つ設置し、この幅を可能な限り600に近づける(ただし画面からはみ出させない)というレイアウトを作ってみましょう。

まず、必須(優先度1,000)の制約を設定していきます。

20160509-192748.jpg

  1. Text View.width ≦ 600
    • テキストビューの幅は600以内
  2. Text View.top = Top Layout Guide.bottom
    • テキストビューのtopは、Top Layout Guideにピッタリ合わせる
  3. Text View.bottom = Bottom Layout Guide.top
    • テキストビューのbottomは、Bottom Layout Guideにピッタリ合わせる
  4. Text View.leading ≧ View.leadingMargin
    • テキストビューのleading(左側)は、ViewのleadingMarginからはみ出ないようにする
  5. Text View.trailing ≦ View.trailingMargin
    • テキストビューのtrailing(右側)は、ViewのtrailingMarginからはみ出ないようにする
  6. TextView.centerX = View.centerX
    • テキストビューのcenterXは、ViewのcenterXに合わせる

    

随意の制約を追加する

次に、随意(優先度が999以下)の制約を追加していきます。

20160509-194013.jpg

  • Text View.width = View.width 優先度750
    • Text Viewの幅は、可能な限りViewの幅に近づける

    

ちなみに随意の制約には、ある方向にビューを引き寄せる効果があり、今回はそれを利用しています。

随意の(必ずしも満たさなくてよい)制約を定義することも可能です。制約にはすべて、1〜1000の優先度があります。優先度1000の制約は必須です。そうでない制約は随意です。

解の計算に当たり、Auto Layoutは優先度の高い方から順に、制約をすべて満たす解を求めようとします。随意の制約を満たせなかった場合、その制約を飛ばして次の制約に進みます。

随意の制約を満たせない場合でも、レイアウトには影響が及ぶことがあります。ある制約を無視した結果、レイアウトが不定になった場合、システムはこの制約に最も「近い」解を選ぶからです。このように随意の制約には、満たされなかった場合でも、ある方向にビューを「引き寄せる」効果があります。

引用元 : Auto Layoutガイド: 制約の構造

    

プレビュー結果

プレビュー結果は以下のようになります。


20160509-194854.jpg

左から順に

  • iPhone 4-inch Portrait
  • iPad Portrait
  • iPad Landscape

となっています。

    

サンプルはこちら

サンプルをGitHubに置いたので、気になる方はチェックしてみてください。 ⇒ akio0911/MaxWidthConstraints: readableContentGuideを使わずに通常の制約だけでビューの最大幅を設定するサンプル

    

@akio0911はこう思った。

「可能な限り〜、というレイアウトを実現するには、優先度が1,000ではない制約を使う」ということを覚えておくと、様々な場面で役に立つと思います!

    

↓ 実例とともにAuto Layoutを学べる一冊です!

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

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

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

関連記事

I20160212-000722.jpg

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

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

記事を読む

20150327-131839.jpg

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

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

記事を読む

I20151107-111928.jpg

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

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

記事を読む

I20160125-104438.jpg

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

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

記事を読む

Auto LayoutやStoryboardの仕組みをしっかり理解できる!「UIKit徹底解説」

インプレスジャパン様より献本御礼。UIKit周りを中心に、「Auto Layout」「Story

記事を読む

I20160525-233821.jpg

SwiftBondを使ってみた。observeやObservableの使い方など

Swiftバインディングフレームワークである「SwiftBond」を使ってみました!

記事を読む

I20151031-175009.jpg

初心者にオススメの本!Swiftではじめる iPhoneアプリ開発の教科書【Swift 2&Xcode 7対応】

     Xcode 7とSwift 2に対応したアプリ開発の入門書籍「Swiftでは

記事を読む

20150106-142403.jpg

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

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

記事を読む

I20160418-235604.jpg

XcodeのStoryboardで部品を選択しやすくする2つの方法

ストーリーボード上で部品が入り組んでくると選択しづらくなってきますが、そんな状況でも部品を選択し

記事を読む

I20150721-164252.jpg

【書籍】iPhoneアプリ開発の初心者にオススメの本「詳細! Swift iPhoneアプリ開発 入門ノート」

     Swift 1.1、Xcode 6.1、iOS 8.1に対応している書籍「詳

記事を読む

I20170521-225453.jpg
東京駅八重洲口の「羊肉酒場 悟大」で網焼きジンギスカンを頂きました!

ゆうせいさんと株式会社 大庄さんからご招待頂き、悟大withサッポ

I20170514-165235.jpg
iPhoneと連携できる体重体組成計「Withings Body Cardio」を使ってます

ジムに通い始めて体脂肪率が落ち始めたのをキッカケに、iPhoneと

I20170507-155440.jpg
【派手髪】ハーレイクイン風の髪色に染めてもらいました

2016年10月20日、ハーレイクイン風の髪色に染めてもらいました

I20170504-173110.jpg
【メンズネイル】東京・新宿のネイルサロンでターコイズのホログラムネイルしてもらった

ネイルネタが1年分くらい溜まっているので、ちょっとずつ書いていこう

I20170502-010117.jpg
SNUGGのライトニングケーブルが耐久性高し。8ヶ月使ってますが断線の気配なし!

iPhoneの充電&転送ケーブルであるLightningケーブルっ

→もっと見る

PAGE TOP ↑