【SwiftUI】Textオブジェクトとモディファイア

本記事では、SwiftUIを使用してiosアプリを作成する際に頻繁に使用するTextオブジェクトの使用方法からTextをカスタマイズする便利なモディファイアまで紹介していきます。

1. Textオブジェクトとは
- 1.1. Textオブジェクトの作成
  - 1.1.1. 直接入力
  - 1.1.2. ライブラリパネルからドラッグ&ドロップ
2. Textオブジェクトで頻繁に使用するモディファイア
3. 最後に

Textオブジェクトとは

Textオブジェクトとは、画面上に文字列を表示することを可能にするための機能です。

画面上にTextオブジェクトを配置して、任意の文字列を入力するだけでiosアプリ上で文字列を表示させることができる非常に便利なオブジェクトです。

のちに紹介するモディファイアを組み合わせて使用することでデザインやレイアウトも自在に変更することができます。

Textオブジェクトの作成

オブジェクトを作成する際には、Textオブジェクトに関わらずいくつかの方法がございますので、今回は2つほど紹介します。

直接入力

まずは最もベーシックな方法である、直接Textオブジェクトを入力する方法です。Text()と記述して、()の中に表示したい文字列を記述していくだけです。

他の言語ですでにプログラムを経験している方には最も入りやすい方法です。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("今日はなんていい天気なんだ")
        }
        .padding()
    }
}

Vstackの中にText(“今日はなんていい天気なんだ”)をいれるだけで、プレビュー上に文字列が表示されることを確認できます。

ライブラリパネルからドラッグ&ドロップ

ライブラリパネルから追加する方法はまず、Xcodeのプロジェクト画面右上の「+」ボタンをクリックして、ライブラリパネルを開きます。

ライブラリパネルからTextを見つけたら、ソースコード上のTextオブジェクトを挿入したい行にドラッグ&ドロップすることでTextオブジェクトを挿入して扱うことができるようになります。

上記のように、ドラッグ&ドロップした後にText(“Placeholder”)といったようなソースコードが追加されていれば成功です。

この方法であれば、毎度ソースコードを記述しなくても気軽にオブジェクトを追加していくことができますのでぜひ活用してみてください。

Textオブジェクトで頻繁に使用するモディファイア

Textオブジェクトはそのまま配置しただけでは、ただの黒い文字列を決まった文字サイズで表示するだけです。そこでモディファイアを使用することで、色やサイズなどを変更して見やすいデザインやおしゃれなデザインに変更することができます。

文字サイズ

文字サイズは、fontモディファイアを使用して変更することができます。

text()の後ろにfontモディファイアをつけて、サイズを指定することで任意のサイズに変更することができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("フォントサイズ10").font(.system(size: 10))
            Text("フォントサイズ30").font(.system(size: 30))
            Text("フォントサイズ50").font(.system(size: 50))
        }
        .padding()
    }
}

実行結果はご覧の通りで、サイズが変わっていることが確認できました。

文字の太さ

文字の太さは.fontWeight()で設定することができます。

文字の太さを設定する際には.fontWeight()の括弧内で「.」を入力した後に文字の太さを表す単位の候補が表示されますのでその中から好みの太さを選択して適用することができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("文字の太さ").fontWeight(.light)
            Text("文字の太さ").fontWeight(.heavy)
            Text("文字の太さ").fontWeight(.thin)
            Text("文字の太さ").fontWeight(.black)
        }
        .padding()
    }
}

実行結果

文字色

文字色を変更する場合には、「foregroundColor()」を使用します。

()内でドット「.」を打つことで何種類かの色は名称が表示されるので色を指定することが可能です。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("赤色の文字").foregroundColor(.red)
            Text("青色の文字").foregroundColor(.blue)
            Text("緑色の文字").foregroundColor(.green)
        }
        .padding()
    }
}

実行結果

行数を制限する

テキスト内の文章が長くなってしまったが、行数は指定した長さに抑えたいという場合には、行数を指定することが可能です。なお、指定した行数を超えてしまう文章に関しては、「…」で省略されてしまう点には注意してください。

上の例に示す文章は3行に渡っていますが、.lineLimit()を使用することで行数を制限することができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("こんにちは。私の名前は田中です。身長は170cmで、体重は60kgです。趣味はサーフィンと映画鑑賞です。").lineLimit(2)
        }
        .padding()
    }
}

実行結果