ばろぐ・ほいダウン

2010年Nゲージにより鉄道事業を開始。2011年Gゲージに参入することで事業拡大。常に夢と目標と野望を持ち活動していく。

MENU

SwiftUIで画像を表示させる

今回はAssetsに入れた画像をSwiftUIで表示してみたいと思います。

画像を表示させる

基本

画像の表示だけなら以下のコードでOKです。

Image("IMG_6599")

IMG_6599のところにはAssetsにセットしたときの名前を入れてください。

f:id:yotubarail:20200706135930p:plain

画像がプレビューの画面よりも大きいので、なんのこっちゃわからない状態で表示されてしまいました。


切り取り

画面いっぱいに広がっている画像を切り取ってみましょう。
切り取るにはフレームのサイズを指定します。

Image("IMG_6599")
        .frame(width: 300, height: 300)
        .clipped()

.frame()で高さと横幅を指定します。
その後に.clipped()を書くことで切り取ります。
今回は300×300の正方形に切り取りました。

f:id:yotubarail:20200706141302p:plain

指定した大きさで切り取れました。
元の画像のサイズから一部を切り取っただけなので、まだ何の画像かわかりませんね。


フレームのサイズにリサイズした画像を表示

それでは先ほど大きさを指定したフレームいっぱいに画像を表示させてみましょう。

Image("IMG_6599")
        .resizable()
        .frame(width: 300, height: 300)
        .clipped()

.frame()の前に.resizable()を追加してください。
SwiftUIでは.resizable()で画像の大きさを変更できるようにするみたいです。
必ずフレームサイズを指定する前に追加しないとエラーが出ます。

f:id:yotubarail:20200706142657p:plain

フレームサイズに合わせて画像が表示されましたね。
中野サンプラザの写真だということがわかりました。
下斜めの構図のおかげであまり違和感はありませんが、元の画像は正方形ではないため高さと横幅の比率が合っていません。


元の画像の比率を保ったままフレーム内に画像全体を表示

せっかくなら元の比率通りに表示させたいですよね。

Image("IMG_6599")
        .resizable()
        .scaledToFit()
        .frame(width: 300, height: 300)
        .clipped()

.scaledToFit()を.resizable()の後に追加しました。
.scaledToFit()はフレームからはみ出さないように画像を表示してくれますが、サイズに合わない部分には空いたスペースができます。

f:id:yotubarail:20200706144611p:plain

上下に白いスペースができているのがわかります。
リサイズしただけのものと比べると明らかに比率が違いますね。


元の画像の比率を保ったままフレーム内に空きスペースができないように画像を表示

Image("IMG_6599")
        .resizable()
        .scaledToFill()
        .frame(width: 300, height: 300)
        .clipped()

今度は.scaledToFill()を追加しました。

f:id:yotubarail:20200706145646p:plain

比率は保っていますが、収まりきらない部分はフレームをはみ出しました。
この辺りはうまく使い分けたいですね。