你的位置:首页 > 操作系统

[操作系统]iOS阶段学习第33天笔记(自定义标签栏(tabBar)介绍)


iOS学习(UI)知识点整理

一、自定义标签栏

1)方法一 单个创建标签栏 

 1 #import "AppDelegate.h" 2 #import "SecondViewController.h" 3 #import "ViewController.h" 4 #import "ThirdViewController.h" 5 #import "ForthViewController.h" 6 #import "ViewController1.h" 7 #import "ViewController2.h" 8 #import "ViewController3.h" 9 #import "ViewController4.h"10 @interface AppDelegate ()<UITabBarControllerDelegate> 11 @end12 13 @implementation AppDelegate 14 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {15   //1.直接设置默认的标签的属性16   UINavigationController *navi1 = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];17   //设置navi1所对应的界面的标签的标题18   navi1.tabBarItem.title = @"home";19   //设置navi1所对应的标签的图标20   navi1.tabBarItem.image = [[UIImage imageNamed:@"tabbar_account_press"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];21   //2.直接创建一个新的标签22   UIViewController *vc1 = [ViewController1 new];23   //创建的方式里面包含三个参数:文字标题,普通状态下的图片,选中状态下的图片24   UITabBarItem *item = [[UITabBarItem alloc]initWithTitle:@"界面二" image:[UIImage imageNamed:@"tabbar_appfree"] 
selectedImage:[UIImage imageNamed:@"tabbar_account"]];25 vc1.tabBarItem = item;26 //设置数字徽标,用来提示用户27 item.badgeValue = @"20";28 //设置系统图标右上角的数字29 [[UIApplication sharedApplication] setApplicationIconBadgeNumber:55];30 31 32 //3.创建标签的另一种方式33 UINavigationController *navi2 = [[UINavigationController alloc]initWithRootViewController:[ViewController2 new]];34 //参数:标题和图片35 UITabBarItem *item2 = [[UITabBarItem alloc]initWithTitle:@"界面三" image:[UIImage imageNamed:@"tabbar_reduceprice"] tag:100];36 item2.selectedImage = [UIImage imageNamed:@"tabbar_subject"];37 navi2.tabBarItem = item2; 38 39 40 //4.他们系统样式的标签41 UINavigationController *navi3 = [[UINavigationController alloc]initWithRootViewController:[ViewController3 new]];42 //使用系统的样式创建标签,图片和文字都无法修改43 navi3.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemDownloads tag:200];44 //无法修改45 navi3.tabBarItem.title = @"界面四";46 UINavigationController *navi4 = [[UINavigationController alloc]initWithRootViewController:[ViewController4 new]];47 navi4.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemFeatured tag:101];48 49 //如果创建的标签数量大于5个,则从第5个开始(包括第5个)都会被放到More标签中50 UINavigationController *navi5 = [[UINavigationController alloc]initWithRootViewController:[SecondViewController new]];51 navi5.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemHistory tag:101];52 53 //创建标签栏控制器54 UITabBarController *tabbar = [[UITabBarController alloc]init];55 //设置标签栏控制器所管理的视图控制器56 tabbar.viewControllers = @[navi1,vc1,navi2,navi3,navi4,navi5]; 57 NSInteger index = [[[NSUserDefaults standardUserDefaults]valueForKey:@"selectedindex"] integerValue];58 //设置tabbar选中的标签59 tabbar.selectedIndex = index;60 tabbar.delegate = self;61 self.window.rootViewController = tabbar;62 self.window.backgroundColor = [UIColor whiteColor];63 return YES;64 }65 66 //选中某一个视图控制器的时候,调用该方法67 - (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController68 {69 [[NSUserDefaults standardUserDefaults]setValue:@(tabBarController.selectedIndex) forKey:@"selectedindex"];70 [[NSUserDefaults standardUserDefaults]synchronize];71 NSLog(@"%@",viewController);72 }73 74 //自定义视图控制器完成的时候调用75 - (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray *)viewControllers
changed:(BOOL)changed76 {77 NSLog(@"%@",viewControllers); 78 }79 @end

 
2)方法二 循环遍历创建标签栏
 
 1)创建一个继承自UIButton的类 MyTabbBarItem 用于创建标签栏的按钮
      MyTabbBarItem.h  文件中的代码实现 

1 #import <UIKit/UIKit.h>2 @interface MyTabbBarItem : UIButton3 @end

2) MyTabbBarItem.m  文件中的代码实现

 1 #import "MyTabbBarItem.h" 2 @implementation MyTabbBarItem 3 - (instancetype)initWithFrame:(CGRect)frame 4 { 5   self = [super initWithFrame:frame]; 6   if (self) { 7     self.titleLabel.font = [UIFont systemFontOfSize:12]; 8     self.titleLabel.textAlignment = NSTextAlignmentCenter; 9     [self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];10     [self setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];11   }12   return self;13 }14 15 //这个方法返回的cgrect是按钮上的title部分的位置和大小16 - (CGRect)titleRectForContentRect:(CGRect)contentRect17 {18   return CGRectMake(0, 30, contentRect.size.width, 15);19 }20 21 - (CGRect)imageRectForContentRect:(CGRect)contentRect22 {23   return CGRectMake((contentRect.size.width - 26)/2, 2, 26, 26);24 }

