我們在開發中經常會使用到UITabBarController來布局App應用,使用UITabBarController可以使應用看起來更加的清晰,iOS系統的鬧鍾程序,ipod程序都是非常好的說明和Android的底部導航非常相似,最出名的這種布局莫過於微信。UITabBarController能適用於主線清晰,功能明確的情況,一目了然,這樣App才能將想要展示的數據或者說自己公司的產品情懷更好的服務與用戶,關於UITabBar的層次圖,可以參考官網給出圖片:
頁面布局
講解知識點最好的方法就是實戰,先看下可以實現的效果:
底部的一排導航就是TabBar,旅行,書簽,消息,時鍾都屬於TabBarItem,每個TabBarItem可以設置文字和圖片,寬度是均分的,高度固定為49,最多可以放置五個Item,一般情況為了美觀放置四個,如果超過五個則會多了一個更多的顯示條。
超過五個的效果:
Demo實現
iOS效果實現一般有兩種,一種是直接是StoryBoard中直接拖入一個控件,然后通過代碼設置,另外一種直接是純代碼設置,兩種方式看自己個人的喜好,UITabBarController一般都是程序的主頁面,如果是純代碼設置可以在AppDelegate中的didFinishLaunchingWithOptions實現。
AppDelegate中代碼如下:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; self.window.backgroundColor = [UIColor whiteColor]; UITabBarController *tabBarController=[[UITabBarController alloc]init]; AirPlaneViewController *planeViewController=[[AirPlaneViewController alloc]init]; planeViewController.tabBarItem.title=@"旅行"; planeViewController.tabBarItem.image=[UIImage imageNamed:@"Airplane"]; BookmarkViewController *bookmarkController=[[BookmarkViewController alloc]init]; bookmarkController.tabBarItem.title=@"書簽"; bookmarkController.tabBarItem.image=[UIImage imageNamed:@"Bookmark"]; ChatViewController *chatViewController=[[ChatViewController alloc]init]; chatViewController.tabBarItem.title=@"消息"; chatViewController.tabBarItem.image=[UIImage imageNamed:@"Chat"]; ClockViewController *clockViewController=[[ClockViewController alloc]init]; clockViewController.tabBarItem.title=@"時鍾"; clockViewController.tabBarItem.image=[UIImage imageNamed:@"Clock"]; clockViewController.tabBarItem.badgeValue=@"25"; UIViewController *briefController=[[UIViewController alloc]init]; briefController.tabBarItem.title=@"錢包"; briefController.tabBarItem.image=[UIImage imageNamed:@"Breifcase"]; // UIViewController *chestViewController=[[UIViewController alloc]init]; // chestViewController.tabBarItem.title=@"箱子"; // chestViewController.tabBarItem.image=[UIImage imageNamed:@"Breifcase"]; NSArray *arrControllers=[NSArray arrayWithObjects:planeViewController,bookmarkController,chatViewController,clockViewController,nil]; tabBarController.viewControllers=arrControllers; //設置根控制器 self.window.rootViewController=tabBarController; //設置Window為主窗體 [self.window makeKeyAndVisible]; return YES; }
AirPlaneViewController中的代碼:
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(0, 10, 400, 200)]; label.text=@"博客園:FlyElephant\n博客地址:\nhttp://www.cnblogs.com/xiaofeixiang"; label.numberOfLines=0; [self.view setBackgroundColor:[UIColor cyanColor]]; [self.view addSubview:label]; }
關於UITabBarController中代碼的設置官網給了邏輯很清晰的圖片,簡單易懂:
UITabController中的viewControllers是一個數組集合,只需要將對應的數據設置給UITabBarController的屬性即可,其他的就是操作每個ViewController,設置每個ViewController的頁面布局和設置,關於拖入控件的方式,只需要拖入一個TabBarController即可,效果如下,如果設置對應的子控制器即可:
關於Demo的最終效果演示圖:
UITabBarController默認只支持豎屏,當設備方向放生變化時候,它會查詢viewControllers中包含的所有ViewController,僅當所有的viewController都支持該方向時,UITabBarController才會發生旋轉,否則默認的豎向。當UITabBarController支持旋轉,而且發生旋轉的時候,只有當前顯示的viewController會接收到旋轉的消息。