【SwiftUI】Image の基本的な使い方

SwiftUI

SwiftUI

はじめに

今日はSwiftUIのImageの使い方について勉強していこうと思います。

Imageの基本的な使い方を共有しようかと思います。

Imageを使うための最小コード

Image("Asset名")

Asset名はAssetsに登録している名前のことでファイル名ではないです。

Assetsはフォルダ階層作れますが、指定するときはフォルダ名を省いたAsset名でいいです

これで画像表示されます。

Imageは結構やれることが多く且つやらないといけないことが多いビューです。

リサイズするには

何もせず1920x1280のフルHD画像を表示したら

が

Image("image_01")

というプログラムだけだと、

超見切れちゃう！

画面内に収めるには resizable を使う

resizableを呼び出すと画面内に収まるようになります

ただし縦横比率が維持できず引き伸ばされて表示されちゃいます

縦横比を維持するには

かなり濃い話なので別記事で解説しています。

www.m2game.net

画像の角を丸くするには

Image("image_01")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 300)
    .clipShape(RoundedRectangle(cornerRadius: 10))

画像を円形にくり抜いたようにするには

Image("image_01")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 300)
    .clipShape(Circle())

画像が正方形でない場合は辺の短い方に合わせて正円でクリップされてる

画像に影(シャドウ)をつけるには

Image("image_01")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 300)
    .clipShape(RoundedRectangle(cornerRadius: 10))
    .shadow(radius: 15)

クリップする場合はクリップの後にshadow()としてください

システムにあるイメージを使うには

自分の手持ちの画像以外にもOSに最初から入ってる画像を使うことができます。

SFSymbolsというのですが、これを使ってUIを作るのもいいと思います。

www.m2game.net

使うには↓のような書き方をします

Image(systemName: "person")

ベクター形式の画像のようなので、拡大しても綺麗な状態を保てます。

おわりに

Imageはまだまだいろんな使い方がありそうです。

随時更新していきます！

最後まで見ていただきヘペトナス！

読者登録・Twitterのフォローもお願いします。