iOS UI Tab開發

iOS UI Tab開發

iOS UI Tab開發（iOS 8）

tab這種樣式，類似於單選，可以叫radio-style，這是一個現在主流的layout-design，它讓APP內容結構清晰，開發分工邏輯明確，經典的就是，時鐘等

綜述一下：

1.UITabBarController繼承UIViewController，是一個ViewController container

2.UITabBarController擁有一個(readonly)的TabBar，TabBar擁有一到多個TabBarItem

3.每一個Item需要關聯一個自訂的UIViewController，有一個viewControllers屬性，儲存著每一個TabBarItem對應的ViewController，這個數組中元素的順序就是Tabbar上展現的順序

4.TabBarItem展現的Title-Text，如果沒有自己設定，預設是對應的ViewController的title，Image應該主動設定好

5. UITabBarControllerDelegate protocol提供了監控TabBar的操作回調API

6.Embed in UITabBarController的每一個ViewController都會自動調整自己的layout來適應，以防止遮擋下方的Bar

7.TabBarItem如果>=6個，TabBarController會自動調整成如下：

 

接下來說說API

@property(nonatomic, readonly) UITabBar *tabBar

唯讀，不應該嘗試去修改，為了配置item，應該去修改ViewControllers屬性，它存在的意義是 only for situations where you want to display an action sheet using the showFromTabBar: method of the UIActionSheet class.

 

管理ViewControllers API

@property(nonatomic, copy) NSArray *viewControllers

這很明顯是支援自訂的，另外一點：這個屬性被賦值時，customizableViewControllers 屬性的值與之一樣

如果在runtime更換這個屬性，之前selected的index如果不存在，預設會select index = 0

- (void)setViewControllers:(NSArray *)viewControllers animated:(BOOL)animated

意義不大，自我衡量是否需要

@property(nonatomic, copy) NSArray *customizableViewControllers

這個的用處在上面的圖中給過形象化的解釋

@property(nonatomic, readonly) UINavigationController *moreNavigationController

為了管理customizableViewControllers而產生的一個NavigationController

 

管理被選擇中的Tab的API

@property(nonatomic, assign) UIViewController *selectedViewController

可以設定或者訪問當前選中的ViewController

@property(nonatomic) NSUInteger selectedIndex

與selectedViewController對應

 

UITabBarControllerDelegate

決定哪一個tab是否應該被選中

在選中tab之後執行action

在自訂tab順序前後執行action

重寫view旋轉設定

支援配置自訂過渡動畫

對應的method請參閱文檔

UITabBar

 

//讓使用者自訂items的布局，系統會自動彈出一個帶有Done按鈕的視圖

[self.tabBar beginCustomizingItems:@[item1, item3, item2]];

// 設定item位置的樣式

self.tabBar.itemPositioning = UITabBarItemPositioningCentered;

//以下2個屬性需要設定Centered樣式才有作用，否則無效

self.tabBar.itemSpacing = 80.0f;

self.tabBar.itemWidth = 30.0f;

 

UITabBarItem

 

UITabBarItem *item = [[UITabBarItem alloc] initWithTitle:@"Test" image:nil tag:0];

//設定item上title-text的顏色

[item setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]} forState:UIControlStateNormal];

 

[item setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor darkGrayColor]} forState:UIControlStateSelected];

// 設定Item的image屬性，To prevent system coloring,預設系統會使用圖片資源的alpha值自己產生出來一張圖片，很多時候我們設定圖片不起作用的原因

item.image = [[UIImage imageNamed:@"color"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

//設定背景圖片的內凹變化，正值向內縮小，負值向外延伸

UIEdgeInsets insets;

insets.left = -5;

insets.right = -5;

item.imageInsets = insets;

 

//設定item.title位置位移

UIOffset offset;

offset.horizontal = 30;

offset.vertical = -10;

[item setTitlePositionAdjustment:offset];

 

UITabBarDelegate

提供了操作Tab時的回調API，詳細參考官方文檔

 

總結：

內容展示類，功能類的APP最外層的layout-design，推薦基於Tab的方式