iPhone X UITabBarController UITabBar 适配解读

iPhone X 简直就是神一般的存在

iPhone X的分辨率是：1125 X 2436
但是iPhone X的 UIScreen bounds 却是：CGRectMake(0, 0, 375, 812)

#define isIphoneX   CGRectEqualToRect([UIScreen mainScreen].bounds, CGRectMake(0, 0, 375, 812))

其次是tabbar高度，在iPhone 4,5,6,7,8(plus略过)上tabbar的高度是49 ，在iPhone X 上也是49 ，不是83吗？？，我们写一个包含tabbar的项目在iPhone X 上运行看下。。

上面我们提到 iPhone X的tabbar高度是49，但是底部无效点击区域的高度是33 ，所以有点地方也说iPhone X的tabbar高度是 82 ，为什么说下面高度33 的区域是无效点击区域了？？来张gif

那么这个就比较尴尬了。。。。虽然在iPhone X上微信和 app store都是这个样子，底部有无效的区域；但是总有个别另类把无效区域变成有效区域先来张图。。。

某宝的APP ，我们不能说某宝的APP始作俑者，但是对于展示类的APP来说屏幕区域展示多多益善，展示类APP巴不得全屏展示。。。或许这种展示类的APP的产品经理看到iPhone X 的淘宝，然后对程序猿说：跟淘宝一样，不用我说程序猿肯定脸一黑我朝APP市场不就是一直在模仿从未被超越吗？？如何能做到跟淘宝一样了？？首先我们需要把系统的tabbar搞出来，这是第一步

1.构造系统的tabbar


#import "ViewController.h"
#import "H1ViewController.h"
#import "H2ViewController.h"
#import "H3ViewController.h"
#import "H4ViewController.h"#define isIphoneX   CGRectEqualToRect([UIScreen mainScreen].bounds, CGRectMake(0, 0, 375, 812))@interface ViewController (){UITabBarController *viewController;
}@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];H1ViewController *h1 = [[H1ViewController alloc] init];h1.tabBarItem.image = [UIImage imageNamed:@"1"];h1.tabBarItem.title = @"首页";UINavigationController *h11 = [[UINavigationController alloc] initWithRootViewController:h1];H2ViewController *h2 = [[H2ViewController alloc] init];h2.tabBarItem.image = [UIImage imageNamed:@"2"];h2.tabBarItem.title = @"联系人";UINavigationController *h22 = [[UINavigationController alloc] initWithRootViewController:h2];H3ViewController *h3 = [[H3ViewController alloc] init];h3.tabBarItem.image = [UIImage imageNamed:@"3"];h3.tabBarItem.title = @"消息";UINavigationController *h33 = [[UINavigationController alloc] initWithRootViewController:h3];H4ViewController *h4 = [[H4ViewController alloc] init];h4.tabBarItem.image = [UIImage imageNamed:@"4"];h4.tabBarItem.title = @"设置";UINavigationController *h44 = [[UINavigationController alloc] initWithRootViewController:h4];[[UITabBar appearance] setTintColor:[UIColor colorWithRed:255 / 255.0 green:50 / 255.0 blue:50 / 255.0 alpha:1.0]];UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 49)];backView.backgroundColor = [UIColor cyanColor];UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage new]];imageView.contentMode = UIViewContentModeScaleToFill;imageView.frame = backView.frame;[backView addSubview:imageView];viewController = [[UITabBarController alloc] init];viewController.viewControllers = @[h11, h22, h33, h44];viewController.view.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);[viewController.tabBar setClipsToBounds:YES];[viewController.tabBar insertSubview:backView atIndex:0];viewController.tabBar.opaque = YES;[self.view addSubview:viewController.view];NSLog(@"%@",NSStringFromCGRect(viewController.tabBar.frame));
}

运行代码将得到以下界面

问题来了。。。。。 tabbar如何让它下去了？？？也就是我们需要改变tabbar的高度或坐标，相信很多人都改过。。。发现无效，tabbar还是那个tabbar了。。如何改了？？

我们需要自定义UITabBarController
.h文件

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

.m文件


#import "HBTabBarController.h"#define isIphoneX   CGRectEqualToRect([UIScreen mainScreen].bounds, CGRectMake(0, 0, 375, 812))@interface HBTabBarController ()@end@implementation HBTabBarController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.
}
-(void)viewWillLayoutSubviews{[super viewWillLayoutSubviews];if (isIphoneX) {CGRect frame = self.tabBar.frame;frame.size.height = 49;frame.origin.y = self.view.frame.size.height - frame.size.height;self.tabBar.frame = frame;for (UITabBarItem *item in self.tabBar.items) {item.imageInsets = UIEdgeInsetsMake(15,0, -15, 0);[item setTitlePositionAdjustment:UIOffsetMake(0, 32)];}}
}- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.
}

