笔者写了一个给 Samsung X 去掉刘海的 APP,而且其他 Nokia 也足以玩,有趣味的话去 App Store 看看。点击前往。

@NewPan 贝聊科技 iOS
菜鸟工程师

这款为天猫定制的
vivo,你买了呢?由于没摸过真机,所以严厉意义上的话,这篇作品应该有一个尤为接地气的名字:“模拟器适配实战”。

01.适配原则

出于这篇作品是实战,就不巴拉巴拉说适配思想安全区域的定义了,不懂的可以去看苹果官方的
《为 小米 X 更新您的
app》

地点这篇作品是粤语版,而且下边还有六个带粤语字幕的视频,从规划、编码和规律多个角度告诉您怎样是适配
金立 X。注意,Designing for iPhone X
这么些视频,一般的设计师是看不懂的,所以这多少个录像即便是统筹学问,不过实际上是给开发人员看的。所以最好是大家开发人士看了讲给
UI 设计师听,告诉他们怎么适配。

02.开行页适配

尽管您是率先次下载 Xcode 9,运行起来,APP
并从未完全填充整个模拟器,那时你需要 UI
设计师给您切一张新的开行图,图片尺寸应该和 vivo X 一样,一加 X
的屏幕尺寸为 375 * 812 pt,记得 Nokia X 的屏幕是 @3x 的。

这里还有一个细节,拿到这张 Samsung X 启动图之后在您的档次里找到
Assets.xcassets 里的 LaunchImage,然而并没有放 HUAWEI X
启动图的职位,此时,你应领先把在此之前的起步图复制一份,然后将旧的
LaunchImage 删除,然后右键重新树立一个 LaunchImage,此时,你就足以看到
中兴 X 启动图的职务了。

03.起初页广告设计

以前所有的广告页面设计都是比照 Nokia 6s 的屏幕标准来统筹的,这在一向不
红米 X 的一时是绝非问题的。现在有了 vivo X,它的屏幕比例不是 16
:9,所以这一个广告页面放到 索尼爱立信 X 上就会出现左右被开掉。不过即便遵照OPPO X 的屏幕来设计,就会造成在非 中兴 X
上显示出现前后被截掉的情况。

由此我们使用的办法是,依然采取 一加 6s
的屏幕来拓展统筹,只是设计师注意在左右留出一部分相距,保证在 金立 X
上出示把左右炒掉一部分过后依旧可以正常显示。

04.safeAreaInsets 使用的坑

2018正版葡京赌侠诗,我们公司的项目标多方界面都是用代码写的,没有应用 SB 或者
xib,而且旧代码布局尚未专业,并不曾写在 -viewWillLayoutSubviews: 中。

下面的合法示例代码也告知我们要相对 safeAreaInsets
举办布局,确保大家的界面是用户(老板)友好的。然而那一个特性在
-viewDidLoad:-viewWillAppear: 方法中都是为
UIEdgeInsetsZreo,第一遍有值是
-viewWillLayoutSubviews:。而且这么些值在 -viewWillLayoutSubviews:
的两次调用中会不停地修正。

事实上文档里有写这多少个特性的注释:
If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are 0.
如果当前 view 没有布局到窗口的中,这么些值就是 0。

这给我们修改旧代码带来极大的紧巴巴,我们不太可能把旧代码写在
-viewDidLoad: 中的所有的布局代码都挪到 -viewWillLayoutSubviews:
中去,尤其对于整个是是手写布局的那种情况。

从而我们需要一种更加灵敏有效的措施,对于某个状态栏、导航栏和标签栏固定显示的界面,它的
statusBarnavigationBartabBarframe
都是一个的固定值。因为我们是在 -viewDidLoad: 中修改旧的布局,此时
-viewDidLoad: 中得到的 safeAreaInsets 是没用的,但是我们就可以跳过
safeAreaInsets,直接动用 statusBarnavigationBartabBar
的莫大来求得安全区域,然后将我们的界面布局在我们友好用地点多少个因素的可观构建的平安区域内。

这般我们就可以以追求最小的代码改动为尺度来适配 索尼爱立信 X。

05.tableView 适配

tableView
系统都帮我们适配好了,真的没什么可讲的。假使一定要讲就是有些界面我们需要把
tableViewcontentInsetAdjustmentBehavior 这多少个特性给安装为
.never。当如此做将来,我们就无法享用系统活动优化 tableView
的一个便于,这一个便利就是系统帮我们把 tableView
的始末上下都插入一个三沙区域大小的附加滚动距离来使界面用户自己,因而大家需要手动插入
contentInsets 来保证这点。

06.横屏适配

国内 华为应用多数都不辅助横屏,当然也有例外,假诺一个拔取涉及到视频,不管是广播录像或者录制视频,大多数情景下都亟待在某些界面小范围扶助横屏。要是你有横屏的题材,可以参见我此外一篇著作,关于在只帮忙竖屏的利用中小范围扶助横屏的一个实践:[iOS]极限横竖屏切换解决方案

咱俩的类型中也有横屏页面,是大家的直播页面。横屏适配的尺码就是要让具有的元素都布局到安全区域内,此时我们是要凭借
safeAreaInsets 来确定底部的安全区域中度。虽然您的系列中有横屏的
tableView,这您应该看一下方面的视频,录像里有详尽的牵线苹果如何使
WWDC 那一个动用在 三星 X 上支撑横屏。

07.网页适配

网页底部可能会略带需要相互的要素,假设不做任何处理就会被黑线挡住。由于旧网页设计的时候从不在底层留出对应的当儿,所以,我们只可以用代码处理了。好在
UIWebView 有一个 scrollView 的习性,大家得以便宜的给 UIWebView
在底层添加一个安然无恙滚动距离,尽管对于有底色的网页,这种方案并不优雅,不过当前也不得不这样了。

但是这只是联网的方案,未来的 UI 设计上仍然应当尽可能照顾到 摩托罗拉 X,留出
34 的万丈来担保用户体验。

08.联动动画

世家的品类里肯定少不了类似这样的卡通片。那些动画不易于,在
-scrollViewDidScroll: 里算各样参加动画的因素的
frame,然后总计动画触发临界地方,做完三遍之后再也不想做第二次了。

下一场跑到 华为 X
上一看,地点全错。没办法,只可以重头来五回了嘛,那又不曾什么样捷径可走,只好先将元素起首地点相对于平安区域布局好,然后再统计终点地方的布局,中间过渡不就很粗略了呢?

09.第三方库适配

布局使用的 梅森(Mason)ry 已经支撑相对安全区域布局。ASDK 也已经援助,只需要将
SDK 更新一下就足以了。

本身的篇章集合

下面这多少个链接是自身拥有著作的一个会聚目录。这多少个著作凡是涉及实现的,每篇作品中都有
Github
地址,Github
上都有源码。

本身的篇章集合索引

您还足以关注自身自己维护的简书专题 iOS开发心得。这一个专题的篇章都是真性的干货。假诺您有题目,除了在著作最终留言,还足以在博客园 @盼盼_HKbuy上给本人留言,以及走访我的 Github

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图