【UI初级------连载七】标签控制器-优快云博客

本文链接：https://blog.youkuaiyun.com/Wing_n/article/details/48717831

本文详细介绍了如何在iOS应用中结合标签控制器（TabBar）与导航控制器（Navigation），通过创建多个视图控制器并为其分配标签，实现用户友好的多页浏览体验。包括创建标签控制器、设置标签栏样式、创建子控制器以及标签控制器与导航控制器的整合步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容简介：

1、创建标签控制器

2、标签栏（TabBar）的设置

3、创建子控制器

4、标签控制器和导航控制器的结合

一、创建标签控制器（.m文件中）

#import "HomeViewController.h"
#import "MessageViewController.h"
#import "SearchViewController.h"

#import "SettingViewController.h"

//创建几个视图控制器
    HomeViewController *homeVC = [[HomeViewController alloc] init];
    homeVC.title = @"home";
    //最好不要在这里设置视图控制器的title，这样会破坏它的封装性，要在它自己的.m文件中设置

    MessageViewController *messageVC = [[MessageViewController alloc] init];
    messageVC.title = @"message";

    SearchViewController *searchVC = [[SearchViewController alloc] init];
    searchVC.title = @"search";

    SettingViewController *settingVC = [[SettingViewController alloc] init];
    settingVC.title = @"setting";

    NSMutableArray *mArry = [[NSMutableArray alloc] initWithObjects:homeVC, messageVC, searchVC, settingVC, nil];

    for (int i = 0; i < 5; i++) {
        UIViewController *vc = [[UIViewController alloc] init];
        vc.title = [NSString stringWithFormat:@"第%d个控制器",i+5];
        vc.view.backgroundColor = [UIColor colorWithRed:arc4random()%10 *0.1 green:(arc4random()%10 *0.1) blue:arc4random()%10 *0.1 alpha:1];

        [mArry addObject:vc];
    }

    //创建标签控制器
    UITabBarController *tabBarCtrl = [[UITabBarController alloc] init];
    tabBarCtrl.viewControllers = mArry;

    [self.window setRootViewController:tabBarCtrl];

二、标签栏（TabBar）的设置

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.

    CGFloat scrrenWidth = [UIScreen mainScreen].bounds.size.width;
//    CGFloat scrrenHeight = [UIScreen mainScreen].bounds.size.height;

    //=============================================
    [[UIApplication sharedApplication] registerUserNotificationSettings:[[UIUserNotificationSettings alloc] init]];

    [UIApplication sharedApplication].applicationIconBadgeNumber = 5;
    //=============================================

    //******* 创建window窗口 *********************
    //拿到屏幕的大小
    CGRect rect = [UIScreen mainScreen].bounds;
    //创建一个window
    self.window = [[UIWindow alloc]initWithFrame:rect];
    //设置窗口颜色
    self.window.backgroundColor = [UIColor whiteColor];
    //把当前的window作为程序的主window显示出来
    [self.window makeKeyAndVisible];

    //创建几个视图控制器
    HomeViewController *homeVC = [[HomeViewController alloc] init];
    MessageViewController *messageVC = [[MessageViewController alloc] init];
    SearchViewController *searchVC = [[SearchViewController alloc] init];
    SettingViewController *settingVC = [[SettingViewController alloc] init];

    //创建UITabBarController
    UITabBarController *tabbarCtrl = [[UITabBarController alloc] init];
    tabbarCtrl.viewControllers = @[homeVC, messageVC, searchVC, settingVC];

    //使用自定义方式定义tabBarItem
    UITabBarItem *item1 = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:10];
    homeVC.tabBarItem = item1;

    UITabBarItem *item2 = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemBookmarks tag:11];
    item2.badgeValue = @"haha";
    messageVC.tabBarItem = item2;

    UITabBarItem *item3 = [[UITabBarItem alloc] initWithTitle:@"搜索" image:[UIImage imageNamed:@"tabbar_discover.png"] selectedImage:[UIImage imageNamed:@"tabbar_discover_highlighted.png"]];
    searchVC.tabBarItem = item3;

    UITabBarItem *item4 = [[UITabBarItem alloc] initWithTitle:@"联系人" image:[UIImage imageNamed:@"tabbar_profile.png"] selectedImage:[UIImage imageNamed:@"tabbar_profile_highlighted.png"]];
    settingVC.tabBarItem = item4;

    //设置tabBar的背景图片
    UIImage *img = [UIImage imageNamed:@"navbg.png"];

    UIGraphicsBeginImageContext(CGSizeMake(scrrenWidth, 49));
    [img drawInRect:CGRectMake(0, 0, scrrenWidth, 49)];
    img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    tabbarCtrl.tabBar.backgroundImage = img;

    //设置tabBar的背景颜色
