いざ! SwiftUI - 4 表示部分の調整
Text and symbols
文字と画像の表示です。
Text()の表示です。モディファイアを使ってカスタマイズ。
Text("Hamlet")
.font(.largeTitle)
Text("by William Shakespeare")
.font(.caption)
.italic()
上の"Hamlet"は.font(.largeTitle)でフォントを大きくします。下の"by William Shakespeare"は.font(.caption)で少し小さく、.italic()でイタリックの書体にしています。
Symbols
SF Symbols などを使って絵文字の表示ができます。
HStack {
Image(systemName: "folder.badge.plus")
Image(systemName: "heart.circle.fill")
Image(systemName: "alarm")
}
.symbolRenderingMode(.multicolor)
.font(.largeTitle)
ここではHStackを使って横並びにして、.symbolRenderingMode(.multicolor)でカラーリング。.font(.largeTitle)でフォントの大きさの調整。
Labels
ラベル。テキストと同じように文字の表示ができます。違うところはアイコンを一緒に簡単に表示できるところです。
Label("Favorite Books", systemImage: "books.vertical")
.labelStyle(.titleAndIcon)
.font(.largeTitle)
文字"Favorite Books"にアイコン"books.vertical"という感じです。
Images and shapes
Images
画像の表示です。
Image("Yellow_Daisy")
.resizable()
.scaledToFit()
.resizable()で大きさを変えることができるようになります。.scaledToFit()で大きさを画面の大きさにピッタリくるように合わせます。
Shapes
四角、丸などを表示することができます。 Rectangle()四角。Circle()丸。RoundedRectangle角丸の四角。
HStack {
Rectangle()
.foregroundColor(.blue)
Circle()
.foregroundColor(.orange)
RoundedRectangle(cornerRadius: 15, style: .continuous)
.foregroundColor(.green)
}
.aspectRatio(3.0, contentMode: .fit)
.foregroundColor(.blue)でカラーの指定しています。
この記事が気に入ったらサポートをしてみませんか?