UITextViewに画像を埋め込んでテキストを回り込ませる
iOS 7から追加されたText Kitの機能を使ってUITextViewに画像を埋め込み、テキストを回り込ませる方法をメモしておきます。
ここでは例として、次のようなテキストに画像を埋め込むことを考えてみます。
1.非表示領域を設定
このテキストの上に何も考えずに画像を配置すると、次のようになると思います。
そこで、まずは非表示領域(テキストを表示しない領域)を設定します。
非表示領域を設定するにはText Kitのメイン機能である NSTextContainer
の exclusionPaths
プロパティを使います。このプロパティに UIBezierPath
型で領域を指定すれば、その領域が非表示領域になります。
まずは四角形でやってみます。
// UITextViewに埋め込む画像 UIImage *image = [UIImage imageNamed:@"Star"]; // 非表示領域を設定(四角形) CGRect exclusionRect = CGRectMake(40, 30, image.size.width, image.size.height); UIBezierPath *path = [UIBezierPath bezierPathWithRect:exclusionRect]; // テキストビューに設定 self.textView.textContainer.exclusionPaths = @[path];
この状態でプログラムを実行してみると次のようになります。
2.画像を追加
次は非表示領域に画像を埋め込みます。
UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.frame = exclusionRect; [self.textView addSubview:imageView];
これで UITextView
に画像を埋め込み、テキストを回り込ませることができました。
非表示領域を星形にしてみる
非表示領域は UIBezierPath
で指定することからもわかるように、四角形である必要はありません。ここではせっかくなので、画像に合わせて星形にしてみましょう。
// 非表示領域を設定(星形) UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(160.0, 30.0)]; [path addLineToPoint:CGPointMake(210.0, 100.0)]; [path addLineToPoint:CGPointMake(280.0, 120.0)]; [path addLineToPoint:CGPointMake(230.0, 180.0)]; [path addLineToPoint:CGPointMake(240.0, 265.0)]; [path addLineToPoint:CGPointMake(160.0, 230.0)]; [path addLineToPoint:CGPointMake(95.0 , 270.0)]; [path addLineToPoint:CGPointMake(100.0, 180.0)]; [path addLineToPoint:CGPointMake(40.0 , 120.0)]; [path addLineToPoint:CGPointMake(125.0, 105.0)]; [path closePath];
これでキレイに画像にテキストが回り込むようになりました。
サンプルソース
Text Kitについては、先日発売されたこちらの書籍でかなり詳しく解説されています。