技術ブログ

プログラミング、IT関連の記事中心

SwiftUIで地図の詳細を表示する【Swift】

◾️はじめに

SwiftUIのプロジェクト作成」の記事で紹介しているSwiftUIのプロジェクトを作成できる前提とします。(作成方法がわからない場合は「SwiftUIのプロジェクト作成」の記事を参照してください。)

■SwiftUIで地図の詳細を表示する

1.プロジェクトのディレクトリを右クリックし、「New File...」を押下する。

2.「SwiftUI View」を選択して、「Next」を押下する。

3.適当な名前を入力し、「Create」を押下する。

4.「SwiftUIでMapKitを利用して地図を表示する」の記事で紹介した地図の表示を「3」で作成したファイルに書き込む。

5.「ContentView」に戻り、Textを「VStack」に入れる。(「SwiftUIでTextを縦(VStack)に並べて複数表示する」を参照してください。)

6.Textの上の行に「3」で作成した「クラス名()」を記載する。(地図クラスのインスタンス化)

7.「6」に以下のソースコードを記載し、高さを設定する。(正常に地図が表示されることをプレビューで確認する)

.frame(height: 300)

8.「7」のしたの行に「SwiftUIでImageを表示する」「SwiftUIでImageを装飾する」で作成した画像を作成する。(正常に画像が表示されることをプレビューで確認する)

9.以下のソースコードを「8」の画像の下の行に記載し、画像を地図に被せる。

.offset(y: -130)
.padding(.bottom, -130)

10.以下のソースコードを「VStack」の一番下に記載し、スペースを埋めて画像を画面上部に押し上げる。

Spacer()

11.以下のソースコードを「Map」の下の行に記載し、セーフエリアを埋める。

.edgesIgnoringSafeArea(.top)

これで、地図の詳細のような画面が作成できました!(画像はアヒルですがw)

Apple様のチュートリアルではテキストの位置の微調整や画像が地図っぽい画像だったりしますが、概ねやっていることは同じです!