写真を含めの画像をプロジェクトに取り込んで表示します。サイズを固定したり、比率を保ったまま伸縮したりも簡単にできます。
画像を表示する
ImageAppというプロジェクトを作成しました。新規プロジェクトの作り方はこちらを参考にしてください。
まず、画像をプロジェクトに取り込みます。ナビゲータエリアで「Assets.xcassets」を選択し、取り込みたい画像をドラッグ&ドロップします。
すると、下図のように表示されました。これで取り込みOKです。
ContentView.swfitを選択し、キャンバスの【resume】をクリックして、キャンバスにプレビューを表示してください。
①キャンバスの上の【＋】をクリックし、②イメージパネルを選択します。
③先ほど取り込んだ画像をドラッグ&ドロップで指定場所（今回はHello Worldテキストの上）に挿入します。
これで、取り込んだ画像が表示されました。エディタのコードを見てみると、VStack{}が追加され、さらにその中に「Image(“logo”)」が追加されているのがわかります。
画像のサイズを調整する：aspectRasio()
resizableでリサイズしてみましょう。サイズを指定せず「.resizable()」を付加すると画面サイズに合わせて伸縮します。下図ではiPhoneの画面が縦長なのでそれに合わせて画像も縦長になっています。
.aspectRatio(contentMode: .fit)では、縦横比が保たれたまま画面サイズにフィットします。
サンプルのロゴマークは縦横比1：1なので、この比を保つように、iPhoneの横幅いっぱいに画面が表示されます。
.aspectRatio(contentMode: .fill)では、画面領域を埋めるように縦横サイズの長い辺に合わせて比率を保ちながら拡大・縮小します。画像には切り取られる部分が出てしまいますので注意してください。
サンプルではわかりにくいですが、左右の端の空白部分が画面に表示されなくなっています。
.frame(width: 200)で、画面領域の横幅を固定できます。縦サイズを固定する場合は「height」を指定します。サンプルコードでは、同時に.fitを指定して縦横比を保持しているので、横サイズだけ決めれば画像のサイズが決まってしまいます。
画像の一部を切り取って表示する：clipped()
サンプル画像の黒猫の顔の部分の切り取って表示してみます。
①「.scaleEffect(6.0)」で、画像を拡大します。
②「.offset(x: -40, y: 40)」で画像の位置をずらします。xのオフセットは左にずらのは【ー】、右にずらすのは【＋】です。yのオフセットは上にずらのは【ー】、下にずらすのは【＋】です。
③「.frame(width: 100, height: 100)」で画像領域を決定します。
④画角が決まったら、最後に「clipped()」で青枠の部分を切り取り表示します。
画像に文字を重ねる：overlay()
画像にテキストを重ねてみましょう。ZStack()をつかってオブジェクトを重ねる方法もあります。
下図では、Image(“logo”)の属性として「.overlay()」を追加しています。テキストの位置を.offsetで調整してちょうど良さそうな場所に重ねています。
コメント