iOS开发——ios11、iphoneX适配实记

作者: YY程序猿 | 来源:发表于2017-10-19 14:16 被阅读1153次

编译器升级xcode9，准备适配一下iphoneX的布局，调试时发现由于一些ios11新特性或者底层变化的原因，xcode9运行出来的项目界面有bug，下面做一下新特性适配和iphoneX布局适配的记录。

ios11新特性

UIScrollView新特性

UITbaleView自动增加了内边距.jpeg

现象：如上图所示，图中中间部分是一个表格，在ios11手机上，表格的头部多出了一部分空隙。
原因：ios11后，UIScrollView增加了新特性，多了一个属性：contentInsetAdjustmentBehavior，理解为“调整内边距的行为”，可选四个参数：
-- UIScrollViewContentInsetAdjustmentAutomatic : 自动调整；
-- UIScrollViewContentInsetAdjustmentScrollableAxes : 在滚动方向上调整；
-- UIScrollViewContentInsetAdjustmentNever : 从不调整；
-- UIScrollViewContentInsetAdjustmentAlways : 总是调整。
默认是UIScrollViewContentInsetAdjustmentAutomatic，所以它自动增加了一部分空隙去避免遮挡（自动调整的判断，包括：是否在导航控制器中、是否在tabbarViewController中等等）。
解决方法：

if (@available(iOS 11.0, *))//表示只在ios11以上的版本执行
{
    _brandTableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

正常时效果.png

UISearchBar新特性

UISearchBar的bug.jpeg

现象：如图所示，ios11这个searchBar莫名肥了一圈，我代码没变过，同样设的是高度44，在ios10上是下面这个样子

正常状态的searchBar.jpeg
原因：UISearchBar的底层结构变了，简单来看，以前的UISearchBar是下面这个样子
searchBar结构示意.png
简单来看，它由一个大的红色view+内部输入框(白色部分)构成，在ios11以前，高度设置控制的是大的红色view的高度，内部输入框(白色部分)的高度永远固定是28。
而ios11后，它没了大的红色view，只有内部输入框(白色部分)，给高度的时候，自然就控制的是内部输入框(白色部分)的高度。
所以同样都是44的高，ios11上的UISearchBar会肥一圈。
解决方法：
如果需要跟以前保持同样的效果，那么在ios11上把UISearchBar的高度设为28并重新布局

UITableView使用MJRefreshAutoNormalFooter上拉刷新时页面会跳动

现象：正常情况：应该是触发了上拉刷新，加载数据，加载完后增加若干cell，但页面仍保持在原位置。而软件在xcode9编译环境下的ios11手机上，加载完后页面会向上跳一截，尤其在cell的高度是由model的实际数据决定，尤其在cell高度较大的时候，很明显。MJRefresh做了更新，但实测，还是有问题。
原因：UITableView这两个代理方法调用顺序变了：cellForRowAtIndexPath和heightForRowAtIndexPath，直接导致了获取高度算tableview偏移有问题。
解决办法：
实现以下方法：

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 200;
}

尽量给出较接近实际cell高度的数值，跳动问题会消失。

2018.02.01更新，不需要实现estimatedHeightForRowAtIndexPath这个代理，设置下面三个参数即可

    if (@available(iOS 11.0, *))//表示只在ios11以上的版本执行
    {
        tableview.estimatedRowHeight = 0;
        tableview.estimatedSectionHeaderHeight = 0;
        tableview.estimatedSectionFooterHeight = 0;
    }

导航栏返回按钮偏移、自定义按钮难以点中

返回按钮偏移bug.jpeg

现象：UINavigationController的navBar的返回按钮，我隐藏了它的文字，结果它比在ios10上，明显向右向下偏移了一截（不隐藏文字时不会有这种问题）。我自定义了一个左边按钮作为返回按钮，发现非常难点中。
原因：底层实现机制改变。
解决办法：
自定义左边按钮作为返回按钮
那么如何解决自定义按钮难以点中的问题呢？
给navBar添加一个单击手势，判断手势位置，如果在左边某个范围，就调用按钮的点击事件。
我是给UIViewController写了一个分类UIViewController+YYBackBarButton，这样需要用的页面里，只需要在viewDidLoad中加下面一句话就行了

[self addCustomBackButtonWithBackButtonColor:UIColorFromRGB(0x979797)];

分类.m文件代码如下:

#import "UIViewController+YYBackBarButton.h"
#import "UIImage+extend.h"

