iPhone

UINavigationControllerを使っていて、戻るボタンをカスタマイズしたいときがあります。
例えば、

• ボタンを画像にしたい
• サイズを変えたい

などです。

今回はそんな凝り性な方のために、ボタンのカスタマイズの方法を記載します。
AppDelegate.mとか全画面で継承してるUINavigationControllerのサブクラスに以下のコードを書きましょう。

 UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle: @" " style:UIBarButtonItemStylePlain target:nil action:nil];
 [self.navigationItem setBackBarButtonItem:backButton];
    
 UIImage *backImg = [[UIImage imageNamed:@"back.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 10)];
 [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backImg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

まず、何も文字を表示しないUIBarButtonItemをつくります。
これをつくらなかったり文字を表示するボタンを作ってしまうと、ボタンの中に「戻る戻る戻る」というような、文字が連続して表示されてしまいます。

次に、UIImageをつくります。
このとき、UIEdgeInsertsMakeという関数が出てきましたね！
こいつは、マージンをつくってくれます！
html、cssのマージンみたいなものです。
本来は、以下のように使用します。

 UIEdgeInsets insets = UIEdgeInsetsMake( 5.0f, 10.0f, 15.0f, 20.0f);

 CGRect aRect  = UIEdgeInsetsInsetRect( bView.frame, insets);
 aView.frame = aRect;

UIEdgeInsetsはマージンの構造体です。

 typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right;
 } UIEdgeInsets;

また、他のオブジェクトを基準にしてマージンを設定する場合に、基準とするオブジェクトを引数にします。
上の例の場合は、bViewを基準にして上に5、左に10、下に15、右に20のマージンのあるaViewを作ります。
bViewの中に、上記マージンを持つaViewがあるというイメージです。
わかりづらい方は以下のサイトで画像を見てください。
http://runlooprun.wordpress.com/2011/02/20/uiedgeinsets/

で、本題に戻りまして、今回の戻るボタンの場合では、

 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 10)];

ということで、戻る画像の右に10の余白がある状態です。
これで、画像のサイズを調整できます。
戻るボタンの画像デザインを、通常の戻るボタンのように左側を「くの字」にしてる方は、
画像のサイズを伸ばすということは、左の「くの字」部分が伸びてしまうのではないかと懸念するでしょう。
しかし画像の左側13px、右側6pxは固定表示なのです。
そのため「くの字」部分は左側13px以内なので、伸ばされてへんな表示になることはありません。

これで完成です！
より詳しい方法は以下より見てください。
http://www.appcoda.com/customize-navigation-bar-back-butto/