Swiftで行間を簡単調整！たった10の方法

はじめに
●Swiftのテキスト行間とは
- ○行間の基本理解
●Swiftでの行間調整の基本的な方法
- ○サンプルコード1：UILabelの基本的な行間調整
- ○サンプルコード2：NSAttributedStringを使用した行間調整
●Swiftでの行間調整の応用方法
●行間調整の際の注意点と対処法
- ○行間を過度に大きくするリスク
- ○行間調整時のテキストの見切れ問題の対処
  - □動的にビューの高さを変更する
  - □テキストがはみ出した場合の表示方法を変更する
●カスタマイズ方法
まとめ

はじめに

Swiftでのテキスト行間調整に関心を持つことは、アプリ開発者としてのセンスを向上させる大きな一歩と言えます。

この記事を読めば、Swiftでの行間調整を10の方法で習得し、ユーザーにより良い読み物体験を提供できるようになります。

●Swiftのテキスト行間とは

テキストの行間、または「行のスペース」とは、テキストの各行の間の空白のことを指します。

これを調整することで、テキストがどれだけ読みやすくなるのか、またはデザイン的にどれだけ美しく見えるのかが大きく変わります。

○行間の基本理解

Swiftでのテキスト表示には主にUILabelが使用されます。

このUILabelにはテキストの行間を調整するための属性やメソッドが提供されていますが、正確にはNSAttributedStringを介して行間を調整することが一般的です。

具体的には、NSParagraphStyleのlineSpacingプロパティを使用して行間を調整することができます。

このlineSpacingは、行のベースライン間の最小のスペースとして定義されます。

このコードではUILabelの行間を調整する基本的な例を紹介しています。

この例では、NSAttributedStringを使ってUILabelの行間を10ポイントに設定しています。

let label = UILabel()
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 10 // 行間を10ポイントに設定

let attributedString = NSAttributedString(string: "Swiftでの行間調整方法を学ぼう！", attributes: [NSAttributedString.Key.paragraphStyle: paragraphStyle])

label.attributedText = attributedString

このようにコードを実行すると、指定したテキストが10ポイントの行間でUILabelに表示されます。

行間を調整することで、テキストが読みやすくなり、アプリの利用者にとって快適な読書体験を提供できます。

●Swiftでの行間調整の基本的な方法

Swiftにはテキストの行間を調整するための様々な方法が存在します。

特に初心者の方々には、一番簡単で直感的な方法をおすすめします。

ここでは、Swiftでの行間調整の基本的な方法を2つ、具体的に解説していきます。

○サンプルコード1：UILabelの基本的な行間調整

最もシンプルな方法として、UILabelを使用して行間を調整する方法を見ていきましょう。

この方法は初心者の方でも簡単に取り組むことができます。

このコードでは、UILabelのテキストの行間を調整する基本的な手法を紹介しています。

この例では、UILabelの属性テキストを利用して、行間を指定した値に設定しています。

let label = UILabel()
label.numberOfLines = 0  // 複数行表示を許可
label.frame = CGRect(x: 0, y: 0, width: 300, height: 200)

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 10 // 行間を10ポイントに設定

let attributedText = NSMutableAttributedString(string: "Swiftは非常に人気のあるプログラミング言語です。\n行間を調整する方法を学ぶことで、UIの質を向上させることができます。")
attributedText.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range: NSRange(location: 0, length: attributedText.length))

label.attributedText = attributedText

UILabelに表示されるテキストの行間が10ポイントになります。

この方法はシンプルであり、UILabelの行間を素早く調整したい場合に便利です。

○サンプルコード2：NSAttributedStringを使用した行間調整

次に、NSAttributedStringを使用した方法を見ていきます。

NSAttributedStringはテキストのスタイルや属性を詳細に制御するためのクラスで、行間だけでなく文字間の調整も可能です。

このコードではNSAttributedStringを使ってUILabelの行間と文字間を同時に調整する方法を紹介しています。

この例では、行間を10ポイント、文字間を2ポイントに設定しています。

let label = UILabel()
label.numberOfLines = 0
label.frame = CGRect(x: 0, y: 0, width: 300, height: 200)

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 10  // 行間を10ポイントに設定

