【SwiftUI】公式チュートリアルをやってみよう #4 | カスタマイズした画像の表示

カスタマイズした画像を表示する

assetの準備

実装に入る前に、表示する画像をassetに保存します。チュートリアルでは、”turtlerock.png”という画像を使用しておりますが、本記事では、以下の”tree.jpg”という画像を使用したいと思います。

assetを開き、画像をドラッグ＆ドロップで保存しましょう。

画像表示用のSwiftUI Viewの作成

画像の準備ができましたら、画像表示用の新たなSwiftUI Viewの作成を行います。File -> New -> Fileを選択し、ファイル一覧からSwiftUI Viewを選択します。名前の入力欄が表示されますので、CircleImageとします。

画像の表示

ファイルが作成できましたら、画像を表示するためのImage()を実装します。

bodyに実装されているText()を削除し、Image(“tree”)を実装します。()内には、assetに保存した画像の名前を指定します。

画像を円形にクリッピングする

続いて、画像を円形にクリッピングしたいと思います。クリッピングをするには、Image()に対し、clipShape()を実装します。

clipShape()の引数には、クリッピングの形(Shape)を指定します。Shapeには、Rectangle(四角形)、Capsule(カプセル型)、Circle(円形)、Ellipse(楕円形)などがあります。

今回は円形にクリッピングしたいので、clipShape(Circle())と実装します。

画像に枠線を追加する

続いて、画像の周りに枠線を表示させたいと思います。Circle().stroke(Color.gray, lineWidth: 4)で、円形の灰色線を作成し、それを、overlay()で、画像に重ねることで、枠線を実現します。

画像に影を追加する

最後に、shadow()を実装し、画像に影を表示します。影がわかりやすいよう、枠線を白に変更しておきましょう。

今回のチュートリアルはここまでとなります。ありがとうございました。