HOME » Natsu note » iOS » [iOS 7] NSAttributedStringによる下線、取り消し線

[iOS 7] NSAttributedStringによる下線、取り消し線 2013/12/10/|iOS, ,

iOS 7が正式に公開されてから、あっという間に数ヶ月が経ちました。すでにiOS 7ライクなUIの方が見ていて落ち着くようになり、iOS 6までのUIは古くさく感じてしまう今日この頃です。アプリのアップデートが追いついていないので焦りつつも、ここ数ヶ月はせっせと執筆作業に励んでおりました(本記事の最後で紹介します)。私と同じく、これから慌ててiOS 7対応をしようとしている方のためにも、ここでiOS 7関連の記事を少しずつ書いていこうと思います。

今回は、地味な機能だけど知っていると便利な属性付き文字列(NSAttributedString)についてです。

属性付き文字(NSAttributedString)とは

その名の通り、属性を用いて文字を装飾します。属性は辞書により設定し、生成した文字列はUILabelやUITextField, UITextViewなどで利用可能です。フォントや文字の色、リガチャ、カーニングの設定だけでなく、画像やリンクを埋め込むこともできます。以下に使用例を示します。

NSDictionary *attributes = @{NSForegroundColorAttributeName: [UIColor redColor]};
NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString:self.label.text
                                                                     attributes:attributes];
self.label.attributedText = attributedText;

これで、labelに表示する文字を赤くすることができます。ここでは、attributesに一つの属性しか設定していませんが、複数の属性を同時に設定することも可能です。

下線、取り消し線に関する属性

iOS 7ではNSAttributedStringに多くの属性が追加されています。その中で、今回は文字に下線や取り消し線を付けるための属性を紹介します。関連のある属性は以下の4つです。

  • NSUnderlineStyleAttributeName: 下線のスタイル
  • NSStrikethroughStyleAttributeName: 取り消し線のスタイル
  • NSUnderlineColorAttributeName: 下線の色
  • NSStrikethroughColorAttributeName: 取り消し線の色

ここで、スタイルは後述するNSUnderlineStyleを利用して設定します(NSNumberオブジェクト)。色はUIColorのオブジェクトで設定し、nilを設定すると文字色と同じ色が使われます。

下線・取り消し線のスタイル(NSUnderlineStyle)

iOS 6までは単一線しか引けなかった下線と取り消し線ですが、iOS 7では様々なスタイルが利用可能となっています。iOS 7で利用できるスタイルは以下になります。

  • NSUnderlineStyleNone (0x00): なし
  • NSUnderlineStyleSingle (0x01): 単一線
  • NSUnderlineStyleThick (0x02): 太線
  • NSUnderlineStyleDouble (0x09): 二重線
  • NSUnderlinePatternSolid (0x0000): 実線
  • NSUnderlinePatternDot (0x0100): 点線
  • NSUnderlinePatternDash (0x0200): 破線(鎖線)
  • NSUnderlinePatternDashDot (0x0300): 一点鎖線
  • NSUnderlinePatternDashDotDot (0x0400): 二点鎖線
  • NSUnderlineByWord (0x8000): 単語の下のみ

値を見てもわかるように、xxxStyle, xxxPattern, xxxByWordはOR加算して使います。

例として、太い点線を単語の下にのみ引く場合の属性の作り方を以下に示します。この例では、さらに下線の色をオレンジに、文字色を青にしています。

NSDictionary *attributes = @{NSUnderlineStyleAttributeName: @(NSUnderlineStyleThick |
                                                              NSUnderlinePatternDot |
                                                              NSUnderlineByWord),
                             NSUnderlineColorAttributeName: [UIColor orangeColor],
                            NSForegroundColorAttributeName: [UIColor blueColor]};

実行結果は以下のようになります。

underline sample by NSAttributedString

続いて、太い点線を使った二重取り消し線の例です。取り消し線の色は赤にします。

NSDictionary *attributes = @{NSStrikethroughStyleAttributeName: @(NSUnderlineStyleThick |
                                                                  NSUnderlineStyleDouble |
                                                                  NSUnderlinePatternDash),
                             NSStrikethroughColorAttributeName: [UIColor redColor]};

実行結果は以下のようになります。

strikethrough sample by NSAttributedString

このように、NSAttributedStringを利用すると文字の修飾が簡単にできます。

Text Kitの利用

iOS 7では、高度なテキスト表現を可能とするために「Text Kit」と呼ばれるフレームワークが追加されています。NSAttributedStringの拡張もここに含まれます。Text Kitを利用することで、ここで紹介した属性付き文字による簡単な文字修飾から、画像やリンクの埋め込み、さらにはマルチカラムレイアウトや動的な属性変更などをも可能としてくれます。そして、その方法は非常にシンプルなのです。これらの内容については、以下で紹介する書籍にて解説しています。ぜひ参考にしてみてください。

「上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編」(宣伝)

iOS 7の変化は非常に大きく、既存アプリをアップデートさせるのも、iOS 7ライクな新アプリを作るのも、決して簡単なことではありません。本書では、iOS 7の中でも特に重要な項目について書かれています。これからのアプリ開発にぜひ役立てていただければと思います。

目次:
Chapter 01 iOS 7の新機能
Chapter 02 画面遷移
Chapter 03 UIKit Dynamics
Chapter 04 Text Kit
Chapter 05 マルチタスキング・通信
Chapter 06 Sprite Kit
Chapter 07 拡張機能
Appendix

私は、2章(画面遷移)、3章(UIKit Dynamics)、4章(Text Kit: 一部)、7章(拡張機能: 一部)を執筆させていただきました。

iOS 7対応の書籍はすでに何冊かありますが、ここまでiOS 7の新機能、拡張機能に焦点を絞った本はまだないのではないでしょうか(あったら教えてください!)。12月20日発売予定です。Amazonで予約可能です。冬休みを利用してiOS 7をマスターしたい方に是非おすすめします。