【SwiftUI】テキストの配置と書式の変更について – アプリ開発

• SwiftUIのプロジェクトの作成方法です。
  【SwiftUI】プロジェクトの作成 – アプリ開発
• SwiftUIの勉強方法に関する記事です。
  SwiftUIでアプリ開発を始める時の勉強法。どうする？

iOS/macOS UIフレームワーク SwiftUIプログラミング

1. テキストの配置の仕方について

SwiftUIのプロジェクトを作成するとContentView.swiftの中に、”Hello, world!”というテキストがすでに書いてあると思います。

Text(“Hello, world!”)と同じように、”some View{}“の中に配置したいテキストを書いてあげればテキストの配置を行うことができます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

次の章から、テキストのフォントのカスタマイズ方法について解説していきます。

2. テキストのフォントサイズの変更について

実際に実装して確認してみましょう。

文字で指定する場合、数字でサイズ指定する場合、フォントの種類とサイズを指定する場合の順でコードを書いています。

ちなみに縦一列に表示させるために”VStack”を使用していますが、”VStack”については後日解説します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
　　　　　　　Text("Hello, world![.largeTitle]")
                .font(.largeTitle)
            Text("Hello, world![.title]")
                .font(.title)
            Text("Hello, world![.headline]")
                .font(.headline)
            Text("Hello, world![.body]")
                .font(.body)
            Text("Hello, world![.callout]")
                .font(.callout)
            Text("Hello, world![.subheadline]")
                .font(.subheadline)
            Text("Hello, world![.footnote]")
                .font(.footnote)
            Text("Hello, world![.caption]")
                .font(.caption)
            Text("Hello, world![.system(size: 10.0)]")
                .font(.system(size: 10.0))
            Text("Hello, world![.custom(\"Arial\", size: 10.0)")
                .font(.custom("Arial", size: 10.0))
        }
    }
}

プレビューで実行した結果は以下になります。

それぞれの指定の仕方によって、いろいろな種類のサイズ変更が出来ているのが分かりますね。

実際にコードを書くと以下のようになります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
　　　　　　　Text("Hello, world![.blue]")
                .foregroundColor(.blue)
            Text("Hello, world![.yellow]")
                .foregroundColor(.yellow)
            Text("Hello, world![.red]")
                .foregroundColor(.red)
            Text("Hello, world![.green]")
                .foregroundColor(.green)
            Text("Hello, world![.purple]")
                .foregroundColor(.purple)
        }
    }
}

ちなみにどのような色を指定できるか分からない場合は”.”まで打つと色の候補が出てくるので、出てきた候補から入力したい色を選択すれば良いです。

プレビューで表示した結果は以下になります。

次は背景色の変更の仕方について解説します。

背景色の変更は以下のメソッドを使用します。

実際にコードを書くと以下のようになります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Text("Hello, world![.blue]")
                .background(Color.blue)
            Text("Hello, world![.yellow]")
                .background(Color.yellow)
            Text("Hello, world![.red]")
                .background(Color.red)
            Text("Hello, world![.green]")
                .background(Color.green)
            Text("Hello, world![.purple]")
                .background(Color.purple)
        }
    }
}

プレビューで表示した結果は以下になります。

4. テキストの太さの変更について

最後にテキストの太さの変更について解説します。

太さの変更はワードなどでも馴染みのある”bold”をメソッドとして使用するか、”fontWeight”というメソッドを使用します。

実際にコードを書くと以下のようになります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Text("Hello, world![.bold()]")
                .bold()
            Text("Hello, world![.fontWeight(.ultraLight)]")
                .fontWeight(.ultraLight)
            Text("Hello, world![.fontWeight(.thin)]")
                .fontWeight(.thin)
            Text("Hello, world![.fontWeight(.light)]")
                .fontWeight(.light)
            Text("Hello, world![.fontWeight(.regular)]")
                .fontWeight(.regular)
            Text("Hello, world![.fontWeight(.medium)]")
                .fontWeight(.medium)
            Text("Hello, world![.fontWeight(.semibold)]")
                .fontWeight(.semibold)
            Text("Hello, world![.fontWeight(.bold)]")
                .fontWeight(.bold)
            Text("Hello, world![.fontWeight(.heavy)]")
                .fontWeight(.heavy)
            Text("Hello, world![.fontWeight(.black)]")
                .fontWeight(.black)
        }
    }
}

プレビューで表示した結果は以下になります。

5. まとめ

テキストの配置の仕方と書式の変更方法を解説してきました。

サイズの変更の仕方一つでも複数のやり方があるので

それぞれの方法を覚えて、開発の際は最適な方法を選択するようにしましょう。