iOS 11和iPhone X适配

2017-10-24  本文已影响110人  楚丶liu香

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所示：

iPhoneX_SafeArea_portrait iPhone X_SafeArea_landscape

非iPhone X的话，安全区域在默认情况下：

App的布局应该在填满整个显示屏的同时保证内容和控件的正确显示，并且便于点按。我们App的内容元素和按钮要放在SafeArea内，以避开屏幕角落和传感器槽，让其在填满屏幕的同时而不被切割而显示不完整。在横屏模式中，我们更要注意内容和按钮的布局，如下图所示。

iPhone X横屏模式布局

2、iPhone X

iPhone X最大的变化是屏幕，屏幕采用了高分辨率的圆角全面屏，屏幕尺寸为1125px × 2436px（375pt × 812pt @3x），状态栏和顶部tabBar的高度也发生了变化。

这些变化造成了以下几个问题：

2.1、启动iPhone X后屏幕没铺满（上下各有一截黑条）

iPhone X屏幕没铺满

2.2、控制器的view大小计算错误

#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多少。

adjustedContentInset和contentInset

2、iOS 11

上面所说的iOS 11变化还有其他一些变化，也带来了一些问题，需要我们去做适配。

2.1、UITableView或UIScrollView内容发生向下偏移

if (@available(iOS 11.0, *)) {
    _tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

2.2、导航栏返回时View出现下沉现象

导航栏在返回到上一页时，上一页的View出现了下沉现象，返回的整个过程中由下往上浮动上来。

导航栏返回时View出现下沉现象 
if (@available(iOS 11.0, *)) {
    _scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

2.3、UITableView的Header、Footer、cell高度出现问题，上拉刷新cell发生跳动

_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位置调整失效

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中了。

iOS 11之前的NavigationBar层级关系 iOS 11之后的NavigationBar层级关系 
if (IOS11) leftButton.contentHorizontalAlignment =  UIControlContentHorizontalAlignmentLeft;
if (IOS11) rightButton.contentHorizontalAlignment =  UIControlContentHorizontalAlignmentRight;

2.5、相册权限获取

在iOS 11之前，我们需要在info.plist中添加Privacy - Photo Library Usage Description，用户在访问相册（包括读和写权限）的时候，才能够弹出授权。iOS 11之后：

2.6、AppIcon变化

iOS 11后，Assets.xcassets的AppIcon中增加了App Store图标这一项，需要拖入一张1024×1024的Logo图。

AppIcon_App_Store

参考

iOS 11适配视频
iPhone X官方适配文档

上一篇 下一篇

猜你喜欢

热点阅读