Image – SwiftUI

サイズを調整してみる

SwiftUIは、モディファイアを使うと拡大縮小ができます。

    var body: some View {
        VStack(spacing: 20) {
            VStack {
                Text("デフォルト 縦：100 横：100")
                Text("resizable を指定していないため、Image は本来のサイズのまま表示される")
                    .font(.caption)
                Image(systemName: "person.3.sequence")
                    .background(.secondary)
                    .frame(width: 100, height: 100)
                    .background(.blue)
            }

            VStack {
                Text("scaledToFill 縦：100 横：100")
                Text("アスペクト比を保持したまま frame を埋めるように拡大縮小し、はみ出した部分もそのまま描画される")
                    .font(.caption)
                    .lineLimit(nil)
                    .fixedSize(horizontal: false, vertical: true)
                Image(systemName: "person.3.sequence")
                    .resizable()
                    .scaledToFill()
                    .background(.secondary)
                    .frame(width: 100, height: 100)
                    .background(.blue)
            }

            VStack {
                Text("scaledToFill + clipped 縦：100 横：100")
                Text("アスペクト比を保持したまま frame を埋め、frame からはみ出した部分は切り取って表示する")
                    .font(.caption)
                    .lineLimit(nil)
                    .fixedSize(horizontal: false, vertical: true)
                Image(systemName: "person.3.sequence")
                    .resizable()
                    .scaledToFill()
                    .background(.secondary)
                    .frame(width: 100, height: 100)
                    .background(.blue)
                    .clipped()
            }

            VStack {
                Text("scaledToFit 縦：100 横：100")
                Text("アスペクト比を保持したまま frame 内に収まるよう拡大縮小する（余白が出る場合がある）")
                    .font(.caption)
                    .lineLimit(nil)
                    .fixedSize(horizontal: false, vertical: true)
                Image(systemName: "person.3.sequence")
                    .resizable()
                    .scaledToFit()
                    .background(.secondary)
                    .frame(width: 100, height: 100)
                    .background(.blue)
            }
            
            Text("※ frame は表示領域、scaledToFit / Fill はその領域への収め方を指定する")
                .font(.footnote)
                .foregroundStyle(.secondary)
        }
        .padding(.horizontal)
    }

アセットライブラリから画像を表示する

アセットライブラリに画像を設定する

    var body: some View {
        // "swift"は、アセットライブラリの名称
        Image("swift")
        // ↓でも同じ動作するが冗長
        Image(uiImage: UIImage(named: "swift")!)
    }

システムシンボルイメージを表示する

    var body: some View {
        Image(systemName: "pencil")
    }

シンボルイメージは、SF Symbol から確認できます。

SF Symbols - Apple Developer

SF Symbols 7のライブラリには6,900を超えるシンボルが用意されており、AppleプラットフォームのシステムフォントであるSan Franciscoとシームレスに統合できるようデザインされています。

developer.apple.com