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

编译器升级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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容