【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を見てみましょう。
すると、画像の大きさが変更できたのがわかりますね。
