iOS 11和iPhone X相较于之前的系统和手机都有了很大的变化,特别是iPhone X在UI上的变化。在iOS 11发布后,更新系统看了下App,果然是很多地方都存在着异常和Bug,下面针对已经了解和出现的问题进行适配说明。
一、iPhone X适配
1、SafeArea
iOS 11之后废弃了iOS 7在UIViewController中引入的topLayoutGuide和bottomLayoutGuide,开始引入了一个新的布局概念:SafeArea,它被用来描述视图中不可被任何内容遮挡的区域。只要我们的UI元素布局在了SafeArea内,就能避免被NavigationBar、TabBar、StatusBar等等一些bar的遮挡。
iPhone X的安全区域在默认情况下:
- 竖屏 frame : {0, 44, ScreenWidth, ScreenHeight - 44 - 34}
- 横屏 frame : {44, 0, ScreenWith - 44 - 44, ScreenHeight - 21}
具体显示如下图蓝框frame所示:
非iPhone X的话,安全区域在默认情况下:
- 竖屏 frame : {0, 20, ScreenWidth, ScreenHeight - 20}
- 横屏 frame : {0, 0, ScreenWith, ScreenHeight}
App的布局应该在填满整个显示屏的同时保证内容和控件的正确显示,并且便于点按。我们App的内容元素和按钮要放在SafeArea内,以避开屏幕角落和传感器槽,让其在填满屏幕的同时而不被切割而显示不完整。在横屏模式中,我们更要注意内容和按钮的布局,如下图所示。
2、iPhone X
iPhone X最大的变化是屏幕,屏幕采用了高分辨率的圆角全面屏,屏幕尺寸为1125px × 2436px(375pt × 812pt @3x),状态栏和顶部tabBar的高度也发生了变化。
这些变化造成了以下几个问题:
2.1、启动iPhone X后屏幕没铺满(上下各有一截黑条)
- 问题原因:项目使用Launch Images Sourc作为启动方式,缺少iPhone X的启动图
-
解决方案:
方案一:准备一张1125px × 2436px的启动图放到项目的LaunchImage里边
方案二:通过LaunchScreen.storyboard方式启动
2.2、控制器的view大小计算错误
- 问题原因:iPhone X的StatusBar和底部TabBar高度都发生了变化,如果项目中之前计算view的frame时写死了高度(StatusBar : 20, TabBar : 49)的话,就会出现view计算出来的frame存在问题。
- 解决方案:抽取出几个宏定义来表示StatusBar和TabBar的高度,使用起来也会非常方便,之后如果再出现改变,变动起来也比较灵活。
#define XXStatusBarHeight [[UIApplication sharedApplication] statusBarFrame].size.height
#define XXNavBarHeight 44.0
#define XXTabBarHeight (XXStatusBarHeight > 20 ? 83 : 49)
#define XXCustomTabBarHeight 49
#define XXTopHeight (XXStatusBarHeight + XXNavBarHeight)
二、iOS 11适配
1、UIScrollView和UITableView新属性
iOS 11之后,UIViewController的automaticallyAdjustsScrollViewInsets属性被废弃了,这个属性的作用就是根据所在界面的StatusBar、NavigationBar和TabBar的高度,自动的去调整UIScrollView的Insets,默认为YES。如果设置为NO,就是由我们自己来修改布局,不让它自动调整。官方文档建议我们使用contentInsetAdjustmentBehavior来代替它,这是一个枚举属性,定义如下:
typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
UIScrollViewContentInsetAdjustmentAutomatic, // Similar to .scrollableAxes, but for backward compatibility will also adjust the top & bottom contentInset when the scroll view is owned by a view controller with automaticallyAdjustsScrollViewInsets = YES inside a navigation controller, regardless of whether the scroll view is scrollable
UIScrollViewContentInsetAdjustmentScrollableAxes, // Edges for scrollable axes are adjusted (i.e., contentSize.width/height > frame.size.width/height or alwaysBounceHorizontal/Vertical = YES)
UIScrollViewContentInsetAdjustmentNever, // contentInset is not adjusted
UIScrollViewContentInsetAdjustmentAlways, // contentInset is always adjusted by the scroll view's safeAreaInsets
} API_AVAILABLE(ios(11.0),tvos(11.0));
// 通过上面的枚举,配置 adjustedContentInset 的行为
@property(nonatomic) UIScrollViewContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior;
// 如果 contentInsetAdjustmentBehavior 允许,此属性可以整合 safeAreaInsets 来描述安全区域
@property(nonatomic, readonly) UIEdgeInsets adjustedContentInset;
// 改变 adjustedContentInset 的 response 和 delegate
- (void)adjustedContentInsetDidChange;
- (void)scrollViewDidChangeAdjustedContentInset:(UIScrollView *)scrollView;
// 用于描述未经转换的 content area 区域
@property(nonatomic,readonly,strong) UILayoutGuide *contentLayoutGuide;
// 用于描述未经转换的 scroll view 的 frame
@property(nonatomic,readonly,strong) UILayoutGuide *frameLayoutGuide;
这个contentInsetAdjustmentBehavior属性是用来配置UIScrollView和UITableView的adjustedContentInset的行为的,adjustedContentInset也是iOS 11新增的一个属性。当contentInsetAdjustmentBehavior允许时,adjustedContentInset这个属性替代了contentInset所描述的区域,并且整合了safeAreaInsets来描述安全区域。adjustedContentInset表示contentView.frame.origin偏移了scrollView.frame.origin多少。
2、iOS 11
上面所说的iOS 11变化还有其他一些变化,也带来了一些问题,需要我们去做适配。
2.1、UITableView或UIScrollView内容发生向下偏移
- 问题原因: automaticallyAdjustsScrollViewInsets属性被废弃后,当tableview或scrollview超出安全区域时,系统自动调整了SafeAreaInsets的值,进而影响了adjustedContentInset的值,最终导致tableview或scrollview的内容到边缘的距离发生了变化,导致内容发生了偏移。
- 解决方案:将contentInsetAdjustmentBehavior属性置为UIScrollViewContentInsetAdjustmentNever。
if (@available(iOS 11.0, *)) {
_tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}
2.2、导航栏返回时View出现下沉现象
导航栏在返回到上一页时,上一页的View出现了下沉现象,返回的整个过程中由下往上浮动上来。
- 问题原因:这是因为UIScrollView的contentInsetAdjustmentBehavior属性默认为UIScrollViewContentInsetAdjustmentAutomatic,会对视图内容的位置做出自动计算和调整。
- 解决方案:解决方法同上面一致,将UIScrollView的contentInsetAdjustmentBehavior属性置为UIScrollViewContentInsetAdjustmentNever。
if (@available(iOS 11.0, *)) {
_scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}
2.3、UITableView的Header、Footer、cell高度出现问题,上拉刷新cell发生跳动
- 问题原因:UITableView在iOS 11中的明显改变就是默认开启Self-Sizing,从iOS 8引入Self-Sizing后,可以通过实现estimatedRowHeight属性来展示动态的内容,但在iOS 11之前都是默认关闭的。当开启时,UITableView的Header,Footer和cell的高度由原来关闭时的0变为UITableViewAutomaticDimension。
- 解决方案:如果项目中没有用到estimatedRowHeight,但是仍然想使用Self-Sizing关闭时的效果,可以使用下面的代码将Self-Sizing关闭。
_tableView.estimatedRowHeight = 0;
_tableView.estimatedSectionHeaderHeight = 0;
_tableView.estimatedSectionFooterHeight = 0;
如果不想开启Self-Sizing效果,或者UITableView的Header、Footer、cell高度出现问题,可以在Appdelegate里边全局设置上面提到的这些属性,能够避免在单个类文件中每次都要添加这些代码所带来的麻烦,代码如下:
if (@available(iOS 11.0, *)) {
[UIScrollView appearance].contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
[UITableView appearance].estimatedRowHeight = 0;
[UITableView appearance].estimatedSectionHeaderHeight = 0;
[UITableView appearance].estimatedSectionFooterHeight = 0;
}
2.4、导航栏的左右UIBarButtonItem的UI位置调整失效
- 问题原因iOS 11之前采用UIBarButtonSystemItemFixedSpace的方式可以对UIBarButtonItem做一个位置调整,但是这种方法在iOS 11已经失效,代码如下所示
UIButton *allBtn = [UIButton buttonWithType:UIButtonTypeCustom];
UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithCustomView:allBtn];
UIBarButtonItem *negativeSpacer1 = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
target:nil action:nil];
negativeSpacer1.width = -22;
self.navigationItem.rightBarButtonItems = @[negativeSpacer1,rightBarItem];
并且UINavigationBar的层级关系也发生了变化,如图所示,上面的是iOS 11之前的NavigationBar层级关系,下边的是iOS 11之后的层级关系。iOS 11之后UIBarButtonItem都被放在了_UINavigationBarContentView
--> _UIButtonBarStackView
--> _UITAMICAdaptorView
中了。
- 解决方案:目前没有找到特别完美的解决方案,临时替代方案是,设置自定义Button的contentHorizontalAlignment属性,让Button的内容分贝根据leftBarButtonItem,rightBarButtonItem而左对齐和右对齐,从而达到和之前相似的效果。
if (IOS11) leftButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
if (IOS11) rightButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
2.5、相册权限获取
在iOS 11之前,我们需要在info.plist中添加Privacy - Photo Library Usage Description
,用户在访问相册(包括读和写权限)的时候,才能够弹出授权。iOS 11之后:
-
Privacy - Photo Library Usage Description
无需添加,默认就赋予用户了相册的读权限,但是为了适配iOS 11之前的系统,还是需要添加在项目中。 -
Privacy - Photo Library Additions Usage Description
iOS 11系统,在info.plist中添加上这个property,才能弹出授权拿到写权限来给相册添加内容。
2.6、AppIcon变化
iOS 11后,Assets.xcassets的AppIcon中增加了App Store图标这一项,需要拖入一张1024×1024的Logo图。