@implementation UIViewController (YYBackBarButton)

- (void)addCustomBackButtonWithBackButtonColor:(UIColor *)backButtonColor
{
    self.navigationController.navigationBar.tintColor = [UIColor clearColor];//返回按钮颜色
    self.navigationController.navigationBar.backItem.hidesBackButton = YES;//隐藏返回按钮
    self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;//开启手势右滑返回
    
    //创建返回按钮
    UIButton *backButton = [[UIButton alloc] init];
    backButton.frame = CGRectMake(0, 0, 13, 22);
    [backButton setImage:[[UIImage imageNamed:@"backButton.png"] imageWithColor:backButtonColor] forState:UIControlStateNormal];//imageWithColor这个方法是UIImage+extend分类里的方法，作用是对图片的颜色进行自定义渲染(说白了就是改图片颜色)
    backButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    //返回按钮偏移值，根据自己的需要设置偏移，已达到想要的UI效果
    CGFloat insetNumber = 0;
    if (@available(iOS 11.0, *))
    {
        if (kMainScreenHeight == IPHONE_4_SCREEN_HEIGHT) insetNumber = 8;
        else if (kMainScreenHeight == IPHONE_5_SCREEN_HEIGHT) insetNumber = 8;
        else if (kMainScreenHeight == IPHONE_6_SCREEN_HEIGHT) insetNumber = 8;
        else if (kMainScreenHeight == IPHONE_6PLUS_SCREEN_HEIGHT) insetNumber = 12;
        else if (kMainScreenHeight == IPHONE_X_SCREEN_HEIGHT) insetNumber = 8;
    }
    else
    {
        if (kMainScreenHeight == IPHONE_4_SCREEN_HEIGHT) insetNumber = 8;
        else if (kMainScreenHeight == IPHONE_5_SCREEN_HEIGHT) insetNumber = 8;
        else if (kMainScreenHeight == IPHONE_6_SCREEN_HEIGHT) insetNumber = 8;
        else if (kMainScreenHeight == IPHONE_6PLUS_SCREEN_HEIGHT) insetNumber = 12;
        else if (kMainScreenHeight == IPHONE_X_SCREEN_HEIGHT) insetNumber = 8;
    }
    [backButton setImageEdgeInsets:UIEdgeInsetsMake(0, -insetNumber, 0, insetNumber)];
    
    //添加按钮事件
    [backButton addTarget:self action:@selector(customClickBackButton) forControlEvents:UIControlEventTouchUpInside];

    //添加手势，获取点击，避免不容易点中返回按钮的问题
    [self.navigationController.navigationBar addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickNavBar:)]];
    
    //把按钮设置为导航栏左边按钮
    UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:backButton];
    self.navigationItem.leftBarButtonItem = leftBarButtonItem;
}

- (void)customClickBackButton
{
    [self.navigationController popViewControllerAnimated:YES];
}

- (void)clickNavBar:(UITapGestureRecognizer *)tap
{
    //获取手势的点
    CGPoint tapPoint = [tap locationInView:self.navigationController.navigationBar];
    if (tapPoint.x <= kMainScreenWidth * 0.15)//如果手势的点在左边15%，就让它出发返回按钮事件
    {
        [self customClickBackButton];
    }
}

@end

其中有个图片重新渲染颜色的方法，我写在了UIImage+extend这个分类中，可以改一张图片的整体颜色，方法实现如下：

