您的位置:首页 > 产品设计 > UI/UE

iOS开发:标签视图控制器(UITabBarController)

2015-09-09 22:23 701 查看
iOS开发:标签视图控制器(UITabBarController)
一:了解:

1、结构:三层



2.重要的属性



3.运用:微信、QQ等都有运用(底下的每一个图标对应着一个视图控制器,之间并没有什么联系,最多就是传值)



二:具体实现(模拟豆瓣)

1.创建多个tabBarController:

(1)第一个:

ViewController *vc = [[ViewController alloc]init];
UINavigationController *nav1 = [[UINavigationController alloc]initWithRootViewController:vc];
vc.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"豆瓣" image:[UIImage imageNamed:@"iconfont-douban.png"] tag:1000];
(2)第二个:
FindViewController *findVC = [[FindViewController alloc]init];
UINavigationController *nav2 = [[UINavigationController alloc]initWithRootViewController:findVC];
findVC.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"发现" image:[UIImage imageNamed:@"iconfont-faxian.png"] tag:1001];

(3)第三个:
CircleViewController *circleVC = [[CircleViewController alloc]init];
UINavigationController *nav3 = [[UINavigationController alloc]initWithRootViewController:circleVC];
circleVC.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"圈子" image:[UIImage imageNamed:@"iconfont-quanzi.png"] tag:1002];

(4)第四个:
MyViewController *myVC = [[MyViewController alloc]init];
UINavigationController *nav4 = [[UINavigationController alloc]initWithRootViewController:myVC];
myVC.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"我的" image:[UIImage imageNamed:@"iconfont-wode.png"] tag:1003];

UITabBarController *tabBarController = [[UITabBarController alloc]init];
tabBarController.viewControllers = @[nav1, nav2, nav3, nav4];
_window.rootViewController = tabBarController;
效果图:



//给底层加颜色
[[UITabBar appearance] setBarTintColor:[UIColor redColor]];



//设置透明度(去掉高度(49))
tabBarController.tabBar.translucent = NO;

//添加导航条标题
self.navigationItem.title = @"Kevin";
self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"Zapfino" size:20], NSFontAttributeName,
nil];



*注意:如果写self.title = @"圈子";那么底下tabBar会同步输出。
//高大上,不解释
myVC.tabBarItem.badgeValue = @"new";

circleVC.tabBarItem.badgeValue = @"+99";



最终效果图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: