【iOS】MKMapView の Custom CalloutView

こんにちは〜
見習いプログラマーのnaoponです！

みなさんは、iOSアプリで地図を使うとき何のマップを使っていますか？僕はだいたい下記を使っています。

・Google の「GMSMapView」
・iOS の「MKMapView」

そして今回の『テーマ』はこちら↓↓↓
「iOSのコールアウトをカスタムしよう！」

目的は、
「Googleマップの吹き出し「infoWindow」と同じに、iOSマップの吹き出しも好きなUIのコールアウトを出して使いたい」

■ カスタム手順の概要
　１, InfoWindow作成
　２, MKAnnotationのカスタム
　３, MKPinAnnotationViewのカスタム
　４, MKMapViewのカスタム
　５, 実際に使ってみる

「んじゃ、どうやるの？」って話になりますよね。。

長々になってしまうので、簡潔に説明しますww
詳細は、ダウンロードしたサンプルを見てくださいね（^ ^;）

１, InfoWindowを作る

これは、各々UIViewをいつも通り作ってください。
サンプルでは、UIViewControllerベースにしてます。

//定義
@interface InfoWindow : UIViewController

    //吹き出しの枠線や画像、テキストなどUIはご自由にどうぞ

@end

//定義

@interface InfoWindow : UIViewController

//吹き出しの枠線や画像、テキストなどUIはご自由にどうぞ

@end

２, MKAnnotationでアノテーションを作る

これも、各々いままで通りの作り方ですね。
好きなプロパティを定義して、色や画像や何やら好きにしちゃってください。

 //定義
 @interface IOSAnnotation : NSObject &lt;MKAnnotation&gt;

        @property (nonatomic, readonly) CLLocationCoordinate2D coordinate;
        @property (nonatomic, copy) NSString *title;
        @property (nonatomic, copy) NSString *subtitle;

        -(id)initWithCoordinate:(CLLocationCoordinate2D)coordinate;
        -(void)setCoordinate:(CLLocationCoordinate2D)newCoordinate;

@end

//定義

@interface IOSAnnotation : NSObject <MKAnnotation>

@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;

@property (nonatomic, copy) NSString *title;

@property (nonatomic, copy) NSString *subtitle;

-(id)initWithCoordinate:(CLLocationCoordinate2D)coordinate;

-(void)setCoordinate:(CLLocationCoordinate2D)newCoordinate;

@end

３, MKPinAnnotationViewでコールアウトを作る

※ここは重要かも
「AnnotationView」(ピン)は、タップされると、内部で「CalloutView」(吹き出し)を自身に addSubView します。

1: ピンをタップ
2: ピンの中で [ -(void)didAddSubview:(UIView *)subview{} ] が呼ばれる
3: ピンの中で [ -(void)layoutSubviews{} ] が呼ばれる

だから、やることとして、
1: CalloutViewの参照を確保
2: CalloutView上の標準UIをクリア
3: CalloutView上にオリジナルUIをaddSubView

[注意点]
A: CalloutViewのclipsToBoundsをNOにすること
B: layoutSubviewsは何回も呼ばれるので気をつけること

これで、カスタム吹き出しはOKです。

下記のtmpCalloutViewにCalloutViewの参照を格納します。
あとで使うのでViewのFrameを返すメソッドも１つ定義しておいてください。

//定義
@interface IOSAnnotationView : MKPinAnnotationView
    @property (strong, nonatomic) UIView *tmpCalloutView;
    - (CGRect)infoWindowFrame;
@end

//定義

@interface IOSAnnotationView : MKPinAnnotationView

@property (strong, nonatomic) UIView *tmpCalloutView;

- (CGRect)infoWindowFrame;

@end

//実装
- (void)didAddSubview:(UIView *)subview
{
    if([NSStringFromClass([subview class]) isEqualToString:@&quot;UICalloutView&quot;] ||
       [NSStringFromClass([subview class]) isEqualToString:@&quot;UIView&quot;])
    {
            self.tmpCalloutView = subview;
            for(UIView *sv in [self.tmpCalloutView subviews])
            {
                    [sv removeFromSuperview];
            }
            self.tmpCalloutView.backgroundColor = [UIColor clearColor];
            self.tmpCalloutView.clipsToBounds = NO;        //←ここ超重要☆
            self.isLayouted = NO;
    }
}

//実装

- (void)didAddSubview:(UIView *)subview

