UIBarButtonItemに画像を乗せてサイズも調整する

UIBarButtonItemに画像を乗せてサイズも調整する方法をメモします。

UIBarButtonItemに画像を乗せるにはクラスから提供されているメソッドだけではできないようで、少し面倒ですが以下のようにすることで画像を乗せることができます。

やってみる

// バーボタン生成
UIBarButtonItem *barBtn = [[UIBarButtonItem alloc] initWithTitle:@"ぼたん"
    style:UIBarButtonItemStyleBordered 
    target:self 
    action:@selector(showPopupMenu:)];

// バーボタンのテキストの属性を定義
[barBtn setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIFont fontWithName:@"AppleGothic" size:20.0], UITextAttributeFont, nil] forState:UIControlStateNormal];  // (1)

// バーボタンに乗せる画像を定義
UIImage *bgImage = [[UIImage imageNamed:@"button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5)];  // (2)
[navBarBtn setBackgroundImage:bgImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

// ナビゲーションバーにボタンを反映させる
self.navigationItem.rightBarButtonItem = barBtn;

(1) setTitleTextAttributes:forState:メソッドでテキストの属性を変更しています。第1引数でフォント名・サイズを指定、第2引数にボタンの状態を指定しています。
(2) resizableImageWithCapInsets:メソッドで可変式の画像を生成しています。引数にはUIEdgeInsetsMake()関数でサイズを調整しています。

参考記事

Alter a UIBarButtonItem view to be transparent programmatically - Stack Overflow
resizableimagewithcapinsetsでUIImageを引き伸ばす - Wonderful Life
iOS SDK　プログラミング・リファレンス: 【Foundation/UIKit編】 - 大森智史, 中野洋一 - Google ブックス
UIScrollViewに余白を設定する - Hello World