同样我们需要修改下 ViewController.m ,直接上代码

#import "ViewController.h"
#import "H1ViewController.h"
#import "H2ViewController.h"
#import "H3ViewController.h"
#import "H4ViewController.h"#import "HBTabBarController.h"//#define isIphoneX   CGRectEqualToRect([UIScreen mainScreen].bounds, CGRectMake(0, 0, 375, 812))@interface ViewController (){HBTabBarController *viewController;
}@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];H1ViewController *h1 = [[H1ViewController alloc] init];h1.tabBarItem.image = [UIImage imageNamed:@"1"];h1.tabBarItem.title = @"首页";UINavigationController *h11 = [[UINavigationController alloc] initWithRootViewController:h1];H2ViewController *h2 = [[H2ViewController alloc] init];h2.tabBarItem.image = [UIImage imageNamed:@"2"];h2.tabBarItem.title = @"联系人";UINavigationController *h22 = [[UINavigationController alloc] initWithRootViewController:h2];H3ViewController *h3 = [[H3ViewController alloc] init];h3.tabBarItem.image = [UIImage imageNamed:@"3"];h3.tabBarItem.title = @"消息";UINavigationController *h33 = [[UINavigationController alloc] initWithRootViewController:h3];H4ViewController *h4 = [[H4ViewController alloc] init];h4.tabBarItem.image = [UIImage imageNamed:@"4"];h4.tabBarItem.title = @"设置";UINavigationController *h44 = [[UINavigationController alloc] initWithRootViewController:h4];[[UITabBar appearance] setTintColor:[UIColor colorWithRed:255 / 255.0 green:50 / 255.0 blue:50 / 255.0 alpha:1.0]];UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 49)];backView.backgroundColor = [UIColor cyanColor];UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage new]];imageView.contentMode = UIViewContentModeScaleToFill;imageView.frame = backView.frame;[backView addSubview:imageView];viewController = [[HBTabBarController alloc] init];viewController.viewControllers = @[h11, h22, h33, h44];viewController.view.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);[viewController.tabBar setClipsToBounds:YES];[viewController.tabBar insertSubview:backView atIndex:0];viewController.tabBar.opaque = YES;[self.view addSubview:viewController.view];NSLog(@"%@",NSStringFromCGRect(viewController.tabBar.frame));
}

我们把UITabBarController替换成我们自定义的HBTabBarController ，我们运行看下效果

看起来是成功了。。。。但是。。。我们点击看一看。。

很麻烦，单击Tabbar下面的文本根本无法触发Tabbar切换。。。。。貌似我们点击的都是无效区域。。。。这个比较麻烦。。。。。那么我们怎么解决了？我们知道，这种情况（Tabbar下移动，点击无法切换）只会在iPhone X上出现，那么在iPhone X 我们所谓的无效区域 touches 是否执行了？？我们来看下

无效区域 touches 执行了！那这个就好办了。。。。

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{if (!isIphoneX) {return;}NSSet *allTouches = [event allTouches];    //返回与当前接收者有关的所有的触摸对象UITouch *touch = [allTouches anyObject];   //视图中的所有对象UIView *v =  [touch view];if (!CGRectEqualToRect(v.frame, CGRectMake(0, 0, 375, 49))) {return;}CGPoint point = [touch locationInView:v]; //返回触摸点在视图中的当前坐标int x = point.x;int y = point.y;if (y>49||y<0) {return;}CGFloat w = 375.0/4;if (x>=0&&x<=w) {viewController.selectedIndex = 0;}else if (x>w&&x<=w*2){viewController.selectedIndex = 1;}else if (x>w*2&&x<=w*3){viewController.selectedIndex = 2;}else if (x>w*3&&x<=w*4){viewController.selectedIndex = 3;}NSLog(@"touch (x, y) is (%d, %d) %@", x, y,[touch view] );
}

貌似大功告成，但是。。。有个地方有点蛋疼。。。。

蛋疼。。其实系统提供了去掉的方法。。。。。

-(BOOL)prefersHomeIndicatorAutoHidden{return YES;
}

那么iPhone X上面的 Tabbar 基本介绍完了。。。代码下载地址
http://download.csdn.net/download/chmod_r_755/10119241