iOS 11和iPhone X适配

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

iPhoneX_SafeArea_portrait
iPhone X_SafeArea_landscape

非iPhone X的话,安全区域在默认情况下:

  • 竖屏 frame : {0, 20, ScreenWidth, ScreenHeight - 20}
  • 横屏 frame : {0, 0, ScreenWith, ScreenHeight}

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

iPhone X横屏模式布局

2、iPhone X

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

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

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

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

adjustedContentInset和contentInset

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出现了下沉现象,返回的整个过程中由下往上浮动上来。

导航栏返回时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中了。

iOS 11之前的NavigationBar层级关系
iOS 11之后的NavigationBar层级关系
  • 解决方案:目前没有找到特别完美的解决方案,临时替代方案是,设置自定义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 DescriptioniOS 11系统,在info.plist中添加上这个property,才能弹出授权拿到写权限来给相册添加内容。

2.6、AppIcon变化

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

AppIcon_App_Store

参考

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

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

推荐阅读更多精彩内容