PR

Text Kitによるテキストレイアウト(前編)

2014年10月15日(水)
西方 夏子(にしかた・なつこ)

これらのクラス関係の例を下図に示します(図16)。この例は、テキストストレージが持つテキストコンテンツを、2ページ(もしくは2カラム)に分割して表示する場合のクラス関連図です。そのため、レイアウトマネージャが2つ存在しています。

図16: Text Kitのクラス関係(複数ページに分割表示する例)

UITextViewのインスタンスを生成すると、そのUITextViewに関連付けされたNSTextContainer、NSLayoutManager、NSTextStorageのインスタンスが生成され、プロパティを通してアクセス可能となります。ただし、これらのプロパティはreadonlyであるため、生成後に変更することはできません。
テキストビューに自前のテキストコンテナを対応付けるには、以下のメソッドを利用してコードからUITextViewのインスタンスを生成します。

[ソースコード39] 自前のテキストコンテナを持つUITextViewを生成するメソッド

- (instancetype)initWithFrame:(CGRect)frame
                textContainer:(NSTextContainer *)textContainer;

レイアウトマネージャを利用すると、位置座標から表示されている文字を取得することが可能です。これをヒットテストと呼びます。例えば、タップ位置(タッチ終了位置)に表示されている文字は、下記のコードで取得できます。

[ソースコード40] 座標から文字インデックスを取得(ヒットテスト)

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint locationInView = [touch locationInView:self.textView];
  
    NSTextContainer *textContainer = self.textView.textContainer;
    NSLayoutManager *layoutManager = self.textView.layoutManager;
    // テキストコンテナの座標系に変換
    CGPoint locationInContainer =
    CGPointMake(locationInView.x - self.textView.textContainerInset.left,
                locationInView.y - self.textView.textContainerInset.top);
    // 文字インデックスを取得
    NSUInteger charIndex = [layoutManager characterIndexForPoint:locationInContainer
                                                 inTextContainer:textContainer
  fractionOfDistanceBetweenInsertionPoints:NULL];

  // テキストストレージから該当文字を取得
  NSString *charString =
  ;
// 画像の表示位置
CGRect imageRect = CGRectMake(100, 100, 
                              imageView.image.size.width, 
                              imageView.image.size.height);
imageView.frame = imageRect;
[self.textView addSubview:imageView];

// 非表示領域の計算(画像の表示位置をテキストコンテナの座標に変換)
CGRect exclusionRect = CGRectOffset(imageView.frame, 
                                    -self.textView.textContainerInset.left, 
                                    -self.textView.textContainerInset.top);
// 非表示領域の設定
UIBezierPath *path = [UIBezierPath bezierPathWithRect:exclusionRect];
self.textView.textContainer.exclusionPaths = @[path];

上記の通り、非表示領域を設定してその位置に画像を表示すれば、テキストの回り込みが実現できます。exclusionRectとimageRectは異なることに注意してください。exclusionRectはNSTextContainerの座標系、imageRectはUITextViewの座標系で示されます。

NSTextContainerによる表示領域は、デフォルトでsizeプロパティにより示されるサイズを持った矩形領域となっています。これに対して、より複雑な領域を表示領域として設定するには、NSTextContainerをサブクラス化して以下のメソッドをオーバーライドします。

[ソースコード42] ライン矩形を示すメソッド

- (CGRect)lineFragmentRectForProposedRect:(CGRect)proposedRect 
                                  atIndex:(NSUInteger)characterIndex 
                         writingDirection:(NSWritingDirection)baseWritingDirection 
                            remainingRect:(CGRect *)remainingRect;

テキストコンテナが示す表示領域の概要を示します(図17)。
lineFragmentRectForProposedRect...メソッドに渡されるproposedRectは、レイアウトマネージャーが計算した行の表示領域で、実際にテキストを表示すべき領域を返します。また、exclusionPathsによる非表示領域があると、非表示領域で分割された領域がremainingRectとして渡されます。そのため、テキストの分割位置もこのメソッドで調整します。
なお、指定したlineFragmentRectに対して、実際にテキストが表示される領域は、lineFragmentPaddingを除いた内側になります。lineFragmentPaddingはNSTextContainerのプロパティで、デフォルト値として0.5が設定されています。

図17: 表示領域の詳細設定に関するパラメータ

この記事のもとになった書籍
UIKit徹底解説 iOSユーザーインターフェイスの開発

西方 夏子 著/丸山 弘詩 編
価格:3,800円+税
発売日:2014年06月13日発売
ISBN:978-4-8443-3608-2
発行:インプレスジャパン

UIKit徹底解説 iOSユーザーインターフェイスの開発

ユーザーインターフェイス(UI)を制御するUIKitは、iOSアプリの中心的役割を担います。UIKitを深く理解することが、アプリ開発での多くの問題解決に繋がります。本書では、アプリの起動から画面表示、画面レイアウト、イベントハンドリングと、常に稼働しているUIKitの機能を丁寧に解説します。メインとなるコンテンツの表示からステータスバーを含むバーの制御、フォントやテキストの改良など、ビューやテキストの「外観」(アピアランス)を改善する内容も充実させています。使用頻度の高いテーブルビューとコレクションビュー、そしてユニバーサルアプリ化に有益なカスタムコンテナビューコントローラに関しては、チュートリアル形式で解説します。また、StoryboardやAuto Layoutも今後のアプリ開発でさらに重要となる状況を見越して、詳細解説に留まらず同じくチュートリアルで多くの具体例を紹介します。

Amazon詳細ページへImpress詳細ページへ

著者
西方 夏子(にしかた・なつこ)

ソフトウェアエンジニア。大手電機メーカーにおける組込みソフトウェアの開発を経て、現在は個人でiOS向けのアプリケーションを開発している。代表作であるローン計算アプリ「iLoan Calc」は、個人の方のみならず、多くの不動産業、金融業の方からも愛用されている。『iPhoneアプリ開発エキスパートガイド iOS6対応』(共著・インプレスジャパン刊)、『上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編』(共著・インプレスジャパン刊)などの執筆にも携わり、現在は執筆業を中心にアプリ開発と育児を両立中。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています