【SwiftUI入門】Imageで画像を扱う

Imageとは

Imageとは、画像を表示するためのUI部品です。

Image(“画像の名前”)

と記述します。

実際に使ってみる

それでは、Imageを実際に使ってみましょう。

SwiftUIのプロジェクトを作成してください。

Imageには画像が必要なので、適当な画像をプロジェクトに追加します。

『Assets.xcassets』を選択してください。

すると『Assets.xcassets』の中身が表示されるので、

この上で右クリックします。

色々と出てくるので、

『import…』を押しましょう。

すると、追加したい画像が聞かれます。

追加したい画像を選択して、

『Open』を押しましょう。

すると、画像が追加されます。

画像の名前が長い場合は短くしておきましょう。

画像の名前をダブルクリックすると

編集できるようになるので、

扱いやすいように短くしておきましょう。

画像を追加することができたので、Imageを使ってみましょう。

『ContentView.swift』を押してください。

Text(“Hello, world!”)
    .padding()

消して

代わりに

Image(“cat”)

と記述しましょう。

catという文字列は、

追加した画像の名前と同じになっています。

追加した画像の名前と同じになるように、Imageの中の文字列を変更しておいてください。

とりあえず、この状態でCanvasを見てみましょう。

Canvasが表示されていない場合は、右から二番目のボタンを押して、

『Canvas』を押すと表示されます。

Canvasを見てみると、ちゃんと画像が表示されていますね。

しかし、画像のサイズが大きすぎて画面に収まっていません。

画面に収まるように画像の大きさを変更してみましょう、

画像の大きさを変える

画像の大きさを変えるにはImageに

・resizable
・frame

二つのモディファイアをつける必要があります。

resizableとは画像のサイズを変更できるようにするモディファイアです。

これがないとサイズを指定しても変更できません

frameとは実際に画像のサイズを変更するモディファイアです。

縦幅と横幅を指定します。

resizableとframeは

Image(“画像の名前”)
    .resizable()
    .frame(width: 横幅, height: 縦幅, alignment: .寄せたい方向)

と記述します。

実際に使ってみる

それでは、実際に画像の大きさを変えてみましょう。

Image(“cat”)

.resizable()
.frame(width: 200, height: 100)

と追加しましょう。

コードについて説明しておくと、

.resizable()

でImage(“cat”)の大きさを変更可能にしています。

次に、

.frame(width: 200, height: 100)

では、画像の横幅を『200』

縦幅を『100』に設定しています。

この状態でCanvasを見てみましょう。

すると、画像の大きさが変更できたのがわかりますね。

未分類

Posted by mogi0506