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

関連記事

I20160417-171311.jpg

Xcodeのブレークポイントで変数の中身を通知センターに表示してみる

Xcodeのブレークポイントの機能を使って、ブレークポイントを通過した時点での変数の中身を通知セ

記事を読む

I20160130-110811.jpg

【解決】Redundant conformance of ‘NSDate’ to protocol ‘Comparable’エラーが出た時の対処方法

アプリ開発中に「Redundant conformance of 'NSDate' to pro

記事を読む

20160724-154909.jpg

デザインの素人がノンデザイナーズ・デザインブックを読んだら、デザインの原則が結構分かるようになった!

ずっとエンジニアとして働いてきてデザインに関してはまったくの素人な僕ですが、「ノンデザイナーズ・

記事を読む

エディタのショートカット・Auto Layout・ブレークポイントに関する詳しい解説も!「Xcode5徹底解説」

著者の@es_kumagaiさんより献本御礼。iOSアプリ開発に用いるツール「Xcode 5」の

記事を読む

20150409-103620.jpg

描いたベクターグラフィックをSwift/Objective-Cコードに変換できる「Paint Code 2」

引用元 : PaintCode ベクターグラフィックを描き、それを描画するためのSwift

記事を読む

20140807-182914.jpg

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

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

記事を読む

I20150909-225806.jpg

Functional Programming in Swiftを読むために、すごいH本を読み終えた感想

「Functional Programming in Swift」という本がありまして、

記事を読む

I20160209-123839.jpg

【Swift】プロパティのsetとgetには異なるアクセス修飾子を指定できる

Swiftでは、プロパティのセッタ(set節)とゲッタ(get節)に異なるアクセス修飾子を指定

記事を読む

20141225-223049.jpg

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

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

記事を読む

I20150724-135442.jpg

iPhoneのホーム1画面目に置いているオススメなアプリ38本(2015年9月版)

2014年7月に「iPhoneアプリ開発にオススメの本10選(2014年7月版)」という記事

記事を読む

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 ↑