swiftui

【SwiftUI】日本語版チュートリアルCreating and Combining Views 後編

SwiftUIのチュートリアルをやったので日本語で説明する。

Creating and Combining Views 後編

はじめに

ここからSwiftUIを使って様々な名所とその詳細を表示するマップアプリを作る。 これを始める前ににApple Developper公式ページからProject files をダウンロードしておく。

【SwiftUI】日本語版チュートリアルCreating and Combining Views前編の続きです。

Section4

このセクションでは画像を追加していく。 SwiftUIでは画像に影を落としたりボーダーを入れたりするのにコードを追加しない。

Step1

はじめにでダウンロードしたProject files内のturrlerock.pngAssets.xcassetsにドラッグアンドドロップする。

          2020 10 11 22 44 08

Step2

新しくSwiftUI viewを作る。 FIle>New>FileからSwiftUI Viewを選択して、名前はCircleImage.swiftでCreate

          2020 10 11 22 47 40

Step3

Image(_:)イニシャライザを使ってText viewをTurtle RockのImageに置き換える。

          2020 10 11 22 49 35

Step4

画像を丸くするためにclipShape(Circle())を追加。

          2020 10 11 22 54 24

Step5

グレーの外枠線を追加。

          2020 10 11 23 00 47

Step6

輻射線(radius)で画像に影を落とす。 外枠線の色をWhiteに。

          2020 10 11 23 09 14

Section5

UIViewサブクラスとSwiftUIを一緒に使うためにUIViewRepresentableプロトコルに準拠したviewを用いる。

Step1

MKMapVIewを用いるcustom viewを作成する。 FIle>New>FileからSwiftUI Viewを選択して、名前はMapView.swiftでCreate

          2020 10 12 0 21 40

Step2

MapKitをインポートして、MapViewをUIViewRepresentableプロトコルに準拠させる。 ここでエラーが出て怒られるが無視して次に行く。 UIViewRepresentableプロトコルはmakeUIViewメソッドupdateUIViewメソッドが必須なのでエラーが出ている。

          2020 10 12 0 23 13

エラーの原因だが、UIViewRepresentableプロトコルはmakeUIViewメソッドupdateUIViewメソッドが必須なのだ。 makeUIViewメソッドはMKMapViewを生み出すもの。 updateUIViewメソッドはviewの挙動を把握して変化に対応するもの。 では、bodyプロパティを消してこの二つのメソッドを追加していく。

Step3

まず、makeUIView。 白紙のマップを写してくれる。

          2020 10 12 0 44 46

次にupdateUIView。 Turtle Rockが中心に来るように座標を設定する。

          2020 10 12 0 50 03

プレビューがstaticモードになってるとSwiftUI views関連しか認識しないからマップは表示されない。 (MKMapViewはUIViewのサブクラス) 再生ボタン▶️みたいなのを押すとマップが映る。(Live Previewモードになる。) Turtle Rockが中心に映し出されている。

Section6

これまでで名所に関する名前と場所、画像、マップを作成した。 これらを組み合わせて最終的なデザインを完成させていく。 ContentView.swiftで行なっていく。

Step1

セクション3で作ったVStackの外側にVStackで箱を作る。

          2020 10 12 1 19 23

Step2

一番上にセクション5で作ったMapViewを配置する。 frame(width:height:)でサイズも指定する。

          2020 10 12 1 22 25

今回、マップのサイズに関して高さしか指定していないが、この場合は自動的に横幅を目一杯使うようになっている。 また、プレビューをLiveモードにしていてもコードの編集はできる。

Step3

画像を配置。 マップと画像が少し重なるように、画像を上に調整する。

          2020 10 12 1 37 43

offsetで垂直方向に少し移動し、paddingで画像の下辺のみ余白を少なくしている。

Step4

最下部にSpacer()を加えて全て画面の上部に表示されるようにする。

          2020 10 12 1 40 50

Step5

最後にマップが画面上端まで表示されるようにIgnoringSafeArea(.top)を加えておく。

          2020 10 12 1 42 57

最後に

今回はSwiftUIのチュートリアル(Creating and Combining Views)をやってみた。 僕は2回目だけど、わかっていなかったがたくさんあったように思った。 自分の言葉にして説明するとよく理解できたような気がする。 この続きのチュートリアルも記事にしたいと思う。 また、わかりにくいところがあれば公式チュートリアル読んでください。

最後まで読んでいただき、ありがとうございました。

Subscribe to テクマガ

Get the latest posts delivered right to your inbox

入力されたアドレス宛に案内のメールが届きます。