佐長 Blog: Pathのようなメニューを簡単に作る - [開発]

独自のきれいなUIでおなじみのPathのメニューを再現する「AwesomeMenu」を使ってみた。
とても簡単。

? AwesomeMenuとは

くるくる周りながら表示されるPathのメニュー表示を再現したライブラリ。
メニュー（赤いボタン）、アイテム（黒いボタン）の２つのクラスからなる。
アニメーションや表示角度などがカスタイマズ可能。

ライセンス：MITライセンス
github：https://github.com/levey/awesomeMenu
ARC：非対応

※ 2013/1/20 現在

導入手順

ソースダウンロード
AwesomeMenu、AwesomeMenuItemをプロジェクトに取り込む
QuartzCore.frameworkをプロジェクトに追加
表示やアニメーションのカスタマイズ

1. ソースダウンロード

githubからソースをダウンロード

 
$ git clone git://github.com/levey/AwesomeMenu.git <ダウンロードパス>

Xcodeでダウンロードしたプロジェクトを開くと以下のような構成になっている。

この状態でsimulatorを起動すると、中央にメニューボタンが配置された状態になっているのでボタンを押して動きを確認できる。

今回はこれをプロジェクトに取り込んでPathのような表示レイアウトに調整した。

2. AwesomeMenu、AwesomeMenuItemをプロジェクトに取り込む

今回は「PathMenu」というプロジェクトを新規で作った。

プロジェクトに取り込むクラスは以下。

AwesomeMenu.h
AwesomeMenu.m
AwesomeMenuItem.h
AwesomeMenuItem.m

「AwesomeMenu」フォルダごとコピーする。

今回はメニュー、アイテムに使われている画像もそのまま利用する。

「images」フォルダもコーピーする。

以下が追加した状態。

3. QuartzCore.frameworkをプロジェクトに追加

QuartzCore.frameworkが利用されているので、プロジェクトに追加する。

4. 表示やアニメーションのカスタマイズ

ViewController.hにAwesomeMenu.hとAwesomeMenuItem.hをインポートして、

AwesomeMenuDelegateを設定。

