UITabBarController介绍:4-微信TabBar实现
对于TabBar来说,通常是在App开发的最初阶段就开发完成的,相当于App的框架,后期只需要去定制其中各个子控制器类的功能即可。例如,微信的TabBar长时间以来都是:微信、通讯录、发现和我,4个模块,但每个模块中的功能却可以千变万化。
微信TabBar实现思路
微信的整体App框架包括4个功能模块:微信、通讯录、发现和我,每个功能模块都是对应一个UINavigationController对象,这4个UINavigationController对象装进一个UITabBarController中进行统一管理。因此可以按照如下思路进行:
创建子控制器:分别创建各个功能模块对应的UINavigationController对象,并设置其tabBarItem属性
创建UITabBarController对象,把4个UINavigationController对象装进viewControllers属性中
定制tabBar的外观
其他属性的设置以及功能实现
示例代码
下方的示例代码实现了如何创建微信应用的TabBar。
创建一个Single View Application应用,并预先导入图片素材。
创建子控制器。UITabBarController的子控制器都是UINavigationController对象,因此需要创建4个UINavigationController对象,并设置其tabBarItem属性。在AppDelegate.m文件中的application:didFinishLaunchingWithOptions:方法中编写TabBar初始化相关的方法。
//微信
UIViewController *homeVC = [[UIViewController alloc] init];
homeVC.title = @"微信";
UINavigationController *homeNaviVC = [[UINavigationController alloc] initWithRootViewController:homeVC];
UITabBarItem *item0 = [[UITabBarItem alloc] initWithTitle:homeVC.title image:[UIImage imageNamed:@"tabbar_mainframe"] selectedImage:[UIImage imageNamed:@"tabbar_mainframeHL"]];
homeNaviVC.tabBarItem = item0;
//通讯录
UIViewController *contactVC = [[UIViewController alloc] init];
contactVC.title = @"通讯录";
UINavigationController *contactNaviVC = [[UINavigationController alloc] initWithRootViewController:contactVC];
UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:contactVC.title image:[UIImage imageNamed:@"tabbar_contacts"] selectedImage:[UIImage imageNamed:@"tabbar_contactsHL"]];
contactNaviVC.tabBarItem = item1;
//发现
UIViewController *discoverVC = [[UIViewController alloc] init];
discoverVC.title = @"发现";
UINavigationController *discoverNaviVC = [[UINavigationController alloc] initWithRootViewController:discoverVC];
UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:discoverVC.title image:[UIImage imageNamed:@"tabbar_discover"] selectedImage:[UIImage imageNamed:@"tabbar_discoverHL"]];
discoverNaviVC.tabBarItem = item2;
//我
UIViewController *myVC = [[UIViewController alloc] init];
myVC.title = @"我";
UINavigationController *myNaviVC = [[UINavigationController alloc] initWithRootViewController:myVC];
UITabBarItem *item3 = [[UITabBarItem alloc] initWithTitle:myVC.title image:[UIImage imageNamed:@"tabbar_me"] selectedImage:[UIImage imageNamed:@"tabbar_meHL"]];
myNaviVC.tabBarItem = item3;
- 创建UITabBarController对象。创建UITabBarController对象,把4个UINavigationController对象存入viewControllers属性中.
UITabBarController *tabBarVC = [[UITabBarController alloc] init];
tabBarVC.viewControllers = @[homeNaviVC, contactNaviVC, discoverNaviVC,myNaviVC];
tabBarVC.selectedViewController = homeNaviVC;
- 定制tabBar的外观
tabBarVC.tabBar.backgroundImage = [UIImage imageNamed:@"tabbarBkg"];
//设置选中时文字颜色
tabBarVC.tabBar.tintColor = [UIColor colorWithRed:31/255.0 green:185/255.0 blue:34/255.0 alpha:1.0];
- 定制每个tabBarItem的外观。由于tabBar的tintColor属性在起作用,我们通常系统点击tabBarItem时,显示原始素材的样式,因此,需要设置图片的渲染模式为UIImageRenderingModeAlwaysOriginal.
//选中时使用原图片
for (UITabBarItem *item in tabBarVC.tabBar.items) {
UIImage *image = item.selectedImage;
UIImage *correctImage =[image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item.selectedImage = correctImage;
}
- 设置启动时加载UITabBarController对象
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
/*
//UITabBarController对象初始化代码
...
*/
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.rootViewController = tabBarVC;
[self.window makeKeyAndVisible];
return YES;
}
https://github.com/99ios/9.3.4
素材下载
本案例中使用的素材请到github下载,下载地址:九九学院素材库.
- 使用素材名称:WeChatTabBar.zip
文章发布时间为: November 1st , 2016 at 11:48 am
最后编辑时间为: September 15th , 2017 at 03:05 am
本文由 99ios 创作,转载请注明出处
最后编辑时间为: September 15th , 2017 at 03:05 am
本文由 99ios 创作,转载请注明出处