いざ! SwiftUI - 5 テキストの見せ方
アップルのページでは"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を同時に表示できるようにしたものです。
キーワードと画像などを指定すれば自動で整列します。
画像などですが"systemImage"の場合はSF Symbolsを使うことができます。jpegなどの画像を使う場合は"image"を使います
カスタマイズはモディファイアで
ここで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を入れます。
14.5の数字をいろいろ変えると余白のサイズが変わります。
例えば
とすると
となります。
この記事が気に入ったらサポートをしてみませんか?