2012年4月13日 星期五

改頭換面的Tab Bar

感謝藝術家朋友Jorinde Jankowski (張友鷦)提供的可愛圖片,
彼得潘接下來將利用這些活靈活現的動物主角表演tab bar的換裝秀。

1. 修改tab bar顏色
    tabBarController.tabBar.tintColor = [UIColor brownColor];



2. 修改tab bar的背景圖片
     tabBarController.tabBar.backgroundImage = [UIImage imageNamed:@"bar.png"];
     image的高度決定了bar的高度。




     
3. 修改被點選tab上icon的顏色
     tabBarController.tabBar.selectedImageTintColor = [UIColor orangeColor];
     未被點選tab上的icon顏色將是tab bar tintColor的相近顏色。



4. 與眾不同的tab
    想要隨心所欲,讓tab擁有獨一無二的外觀?
    很簡單,只要建立UIButton,
    再將此button貼到tabBar上,
    佔據原先tab所佔的空間,
    即可打造天馬行空的外觀,


    不過有一點別忘了,
    當按扭被點選時,
    需設定UITabBarController物件的selectedIndex才能切換至tab對應的頁面。

    



6 則留言:

  1. 彼得潘您好
    想請問一下關於TabBarView 之間的轉換該如何實作
    假設有3個view而且目前在第3個view

    想在第3個view設一個按鈕讓畫面跳回第一個view
    雖然有方法可以讓畫面跳的第一個([self.tabBarController setSelectedIndex:0]
    ;)

    如此一來TabBar就沒有反應了 (tabBar seletedItem已經被設為0)
    所以想請問彼得潘,需要如何時做才能達到跳回第一個view之後還能正常運作tabBar?

    回覆刪除
    回覆
    1. Tar Bar應該還是能正常運作呀。比方我在第二個tab bar的畫面上加一個button,button按下後執行以下程式碼,
      self.tabBarController.selectedIndex = 0;
      如此將回到第一個tab,然後使用者可以再繼續點選tab切換不同的頁面。

      刪除
    2. 解決了!
      是因為我在這段程式碼上方有加一句 [self.navigationController popToRootViewControllerAnimated:YES];
      讓畫面先跳到NavigationController的第一View再跳到指定的tabBarView
      刪掉後就能正常運作了
      謝謝彼得潘大大~

      刪除
  2. 彼德潘 您好
    想請問我將預設的TabBar icon換成自己的彩色圖片,
    但顯示的時候他卻變成全灰色的(預設顏色)
    如果要讓他在顯示的時候是我自己的彩色圖片,是一樣用您所介紹的,直接建立一個UIButton 在給他加上對應位置嗎?

    回覆刪除
    回覆
    1. 可以利用UIImageRenderingModeAlwaysOriginal,例如以下例子:
      self.tabBarItem.selectedImage = [[UIImage imageNamed:@"castle.jpg"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

      刪除
  3. 作者已經移除這則留言。

    回覆刪除