Menu

Category

Archive

logo


Navigation Bar のカスタマイズ

2014-07-08 10:00:00 +0900
  • このエントリーをはてなブックマークに追加

Navigation Bar のカスタマイズ方法のメモ。

タイトルに画像

Navigation Bar のタイトル(真ん中)に文字列を表示する以外にも、画像等を置くことができます。そのためには、Navigation Bar Item の titleView プロパティを使用します。この titleView プロパティには、UIView のサブクラスならなんでも設定可能。今回は画像を設定します。

1
2
3
4
5
6
7
8
9
10
11
12
- (void)viewDidLoad{
	[super viewDidLoad];

	/* Create an Image View to replace the Title View */
	UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 40.0f)];
	imageView.contentMode = UIViewContentModeScaleAspectFit;

	/* Load an image. Be careful, this image will be cached */
	UIImage *image = [UIImage imageNamed:@"Logo"]; /* Set the image of the Image View */
	[imageView setImage:image]; /* Set the Title View */
    self.navigationItem.titleView = imageView;
}

Apple は、この titleView の高さが 128 points 以上にならないよう勧めているようです。もし、高さ 128 pixels の画像を設定した場合、Retina ディスプレイでは、64 points になります。300 pixels では、150 points になってしまいます。これらを調整するために、ビューの contentMode を UIViewContentModeScaleAspectFit に設定することで、調整してくれます。

Apple が提供してくれている SystemItem は以外に種類が豊富です。これらは、initWithBarButtonSystemItem:target:action: の Initializer を使用し、最初の引数に UIBarButtonSystemItem Enumeration の値を指定します。その一覧。

Value Image
UIBarButtonSystemItemDone
UIBarButtonSystemItemCancel
UIBarButtonSystemItemEdit
UIBarButtonSystemItemSave
UIBarButtonSystemItemAdd
UIBarButtonSystemItemCompose
UIBarButtonSystemItemReply
UIBarButtonSystemItemAction
UIBarButtonSystemItemOrganize
UIBarButtonSystemItemBookmarks
UIBarButtonSystemItemSearch
UIBarButtonSystemItemRefresh
UIBarButtonSystemItemStop
UIBarButtonSystemItemCamera
UIBarButtonSystemItemTrash
UIBarButtonSystemItemPlay
UIBarButtonSystemItemPause
UIBarButtonSystemItemRewind
UIBarButtonSystemItemFastForward
UIBarButtonSystemItemUndo
UIBarButtonSystemItemRedo

これらの値をこんな感じに。

1
2
3
4
self.navigationItem.leftBarButtonItem =
	[[UIBarButtonItem alloc]
		initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self
		action:@selector(performAdd:)];

UIBarButtonSystemItem Enumeration には他にも、UIBarButtonSystemItemFlexibleSpace と UIBarButtonSystemItemFixedSpace とアイテム間の幅を調整するものがあります。また、UIBarButtonSystemItemPageCurl という toolbar の中で使用するものがあります。

上記のシステムのボタンを使い以外にも、自分のビューを追加することができます。initWithCustomView: Initializer によって実装します。

1
2
3
4
5
6
7
8
self.title = @"Button Demo";

UISwitch *simpleSwitch = [[UISwitch alloc] init];
simpleSwitch.on = YES;
[simpleSwitch addTarget:self
                 action:@selector(switchIsChanged:) forControlEvents:UIControlEventValueChanged];
self.navigationItem.rightBarButtonItem =
[[UIBarButtonItem alloc] initWithCustomView:simpleSwitch];

このように UISwitch も追加できます。画像等を追加したり、自由自在にカスタマイズすることができます。

参考

iOS 7 Programming Cookbook