2024/1/24

【Swift】NSAttributedStringの使い方！文字サイズや装飾を変更する

この記事からわかること

Swift/UIKitのNSAttributedStringの使い方
文字サイズや行間、デザインなどを装飾する方法
UILabelやUITextFieldのカスタマイズ方法
NSMutableParagraphStyleやNSMutableAttributedStringとは？

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.0
Swift：5.9
macOS：Sonoma 14.1

NSAttributedStringとは？

公式リファレンス：NSAttributedString

SwiftのNSAttributedStringはテキスト(文字)にサイズやスタイル、フォント、色、行間などの装飾を行うことができるクラスです。UILabelやUITextFieldなどのテキストのデザインをカスタマイズしたい時などに利用することができます。

使用するにはNSAttributedStringインスタンスを生成しUILabelなどのattributedTextプロパティに格納します。NSAttributedStringのイニシャライザには引数に装飾対象の文字列と装飾する属性を辞書形式で保持した[NSAttributedString.Key : Any]型で渡します。

一部抜粋
let attributedString = NSAttributedString(string: text, attributes: attributes)
〜〜〜〜〜〜〜〜
label.attributedText = attributedString

NSAttributedString.Keyの設定値

公式リファレンス：NSAttributedString.Key

NSAttributedString.Keyで設定できる属性は多岐にわたりますが、一部実装例を紹介しておきます。

let text = "Hello, World!"
// 適応させたい属性配列を用意
let attributes: [NSAttributedString.Key: Any] = [
    // フォント
    .font: UIFont.boldSystemFont(ofSize: 16),
    // 文字色
    .foregroundColor: UIColor.blue,
    // 背景色
    .backgroundColor: UIColor.gray,
    // 下線
    .underlineStyle: NSUnderlineStyle.single.rawValue,
    // 下線色
    .underlineColor: UIColor.red,
    // 斜体 0で無効/正数で右斜体/負数で左斜体
    .obliqueness: 0.2,
    // 文字の縁取りの太さ
    .strokeWidth : -4,
    // 縁取りの色
    .strokeColor : UIColor.orange
    // 文字の間隔
    .kern: 1.5,
    // 取り消し線
    .strikethroughStyle: NSUnderlineStyle.single.rawValue,
    // 取り消し線色
    .strikethroughColor: UIColor.white,
    // ベースラインからのオフセット
    .baselineOffset: 3.0,
    // リガチャ(合字) 2つの文字を1つとして表す 0：無効 1：デフォルト 2：全体に有効
    .ligature: 1,
    // リンク
    .link: URL(string: "https://appdev-room.com/")!,
    // 影 NSShadow().shadowColor = UIColor.black などを設定
    .shadow: NSShadow()
]

// NSAttributedStringインスタンスを生成
let attributedString = NSAttributedString(string: text, attributes: attributes)

// UILabelにセット
let label = UILabel()
label.center = self.view.center
label.frame = self.view.frame
label.attributedText = attributedString
self.view.addSubview(label)

NSMutableParagraphStyle

公式リファレンス：NSMutableParagraphStyle

NSAttributedString.KeyのparagraphStyleにはNSMutableParagraphStyle型で値を指定します。NSMutableParagraphStyleはテキストの段落のスタイルを装飾するためのクラスです。調整したいプロパティに値を渡してparagraphStyleに渡すことで反映されます。

let paragraphStyle = NSMutableParagraphStyle()
// 行間
paragraphStyle.lineSpacing = 4.0
// 段落間
paragraphStyle.paragraphSpacing = 10.0
// 最初の行のインテント
paragraphStyle.firstLineHeadIndent = 20.0
// 行全体のインテント
paragraphStyle.headIndent = 10.0
// 最後の行のインテント
paragraphStyle.tailIndent = -10.0
// 文字の方向
paragraphStyle.baseWritingDirection = .rightToLeft
// 行の高さ倍率
paragraphStyle.lineHeightMultiple = 1.5

let attributes: [NSAttributedString.Key: Any] = [
    .paragraphStyle: paragraphStyle
]

NSMutableAttributedStringとは？

文字の装飾を行うためのクラスにはNSMutableAttributedStringもあります。NSAttributedStringと基本的な使い方は同じですが、文字全体だけでなく一部分だけ装飾を変更したりすることができるようになるのでより柔軟な装飾を行うことが可能になります。

例えばHelloだけに対して装飾を施したい場合は以下のようになります。

let text = "Hello, World!"
        
let attributedString = NSMutableAttributedString(string: text)
let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.boldSystemFont(ofSize: 22),
    .foregroundColor: UIColor.blue
]
// 装飾を適応させる範囲をNSRangeで指定する
attributedString.addAttributes(attributes, range: NSRange(location: 0, length: 5))

let label = UILabel()
label.center = self.view.center
label.frame = self.view.frame
label.attributedText = attributedString
self.view.addSubview(label)

またNSMutableAttributedString同士を結合することができNSAttributedString型からも簡単にキャストすることが可能です。結合する際はappendメソッドを使用します。

let text = "Hello"
        
let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.boldSystemFont(ofSize: 22),
    .foregroundColor: UIColor.blue
]

let attributedText1 = NSAttributedString(string: text, attributes: attributes)

// NSAttributedString を NSMutableAttributedString へ変換
let mutableAttributedText = NSMutableAttributedString(attributedString: attributedText1)

let text2 = "World"

let attributes2: [NSAttributedString.Key : Any] = [
    .font : UIFont.systemFont(ofSize: 10.0),
    .foregroundColor : UIColor.gray,
]

let mutableAttributedText2 = NSMutableAttributedString(string: text2, attributes: attributes2)

// NSMutableAttributedString同士を結合する
mutableAttributedText.append(mutableAttributedText2)

// UILabelに表示する例
let label = UILabel()
label.center = self.view.center
label.frame = self.view.frame
label.attributedText = mutableAttributedText
self.view.addSubview(label)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift