免费开源的iOS开发学习平台

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