let attributedText = NSMutableAttributedString(string: "Swiftは非常に人気のあるプログラミング言語です。\n行間と文字間を調整することで読みやすさを向上させることができます。")
attributedText.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range: NSRange(location: 0, length: attributedText.length))
attributedText.addAttribute(NSAttributedString.Key.kern, value: 2.0, range: NSRange(location: 0, length: attributedText.length-1))  // 文字間を2ポイントに設定

label.attributedText = attributedText

UILabelに表示されるテキストは、行間が10ポイント、文字間が2ポイントとなります。

テキストの表示を細かく制御したい場合や、デザイン上の要求が厳しい場合に、この方法が有効です。

●Swiftでの行間調整の応用方法

Swiftでテキストの行間を調整する際、基本的な方法だけでなく、もっと進んだ応用的な手法も存在します。

応用的な手法を使うことで、ユーザーの操作に応じた動的な行間調整や、テキストの特定の範囲だけ行間を変更するといった柔軟なカスタマイズが可能になります。

ここでは、応用的な行間調整の手法をいくつか紹介していきます。

○サンプルコード3：行間を動的に変更する

テキストの行間を動的に変更するための方法を紹介します。

この例では、スライダーの値に応じてUILabelの行間が変わる仕組みを作成しています。

import UIKit

class ViewController: UIViewController {
    let label = UILabel()
    let slider = UISlider()

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabelの設定
        label.numberOfLines = 0
        label.frame = CGRect(x: 20, y: 50, width: 300, height: 200)
        label.text = "Swiftは素晴らしい言語です。\n行間を動的に変更するデモを実施中。"
        self.view.addSubview(label)

        // スライダーの設定
        slider.frame = CGRect(x: 20, y: 300, width: 280, height: 40)
        slider.minimumValue = 0
        slider.maximumValue = 50
        slider.addTarget(self, action: #selector(sliderChanged(_:)), for: .valueChanged)
        self.view.addSubview(slider)
    }

    @objc func sliderChanged(_ sender: UISlider) {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = CGFloat(sender.value)
        let attributes = [NSAttributedString.Key.paragraphStyle: paragraphStyle]
        label.attributedText = NSAttributedString(string: label.text!, attributes: attributes)
    }
}

このコードでは、スライダーを動かすことでUILabelのテキストの行間が変更される機能を実現しています。

スライダーを左に動かすと行間が狭く、右に動かすと行間が広くなります。

○サンプルコード4：特定の範囲の行間だけ変更する

Swiftでは、テキスト全体の行間だけでなく、テキストの特定の範囲だけ行間を変更することもできます。

このような機能は、一部のテキストに強調を加えたい時などに便利です。

このコードでは、特定の範囲の行間だけを変更する方法を表しています。

この例では、「行間」の部分だけ行間を拡張しています。

import UIKit

class ViewController: UIViewController {
    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabelの設定
        label.numberOfLines = 0
        label.frame = CGRect(x: 20, y: 50, width: 300, height: 200)
        self.view.addSubview(label)

        let text = "Swiftでの行間調整は非常に柔軟です。特定の範囲の行間だけ変更することも可能です。"
        let attributedText = NSMutableAttributedString(string: text)

        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = 20  // 行間を20ポイントに設定

        // 「行間」の部分だけ行間を変更
        if let range = text.range(of: "行間") {
            attributedText.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range: NSRange(range, in: text))
        }

        label.attributedText = attributedText
    }
}

このコードを実行すると、「行間」という単語の部分の行間だけが20ポイントに設定されることが確認できます。

○サンプルコード5：ボタンアクションで行間を変更する

Swiftを使って行間を調整する方法の中で、ボタンを利用してユーザーがインタラクティブに行間を変更できるようにする手法について解説します。

この例では、ボタンをクリックすることでテキストの行間が変わる仕組みを実装します。

ユーザビリティを考慮し、UILabelの行間を直感的に変更できるアクションを提供することが目的です。

import UIKit

class ViewController: UIViewController {
    let label = UILabel()
    let changeSpacingButton = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabelの初期設定
        label.frame = CGRect(x: 20, y: 50, width: 300, height: 200)
        label.numberOfLines = 0
        label.text = "Swiftでの行間調整。ボタンをクリックして行間を変更してみてください。"
        self.view.addSubview(label)

