SwiftUIでMapKitを利用して地図を表示する【Swift】

◾️はじめに

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

■SwiftUIでMapKitを利用して地図を表示する

1.以下のソースを記載して、「MapKit」をインポートする。

import MapKit

2.以下のソースを記載して、継承を「UIViewRepresentable」に変更し、必要な関数を記載する。

struct ContentView: UIViewRepresentable {
func makeUIView(context: Context) -> MKMapView {
MKMapView(frame: .zero)
}
func updateUIView(_ view: MKMapView, context: Context) {
}
}

3.プレビュー画面の「Resume」を押下する。

4.プレビュー画面の「ライブプレビュー」ボタンを押下する。

5.マップが表示されれば成功です。

SwiftUIでImageを装飾する【Swift】

■はじめに

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

■SwiftUIでImageを装飾する

1.Imageを表示する。(詳細は「SwiftUIでImageを表示する」の記事を参照してください)

2.「1」で用意した画像を丸く表示するために、以下のコードを追記する。

.clipShape(Circle())

3.「2」で丸くした画像に枠線を追加するために、以下のコードを追記する。

.overlay(
Circle().stroke(
Color.gray, lineWidth: 4
)
)

4.「3」で枠線を追加した画像の周りに影を追加するために、以下のコードを追記する。

.shadow(radius: 10)

上記は順番に記載しましたが、それぞれ独立したパラメータなので、好きなように定義できます。

色々とパラメータを操作してみてください!!

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

SwiftUIでImageを表示する【Swift】

■はじめに

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

■SwiftUIでImageを表示する

1.「Assets.xcassets」を選択し、「+」を押下する。

2.「New Image Set」を押下する。

3.追加された「Image」に任意の画像をドラッグ&ドロップで設定する。

4.「3」の「Image」の名前を任意の名前に変更する。

5.ソースコードの「Text(・・・」を削除して、「+」を押下する。

6.一番左のViewのメニューを選択して、「Image」をドラッグする。

7.「body」のブロック内でドロップする。

8.「Image」の「Image Name」を「4」で変更した名前に変更する。

9.画像の形になれば成功です。(プレビューで確認してみましょう)

SwiftUIでTextを横(HStack)に並べて複数表示する【Swift】

■はじめに

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

■SwiftUIでTextを横(HStack)に並べて複数表示する

1.Textを「command」を押下しながらクリックする。

2.「Embed in HStack」を押下する。

3.「1」のTextが「HStack」のブロック(カッコ)で囲まれたことを確認する。

4.Xcodeの右上の「+」を押下する。

5.一番左のViewのメニューを選択して、「Text」をドラッグする。

6.「3」で用意した「 HStack」の場所にドロップする。

7.Textが追加されたら成功です。(プレビューで確認してみましょう)

SwiftUIでTextを縦(VStack)に並べて複数表示する【Swift】

■はじめに

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

■SwiftUIでTextを縦(VStack)に並べて複数表示する

1.Textを「command」を押下しながらクリックする。

2.「Embed in VStack」を押下する。

3.「1」のTextが「VStack」のブロック(カッコ)で囲まれたことを確認する。

4.Xcodeの右上の「+」を押下する。

5.一番左のViewのメニューを選択して、「Text」をドラッグする。

6.「3」で用意した「VStack」の場所にドロップする。

7.Textが追加されたら成功です。(プレビューで確認してみましょう)

SwiftUIでTextを上(ZStack)に並べて複数表示する【Swift】

■はじめに

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

■SwiftUIでTextを上(ZStack)に並べて複数表示する

1.Xcodeの右上の「+」を押下する。

2.一番左のViewのメニューを選択して、「Z Stack」をドラッグする。

3.「body」内にドロップする。

4.元々あった、Textを「3」で用意した「ZStack」内にカット&ペーストする。

5.画像の形になれば成功です。(プレビューで確認してみましょう)

SwiftUIでTextの文字色を変更する【Swift】

■はじめに

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

■SwiftUIでTextの文字色を変更する

1.対象のTextを「command」を押下しながらクリックする。

2.メニューから「Inspect…」をクリックする。

3.「Color」のプルダウンから希望の色を選択する。

4.ソースコード上に「.foregroundColor」が追加されていたら成功です。(プレビューで確認してみましょう)

SwiftUIでTextのフォントを変更する【Swift】

■はじめに

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

■SwiftUIでTextのフォントを変更する

1.対象のTextを「command」を押下しながらクリックする。

2.メニューから「Inspect…」をクリックする。

3.「Font」のプルダウンから希望のフォントを選択する。

4.ソースコード上に「.font」が追加されていたら成功です。(プレビューで確認してみましょう)

SwiftUIでTextの文字を変更する【Swift】

■はじめに

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

■SwiftUIでTextの文字を変更する

1.対象のTextを「command」を押下しながらクリックする。

2.メニューから「Inspect…」をクリックする。

3.「Text」の項目を書き換える。

4.ソースコード上の文字が変更されていたら成功です。(プレビューで確認してみましょう)