- (UIImage *)imageWithColor:(UIColor *)color
{
    UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(context, 0, self.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    CGContextClipToMask(context, rect, self.CGImage);
    [color setFill];
    CGContextFillRect(context, rect);
    UIImage*newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

这样处理之后的效果，就跟以前一样了：

解决后效果.jpeg

键盘新特性

IQKeyboardManager键盘工具栏bug.jpeg

现象：我在项目里使用IQKeyboardManager框架，正常情况下，红圈处左边应该有上下跳转输入框的按钮、右边应该有完成按钮。
原因：ios11键盘window底层布局变化。
解决办法：
更新IQKeyboardManager框架(研究了半天原因才发现人家已经更新了做好适配了)。

正常键盘工具栏.jpeg

XCode9运行访问系统相册崩溃问题

保存图片崩溃.jpeg

现象：如图保存图片功能，在XCode9下运行会崩溃
原因：info.plist新增了权限配置
解决：info.plist新增一条权限：Privacy - Photo Library Additions Usage Description

新增权限.jpeg

iphoneX适配

主要是UI方面的适配，但也发现了一个不明原因的bug。

bug的解决

iphoneX上的bug.gif

现象：注意观察上图中tabbar的位置。从带tabbar的控制器push到其它控制器(hidesBottomBarWhenPushed = YES)，tabbar在push的时候会突然向上移动一截，但是pop的时候又是正常的，并且同样是ios11的iphone8上都是正常的。
原因：目前不清楚是不是xcode9模拟器的问题，也不知道真机上会不会有。
解决：重写- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated方法，自己控制push时tabbar的frame

- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    // 重写super
    [super pushViewController:viewController animated:animated];

    // 修改tabBra的frame
    if (isIPhoneX)//解决push时tabbar瞬间上移的问题
    {
        CGRect frame = self.tabBarController.tabBar.frame;
        frame.origin.y = [UIScreen mainScreen].bounds.size.height - frame.size.height;
        self.tabBarController.tabBar.frame = frame;
    }
}

即可恢复正常状态。

UI适配

主要是statusBar（顶部状态栏）的高度不一样了、底部增加了一个安全距离。适配思路就是避开这些地方，具体思路下文分开介绍。

顶部状态栏的问题

顶部遮挡.png

现象：如图所示，顶部的searchView被挡住了一块。
原因：这个页面的顶部白色部分是一个view，它的高度我写死为64（普通手机里导航栏+状态栏整体高度），所以在普通手机里看起就是一个正常的导航栏，而在这里就发生了遮挡，因为普通手机的状态栏高度是20，而iphoneX是44。
解决：所有这种顶部的view，都不应该写死64的高度，而应该写成导航栏高度+状态栏高度。
导航栏高度所有都是44，没有变化，而状态栏高度分为20和44，布局时判断一下是不是iphoneX，数值也随之变化，最好是写成宏。
顶部遮挡的解决.png

底部安全距离的问题

iphoneX上tabbar.png

现象：如上图所示，tabbar的高度明显比普通手机里高得多，增加的区域大概是下图红圈的区域：
自动增加的区域.jpeg
这部分的高度，即底部安全距离的高度是34
总所周知，底部出现安全距离，是为了给系统的手势让路，用户在底部黑条附近进行拖动时，可以达到原来home键的效果。
然而，通过我在模拟器上的反复实验，系统手势的触发范围，并没有34这么高，而是从黑条顶部到屏幕底部这个范围，这部分的高度，以下称作系统手势有效范围，高度为13。
实际问题：上图是系统处理的tabbar高度。在自己写的页面里，就会出现遮挡的问题：

底部遮挡效果.jpeg
解决：底部两个按钮背后有个白色view，它的高度是写死为54，应该改为54+手势有效范围高度，手势有效范围高度根据是不是iphoneX赋值为13或0，这样就完美适配了iphoneX和普通手机，解决效果如下：

底部遮挡问题解决.jpeg

备注

1、干货分享：对于手机型号的判断、底部高度、顶部高度等，我都写成了宏，需要的朋友拿走不谢：

//是否是手机
#define isIPhone (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
//是否是iphoneX
#define isIPhoneX (kMainScreenWidth >= 375.0f && kMainScreenHeight >= 812.0f && isIPhone)
//苹果X宽高
#define IPHONE_X_SCREEN_WIDTH 375
#define IPHONE_X_SCREEN_HEIGHT 812
//底部安全高度
#define BOTTOM_SAFE_HEIGHT (isIPhoneX ? 34 : 0)
//系统手势高度
#define SYSTEM_GESTURE_HEIGHT (isIPhoneX ? 13 : 0)
//tabbar高度
#define TABBAR_HEIGHT (49 + BOTTOM_SAFE_HEIGHT)
//状态栏高度
#define STATUS_HEIGHT (isIPhoneX ? 44 : 20)
//导航栏高
#define NAVBAR_HEIGHT 44

iOS开发——ios11、iphoneX适配实记

ios11新特性

UIScrollView新特性

UISearchBar新特性

UITableView使用MJRefreshAutoNormalFooter上拉刷新时页面会跳动

导航栏返回按钮偏移、自定义按钮难以点中

键盘新特性

XCode9运行访问系统相册崩溃问题

iphoneX适配

bug的解决

UI适配

顶部状态栏的问题

底部安全距离的问题

备注

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

恩美第二个APP项目

人猿星球

iOS更新&新特性

iOS开发

iOS11和iphoneX适配问题

将来跳槽用

iOS Developer

iOS接下来要研究的知识点