Help us understand the problem. What is going on with this article?

CalloutAccessoryViewにボタンを追加する

More than 5 years have passed since last update.

はじめに

コールアウトとは、マップに配置したピンをタップしたときに表示される吹き出し部分です。
「東京駅」の右側に UIButton(type: UIButtonType.DetailDisclosure) を追加します。

スライド1

アノテーションの追加

「東京駅」をマップ上に表示してみます。

MKMapViewをStoryboardに配置します。
MapKit.frameworkとCoreLocation.frameworkを追加します。

コードは以下のとおりです。

ViewController.swift
import UIKit
import MapKit
import CoreLocation

class ViewController: UIViewController {

    @IBOutlet weak var mapView: MKMapView!
    override func viewDidLoad() {
        super.viewDidLoad()

        let annotation = MKPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2DMake(35.6813818, 139.7638951)
        annotation.title = "東京駅"

        self.mapView.addAnnotation(annotation)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

以下が実行結果です。
アノテーションが追加されました。

スライド2

CalloutAccessoryViewにボタンを追加する

「東京駅」の右側に UIButton(type: UIButtonType.DetailDisclosure) を追加します。
MKMapViewDelegateを追加します。
func mapView(mapView: MKMapView, didAddAnnotationViews views: [MKAnnotationView])を実装します。
この中でCalloutAccessoryViewにボタンを追加していきます。

ViewController.swift
import UIKit
import MapKit
import CoreLocation

class ViewController: UIViewController, MKMapViewDelegate {

    @IBOutlet weak var mapView: MKMapView!
    override func viewDidLoad() {
        super.viewDidLoad()

        self.mapView.delegate = self

        let annotation = MKPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2DMake(35.6813818, 139.7638951)
        annotation.title = "東京駅"

        self.mapView.addAnnotation(annotation)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func mapView(mapView: MKMapView, didAddAnnotationViews views: [MKAnnotationView]) {
        for view in views {
            view.rightCalloutAccessoryView = UIButton(type: UIButtonType.DetailDisclosure)
        }
    }
}

以下が実行結果です。

スライド1

CalloutAccessoryViewのタップを検出する

CalloutAccessoryViewのタップを検出するにはfunc mapView(mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl)を実装します。

ViewController.swift
import UIKit
import MapKit
import CoreLocation

class ViewController: UIViewController, MKMapViewDelegate {

    @IBOutlet weak var mapView: MKMapView!
    override func viewDidLoad() {
        super.viewDidLoad()

        self.mapView.delegate = self

        let annotation = MKPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2DMake(35.6813818, 139.7638951)
        annotation.title = "東京駅"

        self.mapView.addAnnotation(annotation)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func mapView(mapView: MKMapView, didAddAnnotationViews views: [MKAnnotationView]) {
        for view in views {
            view.rightCalloutAccessoryView = UIButton(type: UIButtonType.DetailDisclosure)
        }
    }

    func mapView(mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
        debugPrint(view)
    }
}
arthur87
iwate-pu
岩手県滝沢市にある公立大学です。Qiitaではソフトウェア情報学部生や出身の人が多いです。
https://www.iwate-pu.ac.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away