2011年12月17日土曜日

CoCafeの作り方

先日リリースしたCoCafeですが、苦労したこと? を参考までにまとめてみようかと思います。

マップでのピン表示

CoCafeではMapを MKMapView を使って表示しています。
特徴的な所は、Mapに表示するピン。
ピンはデフォルトで3種類ぐらいの色を指定出来るピンが用意されているのですが、CoCafeでは有名所のカフェは色がそれなりに合うアイコンを用意してピンとして使用しています。

ピンは MKAnnotationView を拡張して自作しています。
MKAnnotationViewのimageプロパテイで、UIImageを設定するとピンの画像を変えることができます。

マップ上のピンは、端末の向きが変わると、画像の中心を回転の中心として画像の向きが変わります。
そのため、画像は、ピンの先が中心になるように画像を用意します。

アイコンは画像で用意します。画像はRitenaディスプレイ用に2倍の大きさで用意。

ピンをクリックした時に表示する 吹き出し部分 も自作したかったのですが、
簡単に変える方法は見つからず、ゴリゴリ書かないといけないっぽい感じ。
途中まで書いていたのですが、そこまで手間をかけることでもないよなーーー..ということで、CoCafeでは左側にアイコン載せるだけのカスタマイズをしました。


左側のアイコンは、MKMapView の leftCalloutAccessoryView プロパティで 自作のUIViewを設定
右側のボタンは MKMapview の rightCalloutAccessoryView プロパテイで UIButtonTypeDetailDisclosure のボタンを設定
しています。

UIViewで指定位置に配置できるので、全然無理がないカスタマイズw
ゴリゴリ系を諦めた理由の1つにMapViewがバージョンアップとともにインターフェースが変わる予感がした.. というのもあります。(勝手な想像です)

現在位置に移動

iPhone標準アプリのマップにある、現在位置を表示←→コンパス機能っていいですよね。
方向音痴の私としてはとても大切な機能。これがiOS5で使えるようになっていたので早速つかってみました。


作成方法は
MKMapView *mapView;
MKUserTrackingBarButtonItem *trakingItem = [[MKUserTrackingBarButtonItem alloc] initWithMapView:mapView] ;
とボタン作成時にMapViewを紐付けるだけ。
とっても簡単。

...だけど、画面を切り替えた時に、コンパスモード→現在位置を表示 に戻したいのに戻す方法が分からない。
これ、結局方法分からず。ご存知の方いらっしゃったら教えて下さい...

ペロっと途中までめくれるページ

iPhone標準アプリのマップにある、マップの種類(航空写真とか)を切り替えるページ。
ぺろっとちょっとめくれて良い感じですよね。
これをCoCafeにも!と思って入れています。CoCafeでは表示するカテゴリの切り替えができるようになっています。

このエフェクトは pageCurl というものになるのですが、途中で止める方法がはじめ分からず。
途中で止めないならば、
[UIView setAnimationTransition: UIViewAnimationTransitionCurlDown forView:self cache:YES];
とかが使えるっぽいけど...

CATransition *transition = [CATransition animation];
    [transition setType:@"pageCurl"];
    transition.duration = 0.35;
    transition.endProgress = 0.8;
    transition.removedOnCompletion = NO;
    transition.fillMode = kCAFillModeForwards;
    [self.view.layer addAnimation:transition forKey:@"curlup"];
でできるのは分かったのですが、リジェクトされるかもよ? という記事もあり。
たしかに、typeで指定できる定数として
kCATransitionFade
kCATransitionMoveIn
kCATransitionPush
kCATransitionReveal
があるっぽいけど、pageCurl がない。たしかに使っちゃダメそうな...
解決できず。このままリリースしちゃった。とおちゃった。ごめんなさい...ごめんなさい...><

なんか、UIばっかりの話になっちゃった。
次回はGoogleプレイスAPIについてちょっと書こうかな。
でわでわ。
• • •