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

iOS学习(UI)知识点整理

一、自定义标签栏

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

 #import "AppDelegate.h"
 #import "SecondViewController.h"
 #import "ViewController.h"
 #import "ThirdViewController.h"
 #import "ForthViewController.h"
 #import "ViewController1.h"
 #import "ViewController2.h"
 #import "ViewController3.h"
 #import "ViewController4.h"
 @interface AppDelegate ()<UITabBarControllerDelegate>
 @end

 @implementation AppDelegate
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     //1.直接设置默认的标签的属性
     UINavigationController *navi1 = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];
     //设置navi1所对应的界面的标签的标题
     navi1.tabBarItem.title = @"home";
     //设置navi1所对应的标签的图标
     navi1.tabBarItem.image = [[UIImage imageNamed:@"tabbar_account_press"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
     //2.直接创建一个新的标签
     UIViewController *vc1 = [ViewController1 new];
     //创建的方式里面包含三个参数:文字标题,普通状态下的图片,选中状态下的图片
     UITabBarItem *item = [[UITabBarItem alloc]initWithTitle:@"界面二"  image:[UIImage imageNamed:@"tabbar_appfree"] 
       selectedImage:[UIImage imageNamed:@"tabbar_account"]];
     vc1.tabBarItem = item;
     //设置数字徽标,用来提示用户
     item.badgeValue = @"";
     //设置系统图标右上角的数字
     [[UIApplication sharedApplication] setApplicationIconBadgeNumber:];

     //3.创建标签的另一种方式
     UINavigationController *navi2 = [[UINavigationController alloc]initWithRootViewController:[ViewController2 new]];
     //参数:标题和图片
     UITabBarItem *item2 = [[UITabBarItem alloc]initWithTitle:@"界面三" image:[UIImage imageNamed:@"tabbar_reduceprice"] tag:];
     item2.selectedImage = [UIImage imageNamed:@"tabbar_subject"];
     navi2.tabBarItem = item2; 

     //4.他们系统样式的标签
     UINavigationController *navi3 = [[UINavigationController alloc]initWithRootViewController:[ViewController3 new]];
     //使用系统的样式创建标签,图片和文字都无法修改
     navi3.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemDownloads tag:];
     //无法修改
     navi3.tabBarItem.title = @"界面四";
     UINavigationController *navi4 = [[UINavigationController alloc]initWithRootViewController:[ViewController4 new]];
     navi4.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemFeatured tag:];

     //如果创建的标签数量大于5个,则从第5个开始(包括第5个)都会被放到More标签中
     UINavigationController *navi5 = [[UINavigationController alloc]initWithRootViewController:[SecondViewController new]];
     navi5.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemHistory tag:];

     //创建标签栏控制器
     UITabBarController *tabbar = [[UITabBarController alloc]init];
     //设置标签栏控制器所管理的视图控制器
     tabbar.viewControllers = @[navi1,vc1,navi2,navi3,navi4,navi5];
     NSInteger index = [[[NSUserDefaults standardUserDefaults]valueForKey:@"selectedindex"] integerValue];
      //设置tabbar选中的标签
     tabbar.selectedIndex = index;
     tabbar.delegate = self;
     self.window.rootViewController = tabbar;
     self.window.backgroundColor = [UIColor whiteColor];
     return YES;
 }

 //选中某一个视图控制器的时候,调用该方法
 - (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
 {
     [[NSUserDefaults standardUserDefaults]setValue:@(tabBarController.selectedIndex) forKey:@"selectedindex"];
     [[NSUserDefaults standardUserDefaults]synchronize];
     NSLog(@"%@",viewController);
 }

 //自定义视图控制器完成的时候调用
 - (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray *)viewControllers 
     changed:(BOOL)changed
 {
     NSLog(@"%@",viewControllers);
 }
 @end

2、方法二 循环遍历创建标签栏

1）创建一个继承自UIButton的类 MyTabbBarItem 用于创建标签栏的按钮

MyTabbBarItem.h  文件中的代码实现

 #import <UIKit/UIKit.h>
  @interface MyTabbBarItem : UIButton
  @end

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

 #import "MyTabbBarItem.h"
 @implementation MyTabbBarItem
 - (instancetype)initWithFrame:(CGRect)frame
 {
     self = [super initWithFrame:frame];
     if (self) {
         self.titleLabel.font = [UIFont systemFontOfSize:];
         self.titleLabel.textAlignment = NSTextAlignmentCenter;
         [self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
         [self setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
     }
     return self;
 }

 //这个方法返回的cgrect是按钮上的title部分的位置和大小
 - (CGRect)titleRectForContentRect:(CGRect)contentRect
 {
     return CGRectMake(, , contentRect.size.width, );
 }

 - (CGRect)imageRectForContentRect:(CGRect)contentRect
 {
     return CGRectMake((contentRect.size.width - )/, , , );
 }

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

 #import <UIKit/UIKit.h>
 @interface MyTabBarController : UITabBarController

 @end

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

 #import "MyTabBarController.h"
 #import "ViewController.h"
 #import "ViewController1.h"
 #import "ViewController2.h"
 #import "ViewController3.h"
 #import "ViewController4.h"
 #import "MyTabbBarItem.h"

 @interface MyTabBarController ()
 {
     UIImageView *_myTabbar;
 }
 @end

 @implementation MyTabBarController

 - (void)viewDidLoad {
     [super viewDidLoad];

     //配置标签栏控制器
     //自定义标签栏的步骤

     //1.隐藏系统的标签栏
     self.tabBar.hidden = YES;

     //3.创建所有的视图控制器
     [self createViewControllers];

     //2.创建一个新标签栏
     [self createTabbar];

     //4.创建所有标签
     [self createTabs];

     //5.标签和视图控制器进行关联     

 }

 -(void)createTabbar
 {
     CGRect frame = [[UIScreen mainScreen]bounds];
     frame.origin.y = frame.size.height - ;
     frame.size.height = ;

     _myTabbar = [[UIImageView alloc]initWithFrame:self.tabBar.bounds];

     _myTabbar.backgroundColor = [UIColor blueColor];

     //将自定义标签栏添加在系统标签栏上
     [self.tabBar addSubview:_myTabbar];
     _myTabbar.userInteractionEnabled = YES;
}
 -(void)createViewControllers
 {
     NSArray *vcArray = @[@"ViewController",
                          @"ViewController1",
                          @"ViewController2",
                          @"ViewController3",
                          @"ViewController4"];

     NSMutableArray *vcs = [[NSMutableArray alloc]init];
     for (int i = ; i<vcArray.count; i++) {
         //反射(将字符串对象转换成对应的类对象)
         UIViewController *vc = [[NSClassFromString(vcArray[i]) alloc]init];
         vc.navigationItem.title = vcArray[i];
         UINavigationController *navi = [[UINavigationController alloc]initWithRootViewController:vc];
         [vcs addObject:navi];
     }
     self.viewControllers = vcs;
 }

 -(void)createTabs
 {
     NSArray *titleArray = @[@"首页",@"社会",@"金融",@"法制",@"教育"];
     NSArray *imageArray = @[@"tabbar_account",
                             @"tabbar_appfree",
                             @"tabbar_limitfree",
                             @"tabbar_reduceprice",
                             @"tabbar_subject"];
     NSArray *imageSelectedArray = @[@"tabbar_account_press",
                             @"tabbar_appfree_press",
                             @"tabbar_limitfree_press",
                             @"tabbar_reduceprice_press",
                             @"tabbar_subject_press"];

     for (int i = ; i<titleArray.count; i++) {
         MyTabbBarItem *btn = [MyTabbBarItem buttonWithType:UIButtonTypeCustom];
         [btn setTitle:titleArray[i] forState:UIControlStateNormal];
         [btn setImage:[UIImage imageNamed:imageArray[i]] forState:UIControlStateNormal];
         [btn setImage:[UIImage imageNamed:imageSelectedArray[i]] forState:UIControlStateSelected];
         if (i == ) {
             btn.selected = YES;
         }
         CGFloat width = [[UIScreen mainScreen]bounds].size.width/;
         btn.frame = CGRectMake(width * i, , width, );
         [_myTabbar addSubview:btn];
         btn.tag =  + i;
         [btn addTarget:self action:@selector(selectAction:) forControlEvents:UIControlEventTouchUpInside];
     }
 }

 -(void)selectAction:(UIButton *)btn
 {
     NSInteger index = btn.tag - ;
     self.selectedIndex = index;
     for (UIButton *btn in _myTabbar.subviews) {
         btn.selected = NO;
     }
     //设置selected属性
     btn.selected = YES;
 }

 @end

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

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

 

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

1）AppDelegate.m 代码实现

  #import "AppDelegate.h"
  #import "ViewController.h"
 @interface AppDelegate ()
 {
     UIWindow *_w;
 }
 @end
 @implementation AppDelegate
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     _w = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
     _w.backgroundColor = [UIColor purpleColor];          _w.rootViewController = [RootViewController new];
     [_w makeKeyAndVisible];
     UITabBarController *tabbar = [[UITabBarController alloc]init];
     UINavigationController *navi = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];
     navi.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemContacts tag:];
     tabbar.viewControllers = @[navi];
     self.window.rootViewController = tabbar;
     self.window.backgroundColor = [UIColor clearColor];
     return YES;
 }  

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

 #import "ViewController.h"
 @interface ViewController ()
 @end
 @implementation ViewController
 - (void)viewDidLoad {
     [super viewDidLoad];
     self.view.backgroundColor = [UIColor blueColor];
     self.title = @"首页";
     UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(, , , )];
     label.backgroundColor = [UIColor redColor];
     [self.view addSubview:label];

     self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks
       target:self action:@selector(testAciton)];

 }

 -(void)testAciton
 {
     UIView *window = self.navigationController.tabBarController.view.superview;
     [UIView animateWithDuration:1.0 animations:^{
         window.center = CGPointMake(, );
         window.transform = CGAffineTransformScale(window.transform, 0.8, 0.8);
     }];

     //视图层级关系
     UIView *layoutContainerView = window.subviews[];
     UIView *transitionView = layoutContainerView.subviews[];
     UIView *wrapperView = transitionView.subviews[];
     UIView *layoutView = wrapperView.subviews[];
     UIView *naviTransitionView = layoutView.subviews[];
     UIView *naviWrapperView = naviTransitionView.subviews[];
     UIView *uiview = naviWrapperView.subviews[];
     NSLog(@"%@",uiview.subviews);
     //判断两个视图坐标是否重合或发生碰撞
     //CGRectIntersectsRect(<#CGRect rect1#>, <#CGRect rect2#>);
 }

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

 #import "RootViewController.h"
 @interface RootViewController ()
 @end
 @implementation RootViewController
 - (void)viewDidLoad {
     [super viewDidLoad];
     self.view.backgroundColor = [UIColor yellowColor];

     UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
     btn.frame = CGRectMake(, , , );
     btn.backgroundColor = [UIColor whiteColor];
     [self.view addSubview:btn];
     [btn addTarget:self action:@selector(clickAction) forControlEvents:UIControlEventTouchUpInside];
 }
 -(void)clickAction
 {
     NSLog(@"==============");
 }