NSAttributedTextやNSMutableAttributedTextの使い方

 Wordなどの文章作成ツールでは、文字を大きくしたり赤色にしたりといろいろ文字のデコレーションが可能です。iOSで文字のデコレーションをするにはNSAttributedTextやNSMutableAttributedTextを使用します。ここでは、これらのクラスを使用した文字デコレーションの方法をまとめて解説します。言語はSwiftです。

NSAttributedTextは属性付き文章の基本

 NSAttributedTextと聞くと難しそうですが、「Attribute=属性」、「Text=文章」なので日本語に訳せば「属性付きの文章」ということになります。 ですから、NSAttributedTextは属性付きの文章を扱うものだという理解ができます。ここまできたらほとんど理解したようなもので、あとはどのように文字に属性を追加すればいいのかということになります。

AttributedTextはTextViewでよく使用する

 NSAttributedTextは基本的にTextViewで使用します。TextViewを設置してSwiftファイルとプロパティを結合して使用します。

textview

@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を表示させることができます。

著者:安井 真人(やすい まさと)