頭と尻尾はくれてやる!

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


iPhoneのタブバーをフラットデザインっぽく変えてみる

頭と尻尾はくれてやる! / ナビゲーションバーの色(png画像)を即時変える
↑ここでボタンをタップしたらナビゲーションバーの見た目を変えたので、今度はタブバーも同じようにやってみるよ。

iPhoneのタブバーのサイズは320x49(つまりRetina用だと640x98ピクセルの画像が必要)。
タブバーの見た目を変えるために必要な画像はこんな感じ。
(1)320x49全体の背景の画像(非選択時のタブはこれが見える)
(2)320/n x 49の選択されてるタブの背景画像(n個のタブがあるってことで幅は320÷n)
(3)アイコン画像(選択時と非選択時の両方)

一応フラットデザインっぽいのを狙っているので(1)と(2)はコードでpng画像を生成してみた。
画像生成部分はすでにやったので置いといてタブバーに適用する部分はこんな感じ。
{
    //(1)320x49全体の背景の画像
    [[UITabBar appearance] setBackgroundImage:tabBarImage];
    [self.navigationController.tabBarController.tabBar setBackgroundImage: tabBarImage];

    //(2)選択されてるタブの背景画像
    [[UITabBar appearance] setSelectionIndicatorImage:oneTabImage];
    [self.navigationController.tabBarController.tabBar setSelectionIndicatorImage:oneTabImage];

    //(3)アイコン画像
    UITabBar *tabBar = self.tabBarController.tabBar;
    
    UITabBarItem *item0 = [tabBar.items objectAtIndex:0]; //1番左のタブが0
    [item0 setFinishedSelectedImage:selectedIconImage0 withFinishedUnselectedImage: unselectedIconImage0];

    UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
    [item1 setFinishedSelectedImage:selectedIconImage1 withFinishedUnselectedImage: unselectedIconImage1];

    UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
    [item2 setFinishedSelectedImage:selectedIconImage2 withFinishedUnselectedImage: unselectedIconImage2];

    UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
    [item3 setFinishedSelectedImage:selectedIconImage3 withFinishedUnselectedImage: unselectedIconImage3];
}
(1)と(2)でそれぞれ二行あるのはappearanceを使った場合だと、現在表示しているビューのに対しては反映してくれないからってのもナビゲーションバーの時と同じ。

ってことで「赤ちゃんの成長グラフ」アプリでやってみたんだ。

変更前

↑テスト用タブを追加してそこでボタンをタップすると、、、


変更直後

↑タップした画面がタップした瞬間こんな感じに。


変更後の別タブ

↑別のタブへ行くとこんなのに。ふんふん、意図通りには動いてるみたいだな。

<< 返り値の型が一致してないだと?  TopPage  iPadを横向きで起動するとself.view.boundsが意図通りに取れない >>

コメント


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

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/789-6ff8348d




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

FC2Ad