iPhoneX 各种适配记录笔记(超全面)

所属分类: 软件编程 / IOS 阅读数: 1861
收藏 0 赞 0 分享

前言

与以往的iPhone不同,这次iPhone X用上了时下流行的全面屏设计,屏幕的分辨率和比例都是苹果首次采用,而且还有个“别致的刘海”,这就需要现有的APP为iPhone X重新作适配了。

所以iPhone X 的到来,惊艳的是果粉,苦逼的是程序猿。今天升级到Xcode9.0,运行项目,所谓的全屏 iPhone X,but 页面好像也没有全屏,于是根据之前的适配经验,总算初步解决了这个问题,记录如下,以备后需。

App 页面适配适配前

适配前

适配前.gif

问题:App 未全屏显示

解决办法

LaunchImage 中添加一个和 iPhone X 相关的启动图片

* 图片尺寸:1125 * 2436

* Contents.json 中代码如下

{
 "extent" : "full-screen",
 "idiom" : "iphone",
 "subtype" : "2436h",
 "filename" : "1125_2436.png",
 "minimum-system-version" : "11.0",
 "orientation" : "portrait",
 "scale" : "3x"
}

适配后

适配后.gif

页面布局细节

Safe Area

动机

iPhone X 取消了 Home键,实现了高屏占比,所以默认 View 的区域是全屏幕

屏幕四周有圆角、顶部有“刘海”、底部有手势区域

顶部导航栏

nav_area.png 

* 注意:导航栏高度是 44 + 44

底部手势区域

tabbar_gesture_area.png

Safe Area 如下图 (红色区域)

safe_area.png

Safe Area 大小竖屏

▿ UIEdgeInsets
 - top : 44.0
 - left : 0.0
 - bottom : 34.0
 - right : 0.0

横屏

 - top : 0.0
 - left : 44.0
 - bottom : 21.0
 - right : 44.0

自动布局时的注意点

  • iOS11 以前,我们布局时,视图的 top 和 bottom 一般参照的是 Top Layout Guide 和 Bottom Layout Guide
  • iOS11 以后,那两个参照已经 deprecated (过时)了,而被 Safe Area 取代。
  • Safe Area 要求最低支持 iOS9.0

safe_area_layout_guide.png


layout_safe_area.png


safe_area_miniOS.png

但凡和父视图相关的 top 或者 bottom 属性的自动布局,应该参照 Safe Area。(之前默认是 Superview,当然如果产品允许,那就是另一回事了)

选择 Safe Area布局示例如下:

选择SafeArea.png

未选择 Safe Area布局示例如下:

未选择SafeArea.png

网上有看到有黑iPhone X的,说用它没法玩王者荣耀等游戏,理由是可能看不到自己有多少钱或者推塔键和信号键没了,对此估计是多虑了!iPhone X 出售之前,游戏厂商肯定会做适配,高屏占比只会提高游戏体验,不会产生那么严重的视觉问题的。

适配前后,效果图示例如下:

SafeArea对比效果图.gif

Xcode9 适配

WKWebViewJavascriptBridge

// 原贴地址:https://github.com/marcuswestin/WebViewJavascriptBridge/issues/278
- (void)webView:(WKWebView *)webView
didFailNavigation:(WKNavigation *)navigation
 withError:(NSError *)error {
 // ……
 // Xcode 升级到9后 WKWebViewJavascriptBridge.m 中有个 bug
 // 需要在"decisionHandler(WKNavigationActionPolicyCancel);"后加上 return,否则崩溃。
 // 不升级 Xcode 的话,没问题。
 decisionHandler(WKNavigationActionPolicyCancel);
 return;
}

部分页面适配 iPhone X

底部有按钮的页面

适配前

适配前

其底部约束如下图:

适配前-约束

适配后

适配后

其底部约束如下图:

适配后-约束

控制器生命周期之viewSafeAreaInsetsDidChange

  • viewDidLoad
  • viewWillAppear
  • viewSafeAreaInsetsDidChange(NEW
  • viewWillLayoutSubviews
  • viewDidAppear

可以在 viewSafeAreaInsetsDidChange 后,设置 Safe Area

if #available(iOS 11.0, *) {
 self.additionalSafeAreaInsets = UIEdgeInsetsMake(10, 0, 0, 34)
}

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

更多精彩内容其他人还在看

iOS 正则表达式判断手机号码、固话

本文主要介绍了iOS 正则表达式判断手机号码、固话,以及匹配是否是移动/联通/电信手机号的方法。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

运用iOS教你轻松制作音乐播放器

这篇文章主要教大家如何运用iOS轻松制作音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS 二维码扫描和应用跳转

本文讲解如何使用原生框架实现二维码扫描功能,并且进行扫描后的项目跳转。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

iOS 定制多样式二维码

最常见的二维码功能包括信息获取、网站跳转、电商交易、手机支付等等,其拥有密度小、信息容量大、容错能力强、成本低、制作难度低等优点。在移动开发中,二维码的地位也越来越重要,掌握二维码的基本操作是重要的本领之一。本文将讲解iOS定制二维码的步骤与方法。
收藏 0 赞 0 分享

iOS获取当前app的设备名称和版本号等内容

本文主要介绍了iOS获取当前app的设备名称和版本号等内容的方法。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

iOS页面跳转及数据传递(三种)

本文主要介绍了iOS页面跳转的三种方法及数据传递的方法。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

iOS常用小功能(获得屏幕图像、压缩图片、加边框、调整label的size)

本文主要介绍了iOS常用小功能:获得屏幕图像,label的动态size,时间戳转化为时间,RGB转化成颜色,加边框,压缩图片,textfield的placeholder,图片做灰度处理的方法。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

iOS实现一个简易日历代码

本篇文章主要介绍了iOS实现一个简易日历代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

iOS仿微信摇一摇动画效果加震动音效实例

这篇文章主要介绍了iOS仿微信摇一摇动画效果加震动音效实例,详细介绍了微信摇一摇功能的实现原理,非常具有实用价值,需要的朋友可以参考下。
收藏 0 赞 0 分享

iOS上下文实现评价星星示例代码

这篇文章主要介绍了iOS上下文实现评价星星的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享
查看更多