頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


ナビゲーションバーのボタンを変更する

頭と尻尾はくれてやる! ナビゲーションバーの下側の影を消したい
↑この続きなんだけどさ、ナビゲーションバーをのっぺりとさせたからそこに乗せるボタンも合わせてみようとしたんだ。

「赤ちゃんの成長グラフ(Lite)」アプリのナビゲーションバーによく使うのはこういうボタンなんだけど、、、
{
    UIButton *saveButton = [UIButton buttonWithType:100];
    [saveButton setTitle:@"SAVE" forState:UIControlStateNormal];
    [saveButton addTarget:self action:@selector(buttonTappedHandler:) forControlEvents:UIControlEventTouchUpInside];
        
    UIBarButtonItem *saveButtonItem = [[UIBarButtonItem alloc] initWithCustomView:saveButton];
    self.navigationItem.rightBarButtonItem = saveButtonItem;
    [saveButtonItem release];
}
デフォルトのボタン
↑するとこんな感じになるんだ。これじゃだめだよねって俺でも思うよ。

tintColorを設定したボタン
↑tintColorを設定してもやっぱり違う、、、なんか違う。ボタンのグラデーションに違和感を感じるのかな?

とりあえず文字だけにしてみるか、、、
{
    UIButton *saveButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [saveButton setTitle:@"SAVE" forState:UIControlStateNormal];
    [saveButton addTarget:self action:@selector(buttonTappedHandler:) forControlEvents:UIControlEventTouchUpInside];
    saveButton.titleLabel.font = [UIFont systemFontOfSize:10.0];
    saveButton.frame = CGRectMake(320-44, 0, 44, 44);
    [self.navigationController.navigationBar addSubview:saveButton];
}
文字だけのボタン
うーむ、、、これ日本語で'保存'とか表示されたらやっぱり違うよなあ、、、

いわゆる'フラットデザイン'と呼ばれるUIを参考にするとアイコンが多いんだよね。
ここはやはり文字は使わない方がいいのかも?ってことで適当なアイコンを表示させてみるよ。
{
    UIButton *saveButton = [UIButton buttonWithType:UIButtonTypeCustom];
    saveButton.frame = CGRectMake(320-44, 0 , 44, 44);
    [saveButton setImage:[UIImage imageNamed:@"button.png"] forState:UIControlStateNormal];
    [saveButton addTarget:self action:@selector(buttonTappedHandler:) forControlEvents:UIControlEventTouchUpInside];
    [self.navigationController.navigationBar addSubview:saveButton];
}
アイコン画像のボタン
うん、まあ細かいデザインに関しては置いといて、濃いめの背景に白ボタンは鉄板かな。文字を表示するよりはアイコンの方がいい感じ。

タップしたアイコン画像ボタン
↑ちなみにこれだとタップ時にグレーにしてくれる(ユーザーは自分の指に隠れて気がつかないかもしれない)。
これが嫌なら
[saveButton setImage:[UIImage imageNamed:@"button_tapped.png"] forState:UIControlStateHighlighted];
こんな感じでタップ時の画像を用意しておけばOK。
1px下へずれる画像を用意してみたところ押した雰囲気が出るのはいいけど一昔前のデザインって感じが炸裂したので却下したよ。



<< UIButtonのタップと長押しを検出する   TopPage  ナビゲーションバーの下側の影を消したい >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/757-7559d4e4




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad