编译器升级xcode9,准备适配一下iphoneX的布局,调试时发现由于一些ios11新特性或者底层变化的原因,xcode9运行出来的项目界面有bug,下面做一下新特性适配和iphoneX布局适配的记录。
ios11新特性
UIScrollView新特性
- 现象:如上图所示,图中中间部分是一个表格,在ios11手机上,表格的头部多出了一部分空隙。
- 原因:ios11后,UIScrollView增加了新特性,多了一个属性:contentInsetAdjustmentBehavior,理解为“调整内边距的行为”,可选四个参数:
-- UIScrollViewContentInsetAdjustmentAutomatic : 自动调整;
-- UIScrollViewContentInsetAdjustmentScrollableAxes : 在滚动方向上调整;
-- UIScrollViewContentInsetAdjustmentNever : 从不调整;
-- UIScrollViewContentInsetAdjustmentAlways : 总是调整。
默认是UIScrollViewContentInsetAdjustmentAutomatic,所以它自动增加了一部分空隙去避免遮挡(自动调整的判断,包括:是否在导航控制器中、是否在tabbarViewController中等等)。 - 解决方法:
if (@available(iOS 11.0, *))//表示只在ios11以上的版本执行
{
_brandTableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}
UISearchBar新特性
-
现象:如图所示,ios11这个searchBar莫名肥了一圈,我代码没变过,同样设的是高度44,在ios10上是下面这个样子
- 原因:UISearchBar的底层结构变了,简单来看,以前的UISearchBar是下面这个样子
简单来看,它由一个大的红色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;
}
导航栏返回按钮偏移、自定义按钮难以点中
- 现象: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;
}
这样处理之后的效果,就跟以前一样了:
键盘新特性
- 现象:我在项目里使用IQKeyboardManager框架,正常情况下,红圈处左边应该有上下跳转输入框的按钮、右边应该有完成按钮。
- 原因:ios11键盘window底层布局变化。
-
解决办法:
更新IQKeyboardManager框架(研究了半天原因才发现人家已经更新了做好适配了)。
XCode9运行访问系统相册崩溃问题
- 现象:如图保存图片功能,在XCode9下运行会崩溃
- 原因:info.plist新增了权限配置
-
解决:info.plist新增一条权限:Privacy - Photo Library Additions Usage Description
iphoneX适配
主要是UI方面的适配,但也发现了一个不明原因的bug。
bug的解决
- 现象:注意观察上图中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(顶部状态栏)的高度不一样了、底部增加了一个安全距离。适配思路就是避开这些地方,具体思路下文分开介绍。
顶部状态栏的问题
- 现象:如图所示,顶部的searchView被挡住了一块。
- 原因:这个页面的顶部白色部分是一个view,它的高度我写死为64(普通手机里导航栏+状态栏整体高度),所以在普通手机里看起就是一个正常的导航栏,而在这里就发生了遮挡,因为普通手机的状态栏高度是20,而iphoneX是44。
- 解决:所有这种顶部的view,都不应该写死64的高度,而应该写成导航栏高度+状态栏高度。
导航栏高度所有都是44,没有变化,而状态栏高度分为20和44,布局时判断一下是不是iphoneX,数值也随之变化,最好是写成宏。
底部安全距离的问题
- 现象:如上图所示,tabbar的高度明显比普通手机里高得多,增加的区域大概是下图红圈的区域:
这部分的高度,即底部安全距离的高度是34
总所周知,底部出现安全距离,是为了给系统的手势让路,用户在底部黑条附近进行拖动时,可以达到原来home键的效果。
然而,通过我在模拟器上的反复实验,系统手势的触发范围,并没有34这么高,而是从黑条顶部到屏幕底部这个范围,这部分的高度,以下称作系统手势有效范围,高度为13。 -
实际问题:上图是系统处理的tabbar高度。在自己写的页面里,就会出现遮挡的问题:
-
解决:底部两个按钮背后有个白色view,它的高度是写死为54,应该改为54+手势有效范围高度,手势有效范围高度根据是不是iphoneX赋值为13或0,这样就完美适配了iphoneX和普通手机,解决效果如下:
备注
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