PIYO - Tech & Life -

iOSで説明画面を表示するCocoaPodsライブラリ

起動時に領域に対してちょっとした説明をしてくれるアプリをちょいちょい見かけるが、そんな機能を簡単に実装するためのiOSライブラリを見つけた。

workshirt/WSCoachMarksView

どんなものかはまずデモを見てもらえばわかるはず。

デモ

導入と実装方法

CocoaPodsに対応しているのでいつものようにインストールする。

# Podfile
pod 'WSCoachMarksView'

% pod install

実装のサンプルとして、ボタンが3つあるこんな画面に対して上から順に説明を表示することを考える。

それぞれのボタンはViewControllerクラスに関連づけてある。

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UIButton *hogeButton;
@property (weak, nonatomic) IBOutlet UIButton *fugaButton;
@property (weak, nonatomic) IBOutlet UIButton *piyoButton;
@end

で、例えばこのViewControllerが表示されるときに説明画面を起動する場合は、viewDidLoadで次のような実装を書く。

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.

    NSArray *marks = @[
                       @{
                           @"rect": [NSValue valueWithCGRect:_hogeButton.frame],
                           @"caption": @"Do hogehoge"
                           },
                       @{
                           @"rect": [NSValue valueWithCGRect:_fugaButton.frame],
                           @"caption": @"Do fugafuga"
                           },
                       @{
                           @"rect": [NSValue valueWithCGRect:_piyoButton.frame],
                           @"caption": @"Do piyopiyo"
                           }

                       ];

    WSCoachMarksView *coachView = [[WSCoachMarksView alloc] initWithFrame:self.view.bounds coachMarks:marks];
    [self.view addSubview:coachView];
    [coachView start];
}

WSCoachMarksViewは表示する文字列（NSString*）とハイライト表示する領域(CGRect)のディクショナリの配列を、初期化時に受け取る。あとはaddSubviewしてstartするだけで、配列の順番にハイライトを移動しながらメッセージを表示してくれるというわけ。これでできたのが最初に貼ったデモだ。

凝ったことをするには足りないが、ちょっとした説明を入れたいという場合には重宝しそう。

なお、普通に実装すると毎回表示されていまいユーザーにとっては鬱陶しいものとなるので、初回だけ表示するなどのを工夫を自分で実装しなければいけない。NSUserDefaultsなどを使えば大した手間ではないからいいけど、そこまで気が利いてるといいよねー。