        // ボタンの設定
        changeSpacingButton.frame = CGRect(x: 20, y: 270, width: 280, height: 40)
        changeSpacingButton.setTitle("行間変更", for: .normal)
        changeSpacingButton.backgroundColor = .blue
        changeSpacingButton.addTarget(self, action: #selector(changeLineSpacing), for: .touchUpInside)
        self.view.addSubview(changeSpacingButton)
    }

    @objc func changeLineSpacing() {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = 15  // 行間を15ポイントに変更
        let attributes = [NSAttributedString.Key.paragraphStyle: paragraphStyle]
        label.attributedText = NSAttributedString(string: label.text!, attributes: attributes)
    }
}

このコードでは、ボタン「行間変更」をクリックすると、UILabelの行間が15ポイントになる仕組みを表しています。

初期状態では行間はデフォルトのままですが、ボタンをクリックすることで行間が変更されます。

○サンプルコード6：スライダーで行間をリアルタイム調整

スライダーを使用して、リアルタイムで行間を調整する方法について説明します。

ユーザーはスライダーを動かすだけで、UILabelの行間を即座に調整することができます。

import UIKit

class ViewController: UIViewController {
    let label = UILabel()
    let slider = UISlider()

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabelの設定
        label.numberOfLines = 0
        label.frame = CGRect(x: 20, y: 50, width: 300, height: 200)
        label.text = "Swiftでの行間調整。スライダーを動かして行間をリアルタイムで調整してみてください。"
        self.view.addSubview(label)

        // スライダーの設定
        slider.frame = CGRect(x: 20, y: 300, width: 280, height: 40)
        slider.minimumValue = 0
        slider.maximumValue = 50
        slider.addTarget(self, action: #selector(sliderChanged(_:)), for: .valueChanged)
        self.view.addSubview(slider)
    }

    @objc func sliderChanged(_ sender: UISlider) {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = CGFloat(sender.value)
        let attributes = [NSAttributedString.Key.paragraphStyle: paragraphStyle]
        label.attributedText = NSAttributedString(string: label.text!, attributes: attributes)
    }
}

上記のコードでは、スライダーを動かすことでUILabelの行間がリアルタイムに変わる仕組みを表しています。

スライダーの値が0の時は行間は通常のまま、50になると行間が最大になります。

○サンプルコード7：複数の行間スタイルを組み合わせる

Swiftでは、同じテキスト内で複数の行間スタイルを組み合わせることも可能です。

これにより、異なる行間を持つテキストブロックを1つのUILabel内に表示することができます。

import UIKit

class ViewController: UIViewController {
    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()

        // UILabelの設定
        label.numberOfLines = 0
        label.frame = CGRect(x: 20, y: 50, width: 300, height: 200)
        self.view.addSubview(label)

        let text = "この部分は通常の行間です。\n\nこの部分は行間が広いです。"
        let attributedText = NSMutableAttributedString(string: text)

        let wideSpacingStyle = NSMutableParagraphStyle()
        wideSpacingStyle.lineSpacing = 20

        if let range = text.range(of: "この部分は行間が広いです。") {
            attributedText.addAttribute(NSAttributedString.Key.paragraphStyle, value: wideSpacingStyle, range: NSRange(range, in: text))
        }

        label.attributedText = attributedText
    }
}

このコードでは、「この部分は行間が広いです。」の部分の行間だけを20ポイントに設定しています。

これにより、一部のテキストにだけ強調を加えることができます。

●行間調整の際の注意点と対処法

Swiftでテキストの行間を調整する際には、多くの便利な方法がありますが、それに伴いいくつかの注意点や問題が生じる可能性があります。

ここでは、行間を調整する際の主要なリスクとその対処法について詳しく解説していきます。

○行間を過度に大きくするリスク

行間を大きくすることは、読みやすさを向上させるための効果的な手段の一つです。

しかし、過度に行間を大きくすると、テキストが散らかって見えたり、ページ内の情報量が少なく感じられたりすることがあります。

特にモバイルデバイスなどの小さい画面で表示された場合、スクロールの回数が増え、ユーザーの読み取り効率が低下する可能性が考えられます。