//    tabbarCtrl.tabBar.barTintColor = [UIColor cyanColor];

    //设置选中图片的颜色
    tabbarCtrl.tabBar.tintColor = [UIColor cyanColor];

    //设置选中item后，显示在此item下面的图片
    tabbarCtrl.tabBar.selectionIndicatorImage = [UIImage imageNamed:@"选中.png"];

    self.window.rootViewController = tabbarCtrl;



    return YES;
}

三、创建子控制器

}

@end

四、标签控制器和导航控制器的结合

#import "MainTabBarController.h"
#import "HomeViewController.h"
#import "MessageViewController.h"
#import "SearchViewController.h"
#import "SettingViewController.h"
#import "MoreViewController.h"

@interface MainTabBarController ()
{
    CGFloat width;
    CGFloat height;
}
@end

@implementation MainTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //隐藏自己的（系统的）tabBarView
    self.tabBar.hidden = YES;

    //创建自定义的tabBarView
    [self _initViews];

    //创建子控制器
    [self _initViewControllers];
}

- (void)_initViews{
    width = [UIScreen mainScreen].bounds.size.width;
    height = [UIScreen mainScreen].bounds.size.height;

    _tabBarImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, height- 49, width, 49)];
    _tabBarImgView.image = [UIImage imageNamed:@"navbg.png"];
    [self.view addSubview:_tabBarImgView];

    _tabBarImgView.userInteractionEnabled = true;


    //创建选中视图
    UIImageView *selectedImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 53, 45)];
    selectedImgView.tag = 100;
    selectedImgView.image = [UIImage imageNamed:@"选中.png"];

    //创建5个按钮
    for (int i = 0; i < 5; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(width/ 5 * i, 0, width / 5, 49);
        btn.tag = 200 + i;
        NSString *imgName = [NSString stringWithFormat:@"%d",i + 1];
        [btn setImage:[UIImage imageNamed:imgName] forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
        [_tabBarImgView addSubview:btn];

        if (i == 0) {
            selectedImgView.center = btn.center;
        }
    }
    [_tabBarImgView addSubview:selectedImgView];
}

- (void)buttonClick:(UIButton *)btn{
    //设置选择的控制器
    self.selectedIndex = btn.tag - 200;

    UIView *selectedView = [_tabBarImgView viewWithTag:100];

    [UIView animateWithDuration:0.2
                     animations:^{
                         selectedView.center = btn.center;
                     }];
}

- (void)_initViewControllers{
    NSLog(@"控制器");
    //三级控制器
    HomeViewController *homeVC = [[HomeViewController alloc] init];
    MessageViewController *messageVC =[[MessageViewController alloc] init];
    SearchViewController *searchVC = [[SearchViewController alloc] init];
    SettingViewController *settingVC = [[SettingViewController alloc] init];
    MoreViewController *moreVC = [[MoreViewController alloc] init];

    NSArray *viewCtrls = @[homeVC, messageVC, searchVC, settingVC, moreVC];

    NSMutableArray *navs = [NSMutableArray array];
    //二级控制器
    for (int i = 0; i < viewCtrls.count; i ++) {
        UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewCtrls[i]];
        nav.delegate = self;
        [navs addObject:nav];
    }
    //一级控制器
    self.viewControllers = navs;

}

#pragma mark -<UINavigationControllerDelegate>
- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
    //当导航控制器的数量等于2时，隐藏标签栏
    NSInteger count = navigationController.viewControllers.count;
    NSLog(@"%ld", count);
    if (count == 2) {
//        _tabBarImgView.hidden = YES;
        [UIView animateWithDuration:0.25 animations:^{
            _tabBarImgView.frame = CGRectMake(- width, height - 49, width, 49);
        }];
    }else if (count == 1) {
//        tabBarImgView.hidden = NO;
        [UIView animateWithDuration:0.25 animations:^{
            _tabBarImgView.frame = CGRectMake(0, height - 49, width, 49);
        }];
    }

}

@end