mikamiz
ホーム>シリーズ>古い記事のアーカイブ

iOS : UIToolbarでツールバーを作る

公開 : 2012.10.26

UIToolbarを利用したツールバーの作成と表示について解説します。

ツールバーのサンプル

ツールバーを表示する

ツールバーを表示するには、UIToolbarクラスのalloc関数とinitWithFrame:関数を利用してツールバーを作成し、親Viewに追加します。ツールバーには任意の位置と大きさを指定できますが、標準的なサイズは以下のようになります。

サンプルコード：ViewControllerの画面最下部に空のツールバーを表示する

// ツールバーを作成
UIToolbar * toolBar = 
    [ [ UIToolbar alloc ] initWithFrame:CGRectMake( 0, self.view.bounds.size.height - 44, 320, 44 ) ];

// ツールバーを親Viewに追加
[ self.view addSubview:toolBar ];
図：空のツールバーを表示する
図：空のツールバーを表示する

ツールバーは好きな位置に表示できますが、iOSヒューマン インターフェイス ガイドラインによると以下の形が推奨されています。

UIToolbarクラスの公式リファレンス

ボタンを追加する

ツールバーにボタンを追加するには、UIToolbarクラスのitemsプロパティに、UIBarButtonItemクラスインスタンスの配列を指定します。ボタンの幅や高さは、ボタンに表示されるテキスト／画像やツールバーの高さに連動して自動的に調整されます。

サンプルコード：ツールバーにボタンを追加する

// ボタンを作成する
UIBarButtonItem * btn1 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"テスト"
        style:UIBarButtonItemStyleBordered target:self action:@selector( onTapTest: ) ] autorelease ];

UIBarButtonItem * btn2 = [ [ [ UIBarButtonItem alloc ] initWithBarButtonSystemItem:
        UIBarButtonSystemItemAdd target:self action:@selector( onTapAdd: ) ] autorelease ];

// ボタン配列をツールバーに設定する
toolBar.items = [ NSArray arrayWithObjects:btn1, btn2, nil ];

// 略

- ( void )onTapTest:( id )inSender
{
    // ボタンを押された時の処理をここに追加
    return;
}
図：ツールバーにボタンを追加する
図：ツールバーにボタンを追加する

itemsプロパティの公式リファレンス

UIBarButtonItemクラスの公式リファレンス

ボタンの間隔を指定するには、スペース用スタイルを指定したUIBarButtonItemインスタンスをスペーサーとしてボタン配列に追加します。スペース用スタイルはinitWithBarButtonSystemItem:target:action:関数を利用して指定します。

サンプルコード：２つのボタンの間隔を固定、左右の間隔を可変にすることで、ボタン群を中央に配置する

// ボタンを作成する
UIBarButtonItem * btn1 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"テスト1"
        style:UIBarButtonItemStyleBordered target:self action:@selector( onTapTest: ) ] autorelease ];

UIBarButtonItem * btn2 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"テスト2"
        style:UIBarButtonItemStyleBordered target:self action:@selector( onTapTest: ) ] autorelease ];

// 固定間隔のスペーサーを作成する
UIBarButtonItem * fixedSpacer = [ [ [ UIBarButtonItem alloc ] initWithBarButtonSystemItem:
        UIBarButtonSystemItemFixedSpace target:nil action:nil ] autorelease ];
fixedSpacer.width = 30;

// 可変間隔のスペーサーを作成する
UIBarButtonItem * flexibleSpacer = [ [ [ UIBarButtonItem alloc ] initWithBarButtonSystemItem:
        UIBarButtonSystemItemFlexibleSpace target:nil action:nil ] autorelease ];

// ボタンとスペーサーをツールバーに設定する
toolBar.items = [ NSArray arrayWithObjects:flexibleSpacer, btn1, fixedSpacer, btn2, flexibleSpacer, nil ];
図：ボタン間隔を調整する
図：ボタン間隔を調整する

initWithBarButtonSystemItem:target:action:関数の公式リファレンス

UIBarButtonSystemItem列挙子の公式リファレンス

ボタンを切り替える

UIToolbarクラスのitemsプロパティやsetItems:animated:関数を利用して、表示するボタンを動的に切り替えることができます。setItems:animated:関数を利用すると、フェード・アニメーションでボタンが切り替わります。

サンプルコード：表示するボタンを切り替える

- ( void )changeButtons:( BOOL )inFlag
{
    UIToolbar * toolBar = (略);
    NSArray * newButtonArray = nil;
    
    if( inFlag == YES )
    {
        // ボタン群のAパターンを作成する
        UIBarButtonItem * btn1 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"切替A" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapChangeA: ) ] autorelease ];
        UIBarButtonItem * btn2 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Aい" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapA: ) ] autorelease ];
        UIBarButtonItem * btn3 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Aろ" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapA: ) ] autorelease ];
        UIBarButtonItem * btn4 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Aは" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapA: ) ] autorelease ];
        
        newButtonArray = [ NSArray arrayWithObjects:btn1, btn2, btn3, btn4, nil ];
    }
    else
    {
        // ボタン群のBパターンを作成する
        UIBarButtonItem * btn1 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"切替B" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapChangeB: ) ] autorelease ];
        UIBarButtonItem * btn2 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Bい" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapB: ) ] autorelease ];
        UIBarButtonItem * btn3 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Bろ" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapB: ) ] autorelease ];
        UIBarButtonItem * btn4 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Bは" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapB: ) ] autorelease ];
        UIBarButtonItem * btn5 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Bに" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapB: ) ] autorelease ];
        UIBarButtonItem * btn6 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"Bほ" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapB: ) ] autorelease ];
        
        newButtonArray = [ NSArray arrayWithObjects:btn1, btn2, btn3, btn4, btn5, btn6, nil ];
    }
    
    // アニメーション付きでボタンを切り替える
    [ toolBar setItems:newButtonArray animated:YES ];
    
    return;
}
表示するボタンを切り替える例
ボタン表示パターンA
ボタン表示パターンB

