iOS阶段学习第33天笔记(自定义标签栏(UITabBar)介绍)
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 @end 12 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 *)viewController 68 { 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)changed 76 { 77 NSLog(@"%@",viewControllers); 78 } 79 @end
2、方法二 循环遍历创建标签栏
1)创建一个继承自UIButton的类 MyTabbBarItem 用于创建标签栏的按钮
MyTabbBarItem.h 文件中的代码实现
1 #import <UIKit/UIKit.h> 2 @interface MyTabbBarItem : UIButton 3 @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)contentRect 17 { 18 return CGRectMake(0, 30, contentRect.size.width, 15); 19 } 20 21 - (CGRect)imageRectForContentRect:(CGRect)contentRect 22 { 23 return CGRectMake((contentRect.size.width - 26)/2, 2, 26, 26); 24 }
3)自定义标签栏的类 MyTabBarController.h 代码实现
1 #import <UIKit/UIKit.h> 2 @interface MyTabBarController : UITabBarController 3 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 *)btn 108 { 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 //系统自带的标签的高度是49 2 //可以自定义标签来设置不同高度的标签栏 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)testAciton 18 { 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)clickAction 16 { 17 NSLog(@"=============="); 18 }