ViewController.mにてボタンの初期表示を設定。

 
- (void)viewDidLoad
{
    [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
    
    UIImage *storyMenuItemImage = [UIImage imageNamed:@"bg-menuitem.png"];
    UIImage *storyMenuItemImagePressed = [UIImage imageNamed:@"bg-menuitem-highlighted.png"];
    UIImage *starImage = [UIImage imageNamed:@"icon-star.png"];
    
    AwesomeMenuItem *starMenuItem1 = [[AwesomeMenuItem alloc] initWithImage:storyMenuItemImage
                                                           highlightedImage:storyMenuItemImagePressed
                                                               ContentImage:starImage
                                                    highlightedContentImage:nil];
    
    AwesomeMenuItem *starMenuItem2 = [[AwesomeMenuItem alloc] initWithImage:storyMenuItemImage
                                                           highlightedImage:storyMenuItemImagePressed
                                                               ContentImage:starImage
                                                    highlightedContentImage:nil];
    
    AwesomeMenuItem *starMenuItem3 = [[AwesomeMenuItem alloc] initWithImage:storyMenuItemImage
                                                           highlightedImage:storyMenuItemImagePressed
                                                               ContentImage:starImage
                                                    highlightedContentImage:nil];
    
    AwesomeMenuItem *starMenuItem4 = [[AwesomeMenuItem alloc] initWithImage:storyMenuItemImage
                                                           highlightedImage:storyMenuItemImagePressed
                                                               ContentImage:starImage
                                                    highlightedContentImage:nil];
    
    AwesomeMenuItem *starMenuItem5 = [[AwesomeMenuItem alloc] initWithImage:storyMenuItemImage
                                                           highlightedImage:storyMenuItemImagePressed
                                                               ContentImage:starImage
                                                    highlightedContentImage:nil];
    
    
    AwesomeMenu *menu = [[AwesomeMenu alloc] initWithFrame:self.view.bounds
                                                     menus:[NSArray arrayWithObjects:starMenuItem1, starMenuItem2, starMenuItem3, starMenuItem4, starMenuItem5, nil]];
    menu.delegate = self;

    
    float space = 30.0f; // メニューの配置スペース
    // メニューの位置
    menu.startPoint = CGPointMake(space, self.view.frame.size.height - space);
    // メニュー全体の表示角度
    menu.menuWholeAngle = M_PI / 1.6;
    //　アイテムの開始角度
    menu.rotateAngle = 0;
    // 各アイテムの表示時間差
    menu.timeOffset = 0.02f;
    // アイテムのアニメーション位置（順序１）
    menu.farRadius = 140.0f;
    // アイテムのアニメーション位置（順序２）
    menu.nearRadius = 140.0f;
    // アイテムのアニメーション位置（順序３）
    menu.endRadius = 140.0f;
    
    
    [self.view addSubview:menu];
}

AwesomeMenuクラスでメニューボタン（赤いボタン）を作成する。
AwesomeMenuItem クラスでアイテムボタン（黒いボタン）を作成する。

今回はPathに合わせて、アイテムを５つ作成しNSArrayにまとめてメニューに追加している。
以下は表示やアニメーションに関する設定。

･メニューの表示位置

 
float space = 30.0f; // メニューの配置スペース
    // メニューの位置
    menu.startPoint = CGPointMake(space, self.view.frame.size.height - space);

画面の左下に配置。マージンを30.0fとしている。
デフォルトではx=160.0、y=240.0

･メニュー全体（アイテムが広がる）角度

 
    // メニュー全体の表示角度
    menu.menuWholeAngle = M_PI / 1.6;

90度の角度でアイテムが広がるようにしたいので、全体を90度としたいが5つのアイテムがバランスよくそろわないので変な微調整となってしまった。
デフォルトではM_PI * 2

･アイテムの表示開始角度

 
    //　アイテムの開始角度
    menu.rotateAngle = 0;

メニューの真上から開始されるので０度を設定。
デフォルトでは0.0

･各アイテムの表示時間（差）

 
    // 各アイテムの表示時間差
    menu.timeOffset = 0.02f;

各アイテムの表示が開始される時間。
長く設定すると時間差で表示されるアイテムの動きがよく分かる。
デフォルトでは0.036f

･アイテムのアニメーション半径

 
    // アイテムのアニメーション位置（順序１）
    menu.farRadius = 140.0f;
    // アイテムのアニメーション位置（順序２）
    menu.nearRadius = 140.0f;
    // アイテムのアニメーション位置（順序３）
    menu.endRadius = 140.0f;

アイテムのアニメーション半径はfarRadius → nearRadius → endRadiusの順番にて指定された長さが反映される。
デフォルトでは、farRadius=140.0f、nearRadius=110.0f、endRadius=120.0f

ボタンが押された場合のイベント処理は以下。

 
#pragma AwesomeMenuDelegate

/**
 * メニューアイテムの選択時にイベント

 * 各アイテムのインデックスを受け取る
 */
- (void)AwesomeMenu:(AwesomeMenu *)menu didSelectIndex:(NSInteger)idx
{
    NSLog(@"AwesomeMenu:didSelectIndex:%d", idx);
}

/**
 * メニューを開いた場合のアニメーション完了時のイベント

 * メニューのインスタンスを受け取る
 */
- (void)AwesomeMenuDidFinishAnimationOpen:(AwesomeMenu *)menu
{
    NSLog(@"AwesomeMenuDidFinishAnimationOpen:");
}

/**
 * メニューを閉じた場合のアニメーション完了時のイベント

 * メニューのインスタンスを受け取る
 */
- (void)AwesomeMenuDidFinishAnimationClose:(AwesomeMenu *)menu
{
    NSLog(@"AwesomeMenuDidFinishAnimationClose:");
}

「AwesomeMenu:didSelectIndex:」にてアイテム選択時の処理を行う。

実際の動きはこうなる。