このようなリスクを避けるためには、次の点を注意してください。

行間は文書全体のバランスを考慮しながら適切に設定すること。
ユーザーが行間を自分で調整できるようにすることで、自分の読みやすい行間に設定できるようにする。

○行間調整時のテキストの見切れ問題の対処

行間を調整することで、UILabelやUITextViewなどのビューの高さが固定されている場合、テキストがビューからはみ出してしまうことが考えられます。

このような状況は、ユーザーがテキストの全容を正確に把握するのを阻害します。

この問題を解消するための方法としては、次のような対策が考えられます。

□動的にビューの高さを変更する

テキストの量や行間に応じてビューの高さを動的に変更することで、テキストがはみ出す問題を防ぐことができます。

let contentSize = label.sizeThatFits(label.bounds.size)
label.frame = CGRect(x: label.frame.origin.x, y: label.frame.origin.y, width: contentSize.width, height: contentSize.height)

このコードでは、UILabelのsizeThatFitsメソッドを利用して、テキストの内容と行間に合わせた適切なサイズを計算し、そのサイズにUILabelのフレームを変更しています。

□テキストがはみ出した場合の表示方法を変更する

UILabelのlineBreakModeプロパティを利用して、テキストがはみ出した場合の挙動を変更することができます。

例えば、lineBreakModeを.truncateTailに設定すると、テキストの末尾が省略表示されます。

label.lineBreakMode = .truncateTail

このコードを実行すると、UILabelのテキストがはみ出した場合、末尾が「…」という形で省略表示されます。

●カスタマイズ方法

Swiftでテキストの行間を調整する場合、標準的な方法だけでなく、さまざまなカスタマイズ方法が存在します。

カスタマイズにより、更に細やかな調整や特定のライブラリを使用した高度な調整が可能となります。

ここでは、Swiftでの行間調整のカスタマイズ方法を詳しく解説していきます。

○サンプルコード8：カスタムクラスを作成して行間を調整する

一度設定した行間のスタイルを再利用したい場合、カスタムクラスを作成すると便利です。

このコードではカスタムUILabelクラスを作成し、行間のスタイルを設定しています。

class CustomSpacingLabel: UILabel {

    // 行間の値
    var lineSpacing: CGFloat = 0.0 {
        didSet {
            updateTextAttributes()
        }
    }

    private func updateTextAttributes() {
        guard let labelText = self.text else { return }
        let attributedString = NSMutableAttributedString(string: labelText)
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = lineSpacing
        attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSRange(location: 0, length: labelText.count))
        self.attributedText = attributedString
    }
}

この例では、CustomSpacingLabelという名前のUILabelのサブクラスを作成し、lineSpacingというプロパティを持たせています。

このプロパティに値を設定することで、行間が動的に変わる仕組みとなっています。

○サンプルコード9：外部ライブラリを使用した行間調整

外部ライブラリを利用することで、簡単に行間を調整することも可能です。

ここでは、Swiftのライブラリ管理ツールであるCocoaPodsを利用して、外部ライブラリ「TextAttributes」を導入し、行間を調整します。

まず、CocoaPodsを利用して「TextAttributes」をインストールします。

pod 'TextAttributes'

次に、ライブラリを使用して行間を調整するコードを記述します。

import TextAttributes

let attributes = TextAttributes()
    .lineSpacing(10)
label.attributedText = NSAttributedString(string: "Swiftで行間を調整する", attributes: attributes)

この例では、TextAttributesライブラリを利用して10ポイントの行間を設定しています。

○サンプルコード10：行間と文字間の同時調整

行間だけでなく、文字間（字間）も同時に調整したい場合の方法について紹介します。

NSAttributedStringの属性を使うことで、簡単に行間と文字間の調整ができます。

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 10 // 行間の設定

let attributes: [NSAttributedString.Key: Any] = [
    .paragraphStyle: paragraphStyle,
    .kern: 1.5 // 文字間の設定
]

let attributedString = NSAttributedString(string: "Swiftのテキスト調整", attributes: attributes)
label.attributedText = attributedString

この例では、行間を10ポイント、文字間を1.5ポイントとして設定しています。

このように、Swiftを使ってテキストの行間や文字間を細かく調整することができます。