画像を表示する
Published by @SoNiceInfo at 6/24/2020
画像を表示するにはImage()を使います。
表示したい画像はあらかじめAssets.xcassetsにいれて準備します。
Assets.xassetsに画像を入れる
アプリで使用する画像はプロジェクト内のAssets.xassetsにいれます。Assets.xassetsを開いたら上画像の中央白い部分に画像をドラッグドロップで投入すれば保存できます。1x, 2x, 3xとあるのでそれぞれの倍率にあった大きさの画像をいれます。 まずは1xだけにいれれば使用可能です。
ここではmoonという名前で月の画像を保存しています。次のセクションでmoonを呼び出します。
画像を表示する
画像を表示するにはImage()を使います。
画像サイズを変更するにはresizable()をしてからframe()で変更します。
縦横のアスペクト比を保ったままリサイズするにはscaledToFit()を使います。
さらに、ImageはViewプロトコルに準拠しているのでその修飾子が利用できます。
ここでは3種類の画像表示をします。
1つ目はImage()で先に保存したmoonを呼び出しました。画像サイズが画面より大きいとアスペクト比を保って画面サイズで縮小されます。
2つ目はアスペクト比を保って縦横どちらかの長さが100になるように縮小しています。
3つ目はアスペクト比を保って縮小した上で、幅4の白い円で囲い、長さ10の影をつけています。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image("moon")
Image("moon")
.resizable()
.scaledToFit()
.frame(width: 100.0, height: 100.0, alignment: .leading)
Image("moon")
.resizable()
.scaledToFit()
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
.frame(width: 200.0, height: 200.0, alignment: .leading)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
その他
Appleの端末に標準で搭載されているアイコンを呼び出すのもImageを使います。
詳しくはSF Symbolsを使うで紹介しています。
