いざ！ SwiftUI - 5 テキストの見せ方

Scaling views to complement text | Apple Developer Documentation

アップルのページでは"PreviewProvider"を使っていますが、この記事では別ファイルで管理する方法で書いていきます。

KeywordBubbleDefaultPadding.swiftには

struct KeywordBubbleDefaultPadding: View {
    let keyword: String
    let symbol: String
    var body: some View {
        Label(keyword, systemImage: symbol)
            .font(.title)
            .foregroundColor(.white)
            .padding()
            .background(.purple.opacity(0.75), in: Capsule())
    }
}

ContentView.swiftには

struct ContentView:View{
    static let keywords = ["chives", "fern-leaf lavender"]    
    var body: some View {        
        VStack {            
            ForEach(ContentView.keywords, id: \.self) { word in                
                KeywordBubbleDefaultPadding(keyword: word, symbol: "leaf")                
            }            
        }        
    }
}

という感じで実行させます。

こんな感じでチュートリアルと同じように表示することができます。アプリを作る場合は雛形を作っておいてデータを別画面でデータを入れて表示させるという形を取ることが多いと思います。

"Label()"はtextとsymbolを同時に表示できるようにしたものです。

Label(キーワード, systemImage: 画像など)

キーワードと画像などを指定すれば自動で整列します。

画像などですが"systemImage"の場合はSF Symbolsを使うことができます。jpegなどの画像を使う場合は"image"を使います

カスタマイズはモディファイアで

.font(.title)　　・・・　文字の大きさ
.foregroundColor(.white)　・・・文字色
.padding()　・・・余白
.background(.purple.opacity(0.75), in: Capsule())・・・背景色、透過度、形

ここでfontの大きさは"title"となっていて微妙な大きさの調整ができません。そこで、"ScaledMetric"を使うことで数字でダイレクトに指定することができます。

 ".title"に対して

   @ScaledMetric(relativeTo: .title) var paddingWidth = 14.5

を追加します。

全てのコードは

struct KeywordBubbleDefaultPadding: View {
    let keyword: String
    let symbol: String
    @ScaledMetric(relativeTo: .title) var paddingWidth = 14.5
    var body: some View {
        Label(keyword, systemImage: symbol)
            .font(.title)
            .foregroundColor(.white)
            .padding(paddingWidth)
            .background(.purple.opacity(0.75), in: Capsule())
    }
}

paddingに変数に @ScaledMetric定義したpaddingWidthを入れます。

.padding(paddingWidth)

var paddingWidth = 14.5

14.5の数字をいろいろ変えると余白のサイズが変わります。

例えば

var paddingWidth = 30

とすると

となります。