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/