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

公開日: : iPhoneアプリ開発

20160505-011515.jpg

iOS 9から追加されたReadable Content Guide(readableContentGuide)の使い方をメモしておきたいと思います。

    

スポンサード リンク

Readable Content Guideとは?

UIView Class Referenceでは、readableContentGuideに関して以下の様な記述があります。

This layout guide defines an area that can easily be read without forcing users to move their head to track the lines.

引用元 : UIView Class Reference

「画面の幅が広すぎるとユーザーが目を動かして文字を追うのが辛くなるので、読みやすいコンテンツ表示幅を実現するための仕組み」ってところでしょうか?

    

Readable Content Guideを使わない場合

まずはReadable Content Guideを使わない例から。

以下の様なコードでtextViewを配置し、実行結果を見てみましょう。

textView.leadingAnchor
    .constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor).active = true
textView.topAnchor
    .constraintEqualToAnchor(view.layoutMarginsGuide.topAnchor).active = true
textView.trailingAnchor
    .constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor).active = true
textView.bottomAnchor
    .constraintEqualToAnchor(view.layoutMarginsGuide.bottomAnchor).active = true

20160505-012256.jpg

左右のマージンがほとんどありませんね。この状態ではテキストがちょっと読みづらいですね・・・。

    

Readable Content Guideを使う場合

次はReadable Content Guideを使う場合です。

以下の様なコードでtextViewを配置しました。

textView.leadingAnchor
    .constraintEqualToAnchor(view.readableContentGuide.leadingAnchor).active = true
textView.topAnchor
    .constraintEqualToAnchor(view.readableContentGuide.topAnchor).active = true
textView.trailingAnchor
    .constraintEqualToAnchor(view.readableContentGuide.trailingAnchor).active = true
textView.bottomAnchor
    .constraintEqualToAnchor(view.readableContentGuide.bottomAnchor).active = true

iPad Landscapeでの実行結果は以下の通り。


20160505-012628.jpg

これくらいの幅ならば、テキスト情報も読みやすいですね。

    

@akio0911はこう思った。

サンプルはこちらに置いてあります ⇒ akio0911/ReadableContentGuide: ReadableContentGuide sample

iOS 9以降限定ではありますが、画面幅に応じてテキストが読みやすい左右マージンを自動的に設定してくれるのは楽ですね。

iOS 9以降を対象としたアプリでは積極的に使っていきたいと思います。

↓ 今回紹介したReadable Content Guideは載っていませんが、Auto Layoutを含めたUIKitの詳細については以下の本が詳しかったです。2年前の本ではありますが、今でも使える知識がたくさん載っています。

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

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

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

関連記事

20140807-182914.jpg

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

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

記事を読む

20150525-224340.jpg

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

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

記事を読む

20141027-113224.jpg

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

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

記事を読む

I20150808-104713.jpg

【Xcode】シミュレーターリストの表示がおかしくなった時の解決方法

Xcodeのシミュレーターリストの表示が、上のスクリーンショットのようにおかしくなってしまっ

記事を読む

I20150924-010943.jpg

Swift 2.0で追加されたOptionSetTypeがなかなか便利

Swift 2.0で追加されたOptionSetTypeプロトコルがなかなか便利なので紹介し

記事を読む

I20160129-115948.jpg

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

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

記事を読む

20160420-180135.jpg

【RxSwift】2つのUITextFieldに入力された数値の合計をUILabelに表示する

そろそろRxSwiftについて学び始めよう!ということで、まずは2つのUITex

記事を読む

20150104-120413.jpg

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

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

記事を読む

I20160102-131507.jpg

Swift 2の文法が分かるオススメ本「詳解 Swift 改訂版」

Swift文法書の定番とも言える、荻原 剛志さんの「詳解 Swift」。 Swiftの文法をキ

記事を読む

I20160212-000722.jpg

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

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

記事を読む

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 ↑