【Swift】MKMapViewDelegateの使い方。ピンの色や画像を変更する。(Swift 2.1、XCode 7.2)

2020年6月16日

ピンのデザインについて

前回の記事でMKMapView(以下、マップビュー)を使って表示した地図にピンを刺す方法を説明した。⇒「記事

マップにピンを刺す

 

ピンの色を指定しなかった場合は赤が表示される。赤は目立つ色なのでデザインにこだわりが無ければこのままでもいいが、好みの色や画像を使いたい人もいる。

そこで、本記事ではピンの色を変更する方法を説明する。

 

デリゲートメソッドを実装する

ピンの色や画像を変えるときはMKMapViewDelegateのデリゲートメソッドを実装する必要がある。以降の手順は前回記事の続きになるので、実装を試して見る人は先に読んでおくことをお勧めする。

ViewController.swiftを以下のように変更する。MKMapViewDelegateプロトコルを適用し、デリゲートメソッドの「アノテーションビューを返すメソッド」を実装している。

このメソッドはピンが描画される前に呼び出され、MKAnnotationView(以下、アノテーションビュー)に色を設定して返すとピンの色が画面に反映される。

なお、タイトルの吹き出しを表示する場合はcanShowCalloutプロパティをtrueに設定しなければならない。

 

下図は実行結果。ピンの色が青色になった。

ピンの色を青に変更した

 

アノテーションビューは再利用することができる。以下のコードのように、インスタンスを生成するときの引数に識別子を渡し、あとでマップビューから取り出して再利用する。なので、上記コードの「アノテーションビューを返すメソッド」は以下のようにしたほうがスマートになる。

しかし、本記事では再利用については特に考慮せずに進める。

ピンの色を個別に変更する

上記の実装でピンの色を変えたものの、これではすべてのピンの色が同じ色に変更されてしまう。ピンごとに色を指定したいこともあると思うので、その方法を説明しておく。

まず、ピンの色をソース上のどの箇所で指定するのが望ましいかを考えると、やはり、座標やタイトルを設定する箇所で一緒に色も指定したい。しかし、MKPointAnnotationクラスのインスタンスには座標とタイトル、サブタイトルしか設定することができない。

MKPointAnnotationクラスイメージ

 

そこで、MKPointAnnotationクラスを継承した新たなクラスを作り、色を設定するための変数を持たせる。

メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestMKPointAnnotation」、Subclass ofに「MKPointAnnotation」を入力し、Nextボタンを押す。

クラス名を入力する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

保存場所を指定する

 

作成したTestMKPointAnnotation.swiftを以下のように変更する。

 

ViewController.swiftを以下のように変更する。TestMKPointAnnotationを使ってピンの座標、タイトルを設定するところで色も一緒に設定している。

デリゲートメソッドの「アノテーションビューを返すメソッド」の中で、引数で渡ってきたアノテーションをTestMKPointAnnotationにキャストする。そして、キャストしたインスタンスからピンの色を取得してアノテーションビューに設定している。

 

下図は実行結果。ピンの色が別々になった。

ピンの色が別々になった

 

ピンの画像を変更する

同じような手順で、ピンの画像を自分で用意した画像に変更できるのでやってみよう。実装を試してみる人はこの画像をご利用されたし。⇒「テスト用画像

まず、テスト用画像をプロジェクトに取り込む。取り込み方は次の記事を参照されたし。⇒「プロジェクトにファイルを追加する方法

TestMKPointAnnotation.swiftを以下のコードに変更する。

 

ViewController.swiftを以下のコードに変更する。

ピンごとに「色を設定」、「画像を設定」、「色と画像を設定」に分けて実装した。「アノケーションビューを返すメソッド」では、色と画像の設定の有無からアノケーションビューに設定するプロパティの場合分けを行った。

注意点は、色を設定するときはMKPinAnnotaionViewのインスタンスに色を設定して返すが、ピンの画像を設定するときはMKAnnotaionViewのインスタンスに画像を設定して返すことである。

MKAnnotationViewクラスはMKPinAnnotaionViewのサブクラスなのでimageプロパティを設定することはできるが、標準のピンを表示するためのクラスなので画像を設定しても無視されてしまう。気をつけよう。

 

以下は実際のプレイ動画