13
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CalloutAccessoryViewにボタンを追加する

Posted at

はじめに

コールアウトとは、マップに配置したピンをタップしたときに表示される吹き出し部分です。
「東京駅」の右側に 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)
    }
}
13
13
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?