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

関連記事

I20160204-120840.jpg

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

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

記事を読む

20150108-113233.jpg

【Swift】コードをコンパクトに記述できるオプショナルチェーン(optional chaining)の性質と活用例

最近はSwiftでコーディングすることが多い@akio0911です。今日はSwiftでコード

記事を読む

I20160125-104438.jpg

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

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

記事を読む

20141006-103526.jpg

Xcode 6におけるNSUserDefaultsのplistの在り処と、内容を確認・書き換え・削除する方法

Xcode 6にて、NSUserDefaultsのplistファイルの在り処と、内容を確認・書き

記事を読む

20160420-180135.jpg

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

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

記事を読む

I20150720-150147.jpg

Apple Watchアプリを作りたいならこの書籍!「詳細!Apple Watch アプリ開発 入門ノート」

     Apple Watchアプリの作り方を学ぶのにオススメな書籍、「詳細!Apple W

記事を読む

I20150808-104713.jpg

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

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

記事を読む

20150106-142403.jpg

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

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

記事を読む

I20150714-010114.jpg

【Swift】Objective-Cで書いたクラスをメソッド単位で少しずつSwiftへ移行する方法

Objective-Cで作った既存のアプリをSwiftで書き直したいと思っているのですが、一

記事を読む

I20151031-175009.jpg

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

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

記事を読む

【HomeKit】家の照明をSiriで制御できるようにしてみた

Apple製品と家電を連携するシステム「HomeKit(ホーム

【メンズネイル】新宿区大久保のサロンでターコイズとピンクのメタルネイルにしてもらった

2016年10月22日、いつもお世話になっているネイルサロン「

[iOS][Swift]スタックトレース(コールスタック)を表示する2つの方法

iOSアプリ開発で、スタックトレース(コールスタック)を表

【使い方】iOS 10のSiriで出来る事299個をまとめてみた

そろそろiOS 11がリリースされそうな雰囲気ではありますが、iO

【メンズネイル】新宿区大久保のサロンでハーレイ・クインがテーマのネイルにしてもらった

2016年9月27日、いつもお世話になっている「Total b

→もっと見る

PAGE TOP ↑