3)自定义标签栏的类 MyTabBarController.h 代码实现

1 #import <UIKit/UIKit.h>2 @interface MyTabBarController : UITabBarController3 4 @end

4)自定义标签栏的类 MyTabBarController.m 代码实现

 1 #import "MyTabBarController.h" 2 #import "ViewController.h" 3 #import "ViewController1.h" 4 #import "ViewController2.h" 5 #import "ViewController3.h" 6 #import "ViewController4.h" 7 #import "MyTabbBarItem.h" 8  9 @interface MyTabBarController () 10 { 11   UIImageView *_myTabbar; 12 } 13 @end 14  15 @implementation MyTabBarController 16  17 - (void)viewDidLoad { 18   [super viewDidLoad]; 19    20   //配置标签栏控制器 21   //自定义标签栏的步骤 22    23   //1.隐藏系统的标签栏 24   self.tabBar.hidden = YES; 25    26   //3.创建所有的视图控制器 27   [self createViewControllers]; 28    29   //2.创建一个新标签栏 30   [self createTabbar]; 31    32   //4.创建所有标签 33   [self createTabs]; 34    35   //5.标签和视图控制器进行关联    36    37 } 38  39 -(void)createTabbar 40 { 41   CGRect frame = [[UIScreen mainScreen]bounds]; 42   frame.origin.y = frame.size.height - 49; 43   frame.size.height = 49; 44    45   _myTabbar = [[UIImageView alloc]initWithFrame:self.tabBar.bounds]; 46    47   _myTabbar.backgroundColor = [UIColor blueColor]; 48   49   //将自定义标签栏添加在系统标签栏上 50   [self.tabBar addSubview:_myTabbar]; 51   _myTabbar.userInteractionEnabled = YES;} 54 -(void)createViewControllers 56 { 57   NSArray *vcArray = @[@"ViewController", 58             @"ViewController1", 59             @"ViewController2", 60             @"ViewController3", 61             @"ViewController4"]; 62    63   NSMutableArray *vcs = [[NSMutableArray alloc]init]; 64   for (int i = 0; i<vcArray.count; i++) { 65     //反射(将字符串对象转换成对应的类对象) 66     UIViewController *vc = [[NSClassFromString(vcArray[i]) alloc]init]; 67     vc.navigationItem.title = vcArray[i]; 68     UINavigationController *navi = [[UINavigationController alloc]initWithRootViewController:vc]; 69     [vcs addObject:navi]; 70   } 71   self.viewControllers = vcs; 72 } 73  74 -(void)createTabs 75 { 76   NSArray *titleArray = @[@"首页",@"社会",@"金融",@"法制",@"教育"]; 77   NSArray *imageArray = @[@"tabbar_account", 78               @"tabbar_appfree", 79               @"tabbar_limitfree", 80               @"tabbar_reduceprice", 81               @"tabbar_subject"]; 82   NSArray *imageSelectedArray = @[@"tabbar_account_press", 83               @"tabbar_appfree_press", 84               @"tabbar_limitfree_press", 85               @"tabbar_reduceprice_press", 86               @"tabbar_subject_press"]; 87    88    89   for (int i = 0; i<titleArray.count; i++) { 90     MyTabbBarItem *btn = [MyTabbBarItem buttonWithType:UIButtonTypeCustom]; 91     [btn setTitle:titleArray[i] forState:UIControlStateNormal]; 92     [btn setImage:[UIImage imageNamed:imageArray[i]] forState:UIControlStateNormal]; 93     [btn setImage:[UIImage imageNamed:imageSelectedArray[i]] forState:UIControlStateSelected]; 94     if (i == 0) { 95       btn.selected = YES; 96     } 97     CGFloat width = [[UIScreen mainScreen]bounds].size.width/5; 98     btn.frame = CGRectMake(width * i, 0, width, 49); 99     [_myTabbar addSubview:btn];100     btn.tag = 100 + i;101     [btn addTarget:self action:@selector(selectAction:) forControlEvents:UIControlEventTouchUpInside]; 103   } 105 }106 107 -(void)selectAction:(UIButton *)btn108 {109   NSInteger index = btn.tag - 100;110   self.selectedIndex = index; 112   for (UIButton *btn in _myTabbar.subviews) {113     btn.selected = NO;114   } 116   //设置selected属性117   btn.selected = YES;118 }119 120 @end

5)AppDelegate.m  文件中的代码实现

1 //系统自带的标签的高度是492 //可以自定义标签来设置不同高度的标签栏3 //此处不能指定导航栏否则标签栏无法显示,因为后面会指定导航栏4 MyTabBarController *tabbar = [[MyTabBarController alloc]init];5 self.window.rootViewController = tabbar;6 self.window.backgroundColor = [UIColor whiteColor];7 return YES;