iOS

Swift3でMapKitの吹き出し(Callout)タップを取得したい!

投稿日:2017年5月10日 更新日:

はじめに

こんにちは、nukkyです。

今回、iOSのMapKitでGoogleMapのように
吹き出しのタップを取得しようと思ったのですが、
これが案外簡単にいかなかったというか無理矢理やりました。(笑)

MapKitでの吹き出しタップ

MKMapViewDelegateに以下のメソッドが用意されています

ただ、こいつは基本的にMKAnnotationViewの
「leftCalloutAccessoryView」か「rightCalloutAccessoryView」にUIButton等のUIControlが取得できるものを配置し、
そして、そのボタンを押すなどした時に、このメソッドが呼ばれます。
しかし、今回やりたいことはGoogleMapみたいに吹き出しのどこでもタップできるようにしたいという事。
(というか吹き出しにボタンを配置したくない。。。)

吹き出しのみタップしたい!

というわけで結論を早々に述べるとMKAnnotationViewに直接UITapGestureRecognizerを設定します。

MapKitはピンを刺すときにMKAnnotationViewを使用していますがピン部分だけではなく
吹き出し(Callout)部分もSubViewではなくピンと一緒にMKAnnotationViewとして扱われています。
なので以下のようにすると吹き出し部分のタップも取得できます。

これで吹き出し部分のタップが取得できます!

ですが、このままだとピン画像(MKAnnotationView.image)の部分もタップできてしまうので、
タップ処理側で以下のような条件を付けます。

なぜこれでいけるかというと、MKAnnotationView自体のフレームはピン画像部分のみで
吹き出し部分はMKAnnotationViewのフレーム外に描画されていますので
タップしたxとyの位置がフレーム内であればそこがピン画像になります。

さいごに

以上、だいぶ無理矢理タップ判定しましたが
これでGoogleMapと同じく吹き出しのどこをタップされても取得することができます!
もし同じことで悩んでる方がいたら参考にしていただければと思います。
(もっとスマートなやり方ご存知の方、ご教授いただけると幸いです。。。)

page_footer_responsive




-iOS
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

swift

SnapKItをつかってコードでも簡単にAutoLayout実装

1 はじめに2 準備3 実装3.1 準備3.2 AutoLayoutを指定3.3 UIAlertControllerのカスタム4 さいごに はじめに こんにちは、nukkyです。 iOSの実装中にコー ...

swift

[Swift]UIViewからUIImageを作成しローカルに保存

1 はじめに1.1 前提条件2 実装2.1 UIViewからUIImageへ2.2 UIImageをローカルに保存2.3 おまけ:画像のリサイズ3 さいごに4 おすすめ書籍 はじめに こんにちは、nu ...

swift

[Swift3] Segmentを使った画面切り替え (Extra View)

1 はじめに1.1 前提条件2 Segmentの用意3 表示したいViewを用意4 Extra Viewsに追加5 Segmentでの切り替え5.1 デフォルトで表示されるViewを設定5.2 Seg ...

iOS14のWidget機能を使ってみた。

1 はじめに2 Xcode 12 betaの入れ方3 WidgetExtensionの追加方法4 デフォルトのコード説明5 Configurationについて6 プロバイダー6.1 snapshot6 ...

SwiftUIでChartライブラリを使ってみた。

1 はじめに2 Chartsライブラリについて2.1 ライブラリの導入3 wrapper structの作成3.1 描画のための準備3.2 データの取得と更新3.3 コード全体4 さいごに5 おすすめ ...

フォロー

blog-page_side_responsive

2017年5月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。