[iPhoneアプリ開発] 中学生でもわかるSwiftUI 入門 EP.3

　第 3 回 中学生でもわかるiPhoneアプリ開発を始めます。
この入門ではSwiftUIを用いて、動画投稿アプリ(Y○utube)を真似したアプリを作成及び解説をして参ります。
上記の動画ではハンズオン形式で解説しておりますので是非興味がある方はご覧ください。٩( ‘ω’ )و

　今までにXCodeやプログラミンをしたことがない方やiPhoneアプリを開発したことがない方でも開発できるように解説して参ります。不明な点などございましたらYouTubeのコメントください。

今回はイメージ画像をスマホに表示してみましょう。
※ZStackについても説明しています。

★まず初めに画像をご用意ください。
おすすめサイトが下記です
pixabay
無料で高画質かつ商用可の画像が豊富にあります。

・商用利用：OK

・クレジット表記：不要

・改変：可能

・会員登録：不要

★Image画像をプロジェクトに取り込んでみましょう。

XcodeのAssets.xcassetsを選択し、表示したい画像を下図のようにドラッグ&ドロップしてください。

以上で準備は完了です。

実際に画像を表示してみましょう。
下記のようにコーディングします。

★一般的に使用される公式
Image(“イメージ名“)

var body: some View {
    Image("中学生でもわかるiPhoneアプリ開発")
}

これで実行してみます。

上図のようにImage()だけでは表示したい画像を画面いっぱいに表示してしまいます。
ですので、カスタマイズしたいと思います。下記のようにコーディングします。

var body: some View {
    Image("中学生でもわかるiPhoneアプリ開発")
        .resizable()
}

これで実行してみます。

★補足
.resizable()はImage()の下に記載することで、Imageで指定した画像に対してカスタマズすることができます。
この.(ドット)を日本語の「の」と置き換えると理解しやすいかもしれません。
.resizable()は画面サイズに合わせて伸縮します。

更にカスタマイズします。

縦横比が保たれるようにしたいと思います。下記のようにコーディングします。
画面サイズにフィットします。

var body: some View {
    Image("中学生でもわかるiPhoneアプリ開発")
        .resizable()
        .aspectRatio(contentMode:.fit)
}

これで実行してみます。

以上で
第 3 回 中学生でもわかるiPhoneアプリ開発を終了致します。ご視聴いただきありがとうございました。(#^.^#)

参考文献
Image(Apple Developer Documentation)

※個人の見解による意見でございます。参考程度にお願い致します。
著作者 Nishimura Taichi , Kurogi Misato