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