{

if([NSStringFromClass([subview class]) isEqualToString:@"UICalloutView"] ||

[NSStringFromClass([subview class]) isEqualToString:@"UIView"])

{

self.tmpCalloutView = subview;

for(UIView *sv in [self.tmpCalloutView subviews])

{

[sv removeFromSuperview];

}

self.tmpCalloutView.backgroundColor = [UIColor clearColor];

self.tmpCalloutView.clipsToBounds = NO; //←ここ超重要☆

self.isLayouted = NO;

}

※iOS7.0より前のバージョンでは「UICalloutView」、iOS7.0以上では「UIView」がコールアウトのViewとなります。

ちなみに「UICalloutView」をいじってリジェクトされないの？と不安になるかと思いますが、削除しているだけなので、リジェクトはされません。過去４度のApple申請でも、問題なくリリースすることができました！(ワ～イ)

上記コードの「ここ超重要☆」があるかと思いますが、なぜかというと、iOS7.0より前とiOS7.0以上では、コールアウトViewが持っているFrameサイズが極端に違います。

iOS7.0より前は、必要最低限のサイズで、iOS7.0以上は画面サイズがコールアウトViewの領域となり、オリジナルViewを追加した際に、領域からはみ出たレイアウトの部分が、カットされないようにします。self.tmpCalloutView.backgroundColorに好きな色をつけてみれば、地図上でコールアウトViewの領域がわかるかと思います。

次に、didAddSubviewのあとに、[-(void)layoutSubviews{}]が呼ばれます。

//実装
- (void)layoutSubviews
{
    if(self.isLayouted == NO)
    {
        self.isLayouted = YES;
    
        //好きなレイアウト
        self.infoWindow = [[InfoWindow alloc] initWithNibName:@&quot;InfoWindow&quot; bundle:[NSBundle mainBundle]];
    
        //吹き出しの中央位置
        CGRect pinRect = [self convertRect:self.bounds toView:self.tmpCalloutView];
        CGFloat px = CGRectGetMidX(pinRect);
        CGFloat py = CGRectGetMinY(pinRect) - [self division:CGRectGetHeight(self.infoWindow.view.bounds) by:2.0];
        
        //ピンの画像によっては微調整
        px = px - 8.0f;
        py = py - 3.0f;
        
        [self.infoWindow.view setCenter:CGPointMake(px, py)];

        //InfoWindowに好きな情報をセットする
        self.infoWindow.messageLabel.text = self.annotation.title;
        
        //標準コールアウトにオリジナルUIを追加 
        [self asyncAfterDelay:0.0f block:^{
            [self.tmpCalloutView addSubview:self.infoWindow.view];
        }];
    }
}

//実装

- (void)layoutSubviews

{

if(self.isLayouted == NO)

{

self.isLayouted = YES;

//好きなレイアウト

self.infoWindow = [[InfoWindow alloc] initWithNibName:@"InfoWindow" bundle:[NSBundle mainBundle]];

//吹き出しの中央位置

CGRect pinRect = [self convertRect:self.bounds toView:self.tmpCalloutView];

CGFloat px = CGRectGetMidX(pinRect);

CGFloat py = CGRectGetMinY(pinRect) - [self division:CGRectGetHeight(self.infoWindow.view.bounds) by:2.0];

//ピンの画像によっては微調整

px = px - 8.0f;

py = py - 3.0f;

[self.infoWindow.view setCenter:CGPointMake(px, py)];

//InfoWindowに好きな情報をセットする

self.infoWindow.messageLabel.text = self.annotation.title;

//標準コールアウトにオリジナルUIを追加

[self asyncAfterDelay:0.0f block:^{

[self.tmpCalloutView addSubview:self.infoWindow.view];

}];

}

コールアウトのフレームサイズを返すメソッドも追加！

- (CGRect)infoWindowFrame
{
    return [[self superview] convertRect:self.infoWindow.view.frame fromView:self.tmpCalloutView];
}

- (CGRect)infoWindowFrame

{

return [[self superview] convertRect:self.infoWindow.view.frame fromView:self.tmpCalloutView];

}

４, ちょっとだけマップをカスタム

マップのタッチイベントを拾えるようにします。
そして、吹き出しをタップされた場合に、マップのデリゲートメソッドでコールアウトがタップされたことをViewControllerに流しています。

//定義
@interface IOSMapView : MKMapView
    @property (strong, nonatomic) IOSAnnotationView *currentAnnotationView;
@end

@implementation IOSMapView

- (BOOL)isCalloutHitPoint:(CGPoint)mapPoint
{
    @autoreleasepool
    {
        if(self.currentAnnotationView == nil)
        {
            return NO;
        }
        else
        {
            //吹き出しのマップ位置を取得
            CGRect infoRect = [self.currentAnnotationView.superview convertRect:[self.currentAnnotationView infoWindowFrame] toView:self];
            
            //吹き出しタップ判定
            if(CGRectContainsPoint(infoRect, mapPoint))
            {
                return YES;
            }
            else
            {
                return NO;
            }
        }
    }
}

BOOL hasCalloutHit = NO;
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    @synchronized(self)
    {
        if(hasCalloutHit == NO)
        {
            hasCalloutHit = [self isCalloutHitPoint:point];
            if(hasCalloutHit == YES)
            {
                [self.delegate mapView:self annotationView:self.currentAnnotationView calloutAccessoryControlTapped:nil];
                [self asyncAfterDelay:0.1 block:^{
                    hasCalloutHit = NO;
                }];
                return nil;
            }
            else
            {
                return [super hitTest:point withEvent:event];
            }
        }
        else
        {
            return nil;
        }
    }
}

//定義

@interface IOSMapView : MKMapView

@property (strong, nonatomic) IOSAnnotationView *currentAnnotationView;

@end

@implementation IOSMapView

- (BOOL)isCalloutHitPoint:(CGPoint)mapPoint

{

@autoreleasepool

{

if(self.currentAnnotationView == nil)

{

return NO;

}

else

{

//吹き出しのマップ位置を取得

CGRect infoRect = [self.currentAnnotationView.superview convertRect:[self.currentAnnotationView infoWindowFrame] toView:self];

//吹き出しタップ判定

if(CGRectContainsPoint(infoRect, mapPoint))

{

return YES;

}

else

{

return NO;

}

BOOL hasCalloutHit = NO;

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

{

@synchronized(self)

{

if(hasCalloutHit == NO)

{

hasCalloutHit = [self isCalloutHitPoint:point];

if(hasCalloutHit == YES)

{

[self.delegate mapView:self annotationView:self.currentAnnotationView calloutAccessoryControlTapped:nil];

[self asyncAfterDelay:0.1 block:^{

hasCalloutHit = NO;

}];

return nil;

}

else

{

return [super hitTest:point withEvent:event];

}

else

{

return nil;

}

５, 使ってみる

#pragma mark -
#pragma mark MKMapViewDelegate

- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view
{
    if([view.annotation isKindOfClass:[IOSAnnotation class]])
    {
        //選択中のアノテーションを保持
        self.iosMapView.currentAnnotationView = (IOSAnnotationView *)view;
    }
}

- (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view
{
    //選択解除されたアノテーションを破棄
    self.iosMapView.currentAnnotationView = nil;
}

- (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control
{
    if([view isKindOfClass:[IOSAnnotationView class]])
    {
        NSLog(@&quot;Info Window Tapped&quot;);
    }
}

#pragma mark -

#pragma mark MKMapViewDelegate

- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view

{

if([view.annotation isKindOfClass:[IOSAnnotation class]])

{

//選択中のアノテーションを保持

self.iosMapView.currentAnnotationView = (IOSAnnotationView *)view;

}

- (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view

{

//選択解除されたアノテーションを破棄

self.iosMapView.currentAnnotationView = nil;

}

- (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control

{

if([view isKindOfClass:[IOSAnnotationView class]])

{

NSLog(@"Info Window Tapped");

}

ふぅ〜〜〜
これでコールアウトのカスタムと実際に使うところまでが終了ですね。
以上『目標達成』ということで！

今は『コールアウトのタップイベント』をとっていますが、InfoWindowの中の各UIのFrameも判定に加えれば、『コールアウト内のどの項目がタップされたのか』もわかるかと思います。(Googleの方ができないのでiOSでそこまでは求めないかw)

サンプルはここからダウンロードできます。

みなさん参考になりましたか？
以上、見習いプログラマーnaoponでした〜！！

前の記事

【iOS】dispatch cancel 2014.04.08
次の記事

GeneXus で SQLServer に接続！！！ 2014.04.12

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

【iOS】MKMapView の Custom CalloutView

【iOS】dispatch cancel 2014.04.08

GeneXus で SQLServer に接続！！！ 2014.04.12