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)でカラーの指定しています。