今回はAssetsに入れた画像をSwiftUIで表示してみたいと思います。
画像を表示させる
基本
画像の表示だけなら以下のコードでOKです。
Image("IMG_6599")
IMG_6599のところにはAssetsにセットしたときの名前を入れてください。
画像がプレビューの画面よりも大きいので、なんのこっちゃわからない状態で表示されてしまいました。
切り取り
画面いっぱいに広がっている画像を切り取ってみましょう。
切り取るにはフレームのサイズを指定します。
Image("IMG_6599") .frame(width: 300, height: 300) .clipped()
.frame()で高さと横幅を指定します。
その後に.clipped()を書くことで切り取ります。
今回は300×300の正方形に切り取りました。
指定した大きさで切り取れました。
元の画像のサイズから一部を切り取っただけなので、まだ何の画像かわかりませんね。
フレームのサイズにリサイズした画像を表示
それでは先ほど大きさを指定したフレームいっぱいに画像を表示させてみましょう。
Image("IMG_6599") .resizable() .frame(width: 300, height: 300) .clipped()
.frame()の前に.resizable()を追加してください。
SwiftUIでは.resizable()で画像の大きさを変更できるようにするみたいです。
必ずフレームサイズを指定する前に追加しないとエラーが出ます。
フレームサイズに合わせて画像が表示されましたね。
中野サンプラザの写真だということがわかりました。
下斜めの構図のおかげであまり違和感はありませんが、元の画像は正方形ではないため高さと横幅の比率が合っていません。
元の画像の比率を保ったままフレーム内に画像全体を表示
せっかくなら元の比率通りに表示させたいですよね。
Image("IMG_6599") .resizable() .scaledToFit() .frame(width: 300, height: 300) .clipped()
.scaledToFit()を.resizable()の後に追加しました。
.scaledToFit()はフレームからはみ出さないように画像を表示してくれますが、サイズに合わない部分には空いたスペースができます。
上下に白いスペースができているのがわかります。
リサイズしただけのものと比べると明らかに比率が違いますね。
元の画像の比率を保ったままフレーム内に空きスペースができないように画像を表示
Image("IMG_6599") .resizable() .scaledToFill() .frame(width: 300, height: 300) .clipped()
今度は.scaledToFill()を追加しました。
比率は保っていますが、収まりきらない部分はフレームをはみ出しました。
この辺りはうまく使い分けたいですね。
