iOS阶段学习第33天笔记(自定义标签栏(tabBar)介绍)

2019-11-14 18:25:37

字体：大中小

来源：转载

供稿：网友

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;

3、UITabbarController的视图层级关系;利用Window 实现QQ右侧菜单视图功能

1）AppDelegate.m 代码实现

 1  #import "AppDelegate.h" 2  #import "ViewController.h"  3 @interface AppDelegate () 4 { 5     UIWindow *_w; 6 } 7 @end  8 @implementation AppDelegate  9 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  10     _w = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];11     _w.backgroundColor = [UIColor purpleColor];          _w.rootViewController = [RootViewController new];     12     [_w makeKeyAndVisible];      13     UITabBarController *tabbar = [[UITabBarController alloc]init]; 14     UINavigationController *navi = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];15     navi.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemContacts tag:100]; 16     tabbar.viewControllers = @[navi];     17     self.window.rootViewController = tabbar;18     self.window.backgroundColor = [UIColor clearColor]; 19     return YES;20 }

2）ViewController.m window切换代码实现

 1 #import "ViewController.h"  2 @interface ViewController ()  3 @end  4 @implementation ViewController  5 - (void)viewDidLoad { 6     [super viewDidLoad];  7     self.view.backgroundColor = [UIColor blueColor]; 8     self.title = @"首页";  9     UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 300)];10     label.backgroundColor = [UIColor redColor];11     [self.view addSubview:label];12     13     self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks
       target:self action:@selector(testAciton)];14     15 }16 17 -(void)testAciton18 {19     UIView *window = self.navigationController.tabBarController.view.superview;  20     [UIView animateWithDuration:1.0 animations:^{21         window.center = CGPointMake(300, 240);22         window.transform = CGAffineTransformScale(window.transform, 0.8, 0.8);23     }];24     25     //视图层级关系26     UIView *layoutContainerView = window.subviews[0]; 27     UIView *transitionView = layoutContainerView.subviews[0]; 28     UIView *wrapperView = transitionView.subviews[0]; 29     UIView *layoutView = wrapperView.subviews[0]; 30     UIView *naviTransitionView = layoutView.subviews[0]; 31     UIView *naviWrapperView = naviTransitionView.subviews[0];  32     UIView *uiview = naviWrapperView.subviews[0]; 33     NSLog(@"%@",uiview.subviews); 34     //判断两个视图坐标是否重合或发生碰撞35     //CGRectIntersectsRect(<#CGRect rect1#>, <#CGRect rect2#>);   36 }

3）RootViewController.m 右侧展现视图代码实现

 1 #import "RootViewController.h" 2 @interface RootViewController () 3 @end 4 @implementation RootViewController 5 - (void)viewDidLoad { 6     [super viewDidLoad];      7     self.view.backgroundColor = [UIColor yellowColor]; 8      9     UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];10     btn.frame = CGRectMake(10, 100, 300, 50);11     btn.backgroundColor = [UIColor whiteColor];12     [self.view addSubview:btn];13     [btn addTarget:self action:@selector(clickAction) forControlEvents:UIControlEventTouchUpInside];14 }15 -(void)clickAction16 {17     NSLog(@"==============");18 }