NSAttributedTextやNSMutableAttributedTextの使い方
2015年3月28日:iOS
Wordなどの文章作成ツールでは、文字を大きくしたり赤色にしたりといろいろ文字のデコレーションが可能です。iOSで文字のデコレーションをするにはNSAttributedTextやNSMutableAttributedTextを使用します。ここでは、これらのクラスを使用した文字デコレーションの方法をまとめて解説します。言語はSwiftです。
NSAttributedTextは属性付き文章の基本
NSAttributedTextと聞くと難しそうですが、「Attribute=属性」、「Text=文章」なので日本語に訳せば「属性付きの文章」ということになります。 ですから、NSAttributedTextは属性付きの文章を扱うものだという理解ができます。ここまできたらほとんど理解したようなもので、あとはどのように文字に属性を追加すればいいのかということになります。
AttributedTextはTextViewでよく使用する
NSAttributedTextは基本的にTextViewで使用します。TextViewを設置してSwiftファイルとプロパティを結合して使用します。
@IBOutlet var main_text: UITextView!
例えば、プロパティ名をmain_textとすれば、
var a:NSAttributedString=main_text.attributedText
でTextViewの属性付き文章がNSAttributedStringクラスの変数aへ代入されます。main_text.attributedTextを変更すれば表示が変更するという点をおさえておきましょう。
AttributedTextの属性値の読み取り
AttributedTextの属性を読み取るには以下の命令を使用します。
var tag=a.attributesAtIndex(5, effectiveRange: &range)
これで5番目の文字における属性情報が変数tagへ代入されます。tagはNSDictionaryです。よって、tagから属性値を取り出すには
var tag_main:String=tag["属性名"] as String?
とすればOKです。属性名で指定したものがあればそれを返します。ない場合はnilを返します。
それから、rangeは事前に
var range:NSRange=NSMakeRange(0, 0)
と定義されたNSRangeクラスのオブジェクトです。このrangeのアドレス&rangeをattributesAtIndexメソッドに入れておくことで、5番目の文字における属性がどの文字列で適用されているかがわかります。属性の範囲を知りたい際はrangeから調べましょう。
NSMutableAttributedTextで属性付き文章を編集する
実際に属性付き文章を作成してTextViewへ表示しようということを考えます。属性付き文章を編集するにはNSMutableAttributedTextを使用します。Mutableとは変更可能という意味です。よって、NSMutableAttributedTextは属性や文字を変更できるということが理解できますね。
初期化と文字の追加・挿入
NSMutableAttributedTextを宣言するには以下のようにします。
var matext=NSMutableAttributedString(string: "")
これで、matextというNSMutableAttributedStringクラスには空の文字””がはいった状況になります。””に文字列を入れれば、文字列が入った状況になります。
文字を追加するには
matext.appendAttributedString(NSAttributedString(string: "追加する文字列"))
とします。これで、属性が何もついていない”追加する文字列”がmatextへ追加されることになります。stringをNSAttributedStringへ変換し、NSMutableAttributedStringへ変換するという流れです。
挿入したい場合は
matext.insertAttributedString(NSMutableAttributedString(string: "挿入文字"), atIndex: 挿入場所)
のようにinsertAttributedStringを使います。
属性をつける
では文字に属性をつけていきます。以下の様なaddAttributeというメソッドで属性を付加することができます。
matext.addAttribute("属性名", value: "属性値", range: NSMakeRange(開始場所,文字の数))
属性名や属性値は好きにつけることができます。そして、NSMakeRangeで属性をつける文字列を指定します。たとえば、NSMakeRange(5,3)なら5文字目から8文字目に属性が付加されます。
好きな属性名でもいいのですが、これでは文字の大きさや色は変わりません。ただ、表示の裏で独自の属性がついているだけの状態です。文字の色を変更する属性をつけるには以下のようにします。
matext.addAttribute(NSForegroundColorAttributeName, value: UIColor.blueColor(), range: NSMakeRange(開始番号,文字列数))
文字の色の場合は、NSForegroundColorAttributeNameで付加します。これらのシステムですでに決めてある属性名について以下の表にまとめておきます。使用したいものを選んでデコレーションしてください。
属性名 | 属性値の型 | 意味 | 初期値 |
---|---|---|---|
NSFontAttributeName | UIFont | フォント | Helvetica 12pt |
NSParagraphStyleAttributeName | NSParagraphStyle | パラグラフの設定 | defaultParagraphStyleが返す値 |
NSForegroundColorAttributeName | UIColor | 文字の色 | black |
NSBackgroundColorAttributeName | UIColor | 文字の背景色 | なし |
NSKernAttributeName | NSNumber | 文字間隔 | 0.0 |
NSUnderlineStyleAttributeName | NSNumber (0か1) | 下線をつけるかどうか | なし |
NSUnberlineColorAttributeName | NSColor | 下線の色 | nil |
NSStrokeColorAttributeName | UIColor | 縁取りの色 | nil |
NSStrokeWidthAttributeName | NSNumber | 縁取りの幅 | 0 |
NSShadowAttributeName | NSShadow | 文字の影 | nil |
NSStrikethroughColorAttributeName | NSColor | nil | |
NSStrikethroughStyleAttributeName | NSNumber (int) | 0 | |
NSSuperscriptAttributeName | NSNumber (int) | 0 | |
NSToolTipAttributeName | NSString | nil | |
NSBaselineOffsetAttributeName | NSNumber (float) | 0.0 | |
NSCursorAttributeName | NSCursor | カーソル | IBeamCursor |
NSExpansopnAttributesName | NSNumber (float) | 0.0 | |
NSLigatureAttributeName | NSNumber (int) | 1 | |
NSLinkAttributeName | id (Object) | リンクつきの文字 | なし |
NSObliquenessAttributeName | NSNumber (float) | 0.0 | |
NSAttachmentAttributeName | NSTextAttachment | 画像などを表示するのに使用 |
なし |
TextViewにNSMutableAttributedTextを表示する
NSMutableAttributedTextが完成したら、以下のようにしてTextViewに表示させます。
main_text.attributedText=matext as NSAttributedText
ただ単にNSAttributedTextへNSMutableAttributedTextを変換させているだけです。これで属性付きの文章がTextViewへ表示されます。
画像の表示
画像を表示させることもできます。例えば
var attach:NSTextAttachment = NSTextAttachment() attach.image=(ここに表示させたいUIImage) attach.bounds=CGRect(x: 0, y: 0, width: (UIImageの幅), height: (UIImageの高さ)) var attr_string:NSAttributedString=NSAttributedString(attachment: attach) result.insertAttributedString(matext, atIndex: 表示させたい幅)
とすれば、UIImageを表示させることができます。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー