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

関連記事

I20160129-115948.jpg

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

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

記事を読む

I20150720-150147.jpg

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

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

記事を読む

I20151119-165939.jpg

Swift 2.1に対応した本「詳解 Swift 改訂版」が出るぞ!

Swiftの文法に関する解説書の定番「詳解 Swift」の、Swift2.1に対応した改訂版「詳

記事を読む

I20160209-123839.jpg

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

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

記事を読む

I20160925-163452.jpg

タブバーアイコン非選択時の色を変更する方法【iOS 10】

UITabBarControllerで、タブバーアイコン非選択時の色を変更する方法を紹介します!

記事を読む

I20160417-171311.jpg

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

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

記事を読む

I20150802-085831.jpg

Swift 1.2でtouchesBeganメソッドのNSSetがSetへ変更されました

Swift 1.2で、touchesBegan・touchesMoved・touchesCanc

記事を読む

20150410-122409.jpg

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

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

記事を読む

I20160409-211651.jpg

Xcode 7.3の新機能についてまとめてみた

2016年3月22日にXcode 7.3がリリースされましたが、自分が知らない機能があるかもしれ

記事を読む

20140901-120049

デザイン初心者な僕がデザイナーさんにそこそこ褒められるアプリアイコンを作った方法

デザイン初心者の僕がアプリアイコンを作ったら、本職のデザイナーさんにそこそこ褒められるという嬉しい体

記事を読む

20170423-182541
良肌研究室のフェイスウォッシュとオールインワンジェルを使ってみた

株式会社ブラシナさんから、良肌研究室の商品をご提供頂いたので、

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で、タブバーアイコン非選択時の

→もっと見る

PAGE TOP ↑