UIToolbarでツールバーを作る

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

ツールバーのサンプル

ツールバーを表示する

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

  • iPhone:デバイスが縦向き:高さ44
  • iPhone:デバイスが横向き:高さ32
  • iPad:デバイスの向きに関係なく:高さ44

サンプルコード:ViewControllerの画面最下部に空のツールバーを表示する
// ツールバーを作成
UIToolbar * toolBar = [ [ UIToolbar alloc ] initWithFrame:CGRectMake( 0, self.view.bounds.size.height - 44, 320, 44 ) ];

// ツールバーを親Viewに追加
[ self.view addSubview:toolBar ];

空のツールバー
図:空のツールバーを表示する

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

  • iPhoneの場合は、ツールバーは常に画面の最下部に表示する
  • iPadの場合は、最下部と最上部のどちらにも表示できる

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:関数を利用して指定します。

  • UIBarButtonSystemItemFixedSpaceスタイル:固定間隔(間隔を数値で指定)
  • UIBarButtonSystemItemFlexibleSpaceスタイル:可変間隔(余った余白を均等に割り当てる)

サンプルコード:2つのボタンの間隔を固定、左右の間隔を可変にすることで、ボタン群を中央に配置する
// ボタンを作成する
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 ];

// 1つだけ赤いボタンにする
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プロパティの公式リファレンス