常常看到各種 iPhone App 擁有非原本 iOS SDK 的官方 UI 外觀。在自己要硬寫的時候發現,自己寫 TabBarController 的成本好像划不來,因此想到一個小撇步,直接用自己設計的 TabBar 蓋掉原本 TabBar 
的 View,因此某天便花了半小時想說動手做看看。以下記錄自定 TabBar View 蓋過原本 TabBar 但又不失 TabBarController 功能的方法。

在 UIApplication 中加入:

[self.tabBarController.tabBar.superview.addSubview: fakeTabBG];
[self.tabBarController.tabBar.superview addSubview: fakeTab];
[self.tabBarController.tabBar.superview addSubview: fakeNavBar];

在自製的 fakeTabItem (TabBar 下面的 Tab,其實是以 UIButton 實作)

[fakeTabItem4 addTarget:self action:@selector(tabItemPressed:) forControlEvents:UIControlEventTouchUpInside];

每個 Tab Button trigger 原生 tabBarController
- (void)tabItemPressed: (UIButton *) sender
{
    nowTabIndex = [[[NSNumber alloc] initWithInteger: sender.tag] intValue] -1;
    self.tabBarController.selectedIndex = nowTabIndex;
    [self chkPressed];
}

大致即可完成,如圖:

Screen Shot 2011-11-14 at 3.44.56 PM.png   Screen Shot 2011-11-14 at 3.44.28 PM.png  

 

Customized UI影片

 

By DK Tai-Wei Kan

這邊順便 bookmark 一下一個不錯的 iOS UI Patterns 網站,他蒐集了不少自定義 iOS UI 的案例:http://pttrns.com/

arrow
arrow

    DK 發表在 痞客邦 留言(1) 人氣()