UINavigationControllerのアイテムを切り替える

UINavigationControllerのアイテムをタップすると違うアイテムに切り替えたいと思いちょっと作ってみました。今回はリフレッシュボタンを押したらインジケーターをくるくる回して、再びリフレッシュボタンを表示させるようなものを作りました。

イメージとしては以下のiOS版Instagramのような感じです。


プロジェクトは「Single View Application」を選択しました。開発環境は、Xcode4.3.3、エミュレータはiPhone iOS5.1です。

ナビゲーションコントローラーを表示させる

AppDelegate.mのapplication:didFinishLaunchingWithOptions:メソッドに以下を追加しナビゲーションコントローラーを表示させます。

AppDelegate.m

//ビューコントローラー生成
self.viewController = [[ViewController alloc] initWithNibName:nil bundle:nil];
//ナビゲーションコントローラー生成
UINavigationController *naviController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
//ナビゲーションバーを表示する
[self.window addSubview:naviController.view];

ボタンを表示させる

ナビゲーションコントローラーが表示されたので次はボタンを表示させます。ビューが生成されたときにはじめにリフレッシュボタンを表示させたいのでその準備から。

viewDidLoadメソッドでリフレッシュボタンを管理しているメソッドを呼びます。これはあとで作成するものです。

VewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    //リフレッシュボタン表示
    [self rightItemButtonWithRefresh];
}

次に上で説明したボタンを管理するメソッドを作成します。

VewController.m

//リフレッシュボタン
-(void)rightItemButtonWithRefresh
{
    UIBarButtonItem *rightItemButtonWithRefresh = [[UIBarButtonItem alloc]
      initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh
      target:self
      action:@selector(buttonEvent1:)
    ];
    
    [self setToolbarItems:[NSArray arrayWithObjects:rightItemButtonWithRefresh, nil] animated:YES];
    self.navigationItem.rightBarButtonItem = rightItemButtonWithRefresh;
}

//インジケーターボタン
-(void)rightItemButtonWithActivityIndicator
{
    UIActivityIndicatorView *activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
    [activityIndicator startAnimating];

    UIBarButtonItem *activityButtonItem = [[UIBarButtonItem alloc] initWithCustomView:activityIndicator];

    [self setToolbarItems:[NSArray arrayWithObjects:activityButtonItem, nil] animated:YES]; 
    self.navigationItem.rightBarButtonItem = activityButtonItem;

    //↓ここに何か処理
    NSLog(@"ここに何か処理");
    //↑ここに何か処理

    [self performSelector:@selector(activityIndicatorBtnEvent:) withObject:nil afterDelay:2.0];

    [activityIndicator release];
    [activityButtonItem release];
}

ボタンがタップされたときの処理

ボタンがタップされたときに別のボタンを管理しているメソッドを呼ぶようにしています。

VewController.m

//リフレッシュボタンがタップされたとき
- (void) refreshBtnEvent:(id)sender
{
    //インジケーターボタンに切り替える
    [self rightItemButtonWithActivityIndicator];   
}

//rightItemButtonWithActivityIndicatorメソッドが呼ばれたとき
- (void) activityIndicatorBtnEvent:(id)sender
{
    //インジケーターを停止させる
    UIActivityIndicatorView *activityIndicator = [[UIActivityIndicatorView alloc]init];
    [activityIndicator stopAnimating];
    [activityIndicator release];

    //リフレッシュボタンに切り替える
    [self rightItemButtonWithRefresh];
}

実行結果

実行結果は以下のようになります。

おわり

結構適当に作った感があります（笑）作っといてなんですが、こちらやこちらの記事のようにUIButtonの上にUIBarButtonItemを乗せるようにしたほうがよさそうな気もします。

今回のサンプル

ChangeToolBar - GitHub

参考記事

UINavigationController の UIToolBar で Button 表示を切り替えたいメモ - なんとなく
Replace UIBarButtonItem with UIActivityIndicatorView - stackoverflow