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

関連記事

20160730-172416.jpg

Auto Layoutで非表示にした部分を詰める(トルツメ)する方法

Auto Layoutを使って非表示にしたコントロールの部分を詰める(トルツメ)方法を説明します

記事を読む

20150410-122409.jpg

複数バージョンのXcodeを共存してMacにインストールする方法

いよいよXcode 6.3が正式にリリースされましたね。 今回は複数バージョンのXco

記事を読む

iPhoneゲームを簡単に開発したいならこの本がオススメ!「Sprite Kit iPhone 2Dゲームプログラミング」

iPhoneゲームアプリを簡単に開発したいなら「Sprite Kit iPhone 2Dゲームプ

記事を読む

I20151126-170621.jpg

Swift 2のprintで改行しない方法

Swift 1時代はprintlnで改行あり、printで改行なしでしたが、Swift 2ではp

記事を読む

I20160129-115948.jpg

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

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

記事を読む

I20160102-131507.jpg

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

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

記事を読む

20140810-193043.jpg

WordPressでObjective-Cのソースコードをキレイに整形して表示する方法

WordPressの記事内で、Objective-Cのソースコードをキレイに整形して表示する方法

記事を読む

I20150924-010943.jpg

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

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

記事を読む

20150108-113233.jpg

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

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

記事を読む

20160807-113229.jpg

UITableViewのリサイズに合わせて一番下のセルを常に一番下に表示する方法

一番下のセルを表示している状態でUITableViewの下端を上に移動させると一番下のセルが隠れ

記事を読む

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 ↑