setItems:animated:関数の公式リファレンス

デバイスの回転に対応する

デバイスの回転に対応するには、デバイスの向きに応じてツールバーの位置や高さを変更する必要があります。具体的には、UIViewControllerクラスのviewWillAppear:関数やwillAnimateRotationToInterfaceOrientation:duration:関数が呼び出されるタイミングでツールバーの位置とサイズを変更します。

このとき、iPadの場合はデバイスの向きに関わらず、ツールバーの高さが44となることに注意してください。ツールバーの高さが32となるのは、iPhoneかつデバイスが横向きの場合のみです。

サンプルコード

// ツールバーの位置とサイズを調整する
- ( void )layoutToolbar:( UIInterfaceOrientation )orientation
{
    // ツールバーの高さを計算する
    CGSize parentSize = self.view.bounds.size;
    int newHeight = 44; // 標準の高さ
    
    // iPhone(非iPad)かつデバイスが横向きの場合は高さを32にする
    if( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone && 
       ( orientation == UIInterfaceOrientationLandscapeLeft || orientation == UIInterfaceOrientationLandscapeRight ) )
    {
        newHeight = 32;
    }
    
    // 画面の最下部にツールバーを配置する
    m_objToolbar.frame = CGRectMake( 0, parentSize.height - newHeight, parentSize.width, newHeight );
}

- ( void )viewWillAppear:( BOOL )animated
{
    [ super viewWillAppear:animated ];
    
    // ViewControllerが表示されるタイミングで、ツールバーの位置とサイズを調整する
    [ self layoutToolbar:self.interfaceOrientation ];
}

- ( void )willAnimateRotationToInterfaceOrientation:( UIInterfaceOrientation )toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [ super willAnimateRotationToInterfaceOrientation:toInterfaceOrientation duration:duration ];
    
    // デバイスの回転アニメーションが発生するタイミングで、ツールバーの位置とサイズを調整する
    [ self layoutToolbar:toInterfaceOrientation ];
}
デバイスが縦向きの場合と横向きの場合の例
デバイスが縦向きの場合
デバイスが横向きの場合

外観のカスタマイズ

UIToolbarクラスのbarStyleプロパティを利用して、ツールバーの外見を変更します。barStyleプロパティに設定できるスタイルは以下の通りです。

UIBarStyleDefault：青色（デフォルト）のツールバー
UIBarStyleDefaultスタイル
UIBarStyleBlack：黒色のツールバー
UIBarStyleBlackスタイル
UIBarStyleBlackOpaque：UIBarStyleBlackと同様。利用は非推奨。
UIBarStyleBlackOpaqueスタイル
UIBarStyleBlackTranslucent：黒色で半透明のツールバー。利用は非推奨（translucentプロパティで代用）
UIBarStyleBlackTranslucentスタイル

サンプルコード

UIToolbar * toolBar = (略);
toolBar.barStyle = UIBarStyleBlackTranslucent

barStyleプロパティの公式リファレンス

UIBarStyleDefault列挙子の公式リファレンス

UIToolbarクラスのtintColorプロパティを利用して、ツールバーの色を変更します。ツールバーの色を変更すると、ボタンの色も連動して変更されます。ボタンの色を個別に変更するには、UIBarButtonItemクラスのtintColorプロパティを利用します（iOS 5.0以降）。

サンプルコード

// ボタンを作成する
UIBarButtonItem * btn1 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"テスト1" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapTest: ) ] autorelease ];
UIBarButtonItem * btn2 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"テスト2" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapTest: ) ] autorelease ];
UIBarButtonItem * btn3 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"テスト3" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapTest: ) ] autorelease ];
UIBarButtonItem * btn4 = [ [ [ UIBarButtonItem alloc ] initWithTitle:@"テスト4" style:UIBarButtonItemStyleBordered target:self action:@selector( onTapTest: ) ] autorelease ];

// １つだけ赤いボタンにする
btn3.tintColor = [ UIColor redColor ];

// ボタンを設定する
toolBar.items = [ NSArray arrayWithObjects:btn1, btn2, btn3, btn4, nil ];
// ツールバーを灰色にする
toolBar.tintColor = [ UIColor grayColor ];
図：tintColorを設定する
図：tintColorを設定する

tintColorプロパティの公式リファレンス

UIToolbarクラスのtranslucentプロパティを利用して、ツールバーを半透明にします。ただし、透明度を指定することはできません。また、ツールバー上のボタンは半透明になりません。

サンプルコード

toolBar.translucent = YES;
図：tintColorとtranslucentを設定する
図：tintColorとtranslucentを設定する

translucentプロパティの公式リファレンス

© 2019 mikami masahiro