UI 设计师听,不懂的可以去看苹果官方的

小编写了一个给 中兴 X 去掉刘海的 APP,而且其余 酷派 也得以玩,有趣味的话去 App Store 看看。点击前往。

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

那款为天猫商城定制的
OPPO,你买了啊?由于没摸过真机,所以严俊意义上的话,那篇小说应该有一个更是接地气的名字:“模拟器适配实战”。

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

那款为天猫定制的
OPPO,你买了吗?由于没摸过真机,所以严俊意义上来说,那篇小说应该有一个更为接地气的名字:“模拟器适配实战”。

图片 1

01.适配原则

出于那篇小说是实战,就不巴拉巴拉说适配思想平安区域的概念了,不懂的可以去看苹果官方的
《为 中兴 X 更新您的
app》

地点那篇作品是汉语版,而且上边还有多个带普通话字幕的摄像,从统筹、编码和原理两个角度告诉你什么是适配
摩托罗拉 X。注意,Designing for iPhone X
那么些摄像,一般的设计师是看不懂的,所以那几个视频固然是布署性学问,可是实际上是给开发人士看的。所以最好是大家开发人士看了讲给
UI 设计师听,告诉他们怎么适配。

01.适配原则

是因为那篇小说是实战,就不巴拉巴拉说适配思想和伊春区域的概念了,不懂的可以去看苹果官方的 《为
Samsung X 更新您的
app》

地点那篇小说是普通话版,而且下边还有多少个带汉语字幕的视频,从设计、编码和原理四个角度告诉您什么样是适配
红米 X。注意,Designing for 诺基亚X 那些摄像,一般的设计师是看不懂的,所以那个视频即便是统筹学问,可是实际上是给开发人士看的。所以最好是大家开发人员看了讲给
UI 设计师听,告诉他们怎么适配。

02.启动页适配

若是您是率先次下载 Xcode 9,运行起来,APP
并从未完全填充整个模拟器,那时你必要 UI
设计师给你切一张新的开行图,图片尺寸应该和 HTC X 一样,红米 X
的显示屏尺寸为 375 * 812 pt,记得 索尼爱立信 X 的显示屏是 @3x 的。

那边还有一个细节,得到那张 酷派 X 启动图之后在您的品类里找到
Assets.xcassets 里的 LaunchImage,不过并没有放 BlackBerry X
启动图的职分,此时,你应超过把在此之前的开行图复制一份,然后将旧的
LaunchImage 删除,然后右键重新创制一个 LaunchImage,此时,你就可以看到
黑莓 X 启动图的职责了。

02.起步页适配

假如您是第两遍下载 Xcode 9,运行起来,APP
并没有完全填充整个模拟器,这时你须要 UI
设计师给你切一张新的开行图,图片尺寸应该和 OPPO X 一样,三星 X
的显示器尺寸为 375 * 812 pt,记得 三星 X 的显示屏是 @3x 的。

那里还有一个细节,得到这张 HUAWEIX 启动图之后在您的品类里找到 Assets.xcassets 里的
LaunchImage,然而并不曾放 酷派 X
启动图的岗位,此时,你应有先把前边的启航图复制一份,然后将旧的
LaunchImage 删除,然后右键重新成立一个 LaunchImage,此时,你就可以看到
一加 X 启动图的岗位了。

图片 2

03.启动页广告设计

事先所有的广告页面设计都是听从 Samsung 6s 的显示屏标准来设计的,那在未曾
Motorola X 的时期是从未有过难题的。现在有了 HUAWEI X,它的显示屏比例不是 16
:9,所以那个广告页面放到 中兴 X 上就会冒出左右被裁掉。但是假使按照黑莓 X 的显示屏来布署,就会招致在非 摩托罗拉 X
上显得出现前后被截掉的景色。

于是我们采纳的艺术是,仍旧使用 华为 6s
的屏幕来展开规划,只是设计师注意在左右留出一部分相差,有限襄助在 红米 X
上展示把左右开除一部分过后依旧可以健康突显。

03.启动页广告设计

事先所有的广告页面设计都是鲁人持竿 黑莓 6s 的屏幕标准来计划的,那在没有
诺基亚 X 的时代是尚未难点的。现在有了 一加 X,它的屏幕比例不是 16
:9,所以那个广告页面放到 黑莓 X 上就会油不过生左右被炒鱿鱼。不过只要依照酷派 X 的显示屏来规划,就会招致在非 金立 X
上浮现出现前后被截掉的情景。

图片 3

就此大家选择的方式是,依旧使用 摩托罗拉 6s
的屏幕来展开统筹,只是设计师注意在左右留出一部分相差,保险在 Nokia X
上浮现把左右裁掉一部分过后照旧可以正常突显。

04.safeAreaInsets 使用的坑

我们合作社的类型的四头界面都是用代码写的,没有利用 SB 或者
xib,而且旧代码布局尚未正规,并没有写在 -viewWillLayoutSubviews: 中。

地点的合法示例代码也告诉我们要绝对 safeAreaInsets
进行布局,确保大家的界面是用户(CEO)友好的。可是那些特性在
-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
的冲天来求得安全区域,然后将大家的界面布局在大家和好用地点四个因素的中度打造的安全区域内。

如此那般大家就可以以追求最小的代码改动为尺度来适配 BlackBerry X。

04.safeAreaInsets 使用的坑

咱俩集团的花色的绝半数以上界面都是用代码写的,没有行使 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: 中去,越发对于任何是是手写布局的那种情状。

故而大家要求一种更加灵敏有效的章程,对于某个状态栏、导航栏和标签栏固定呈现的界面,它的 statusBar 、navigationBar 和 tabBar 的 frame 都是一个的固定值。因为大家是在 -viewDidLoad: 中修改旧的布局,此时 -viewDidLoad: 中获得的 safeAreaInsets 是行不通的,不过大家就可以跳过 safeAreaInsets,直接选择 statusBar 、navigationBar 和 tabBar 的万丈来求得安全区域,然后将大家的界面布局在大家团结一心用地方多个因素的莫大营造的平安区域内。

诸如此类大家就可以以追求最小的代码改动为基准来适配 酷派 X。

05.tableView 适配

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

05.tableView 适配

tableView 系统都帮大家适配好了,真的没什么可讲的。即使一定要讲就是有些界面大家须要把 tableView 的 contentInsetAdjustmentBehavior 那么些特性给安装为 .never。当那样做未来,我们就无法享受系统自动优化 tableView 的一个造福,那些便利就是系统帮我们把tableView 的情节上下都插入一个安然无恙区域大小的附加滚动距离来使界面用户自己,因而大家须要手动插入 contentInsets 来保障那一点。

图片 4

06.横屏适配

境内 BlackBerry应用多数都不扶助横屏,当然也有例外,如若一个运用涉及到摄像,不管是广播视频或者录制摄像,大部分气象下都需求在少数界面小范围扶助横屏。如若您有横屏的难点,可以参见我其余一篇作品,关于在只帮衬竖屏的选拔中小范围援救横屏的一个履行:[iOS]终点横竖屏切换解决方案

大家的花色中也有横屏页面,是咱们的直播页面。横屏适配的条件就是要让具有的要素都布局到安全区域内,此时大家是要凭借
safeAreaInsets 来确定尾部的平安区域中度。假若你的项目中有横屏的
tableView,那您应有看一下地点的摄像,视频里有详细的介绍苹果怎么着使
WWDC 这些动用在 Samsung X 上支撑横屏。

06.横屏适配

国内 华为应用多数都不帮忙横屏,当然也有不一致,如若一个使用涉及到摄像,不管是广播视频或者录制视频,大部分情况下都亟待在某些界面小范围援助横屏。即使你有横屏的题材,可以参照我此外一篇文章,关于在只扶助竖屏的利用中小范围支持横屏的一个履行:[iOS]终端横竖屏切换解决方案

图片 5

大家的品类中也有横屏页面,是我们的直播页面。横屏适配的规格就是要让具备的要素都布局到平安区域内,此时大家是要凭借 safeAreaInsets 来确定底部的百色区域中度。假使您的系列中有横屏的 tableView,这您应有看一下方面的视频,视频里有详细的牵线苹果怎么样使 WWDC 那个应用在
黑莓 X 上支撑横屏。

07.网页适配

网页尾部可能会稍稍要求相互的元素,若是不做其他处理就会被黑线挡住。由于旧网页设计的时候没有在底层留出对应的当儿,所以,大家只可以用代码处理了。好在
UIWebView 有一个 scrollView 的习性,我们可以便宜的给 UIWebView
在底部添加一个平安滚动距离,尽管对于有底色的网页,那种方案并不佳看,可是近期也只可以那样了。

而是那只是连接的方案,将来的 UI 设计上仍然应当尽可能照顾到 红米 X,留出
34 的可观来确保用户体验。

07.网页适配

网页底部可能会稍稍需求互相的因素,若是不做其余处理就会被黑线挡住。由于旧网页设计的时候从不在底层留出对应的空子,所以,大家只可以用代码处理了。好在 UIWebView 有一个 scrollView 的性质,大家得以方便的给 UIWebView 在底部添加一个安全滚动距离,即使对于有底色的网页,那种方案并不美观,然而近期也不得不如此了。

图片 6

只是那只是连着的方案,将来的 UI 设计上或者应该尽量照顾到 华为X,留出 34 的可观来有限支撑用户体验。

08.联动动画

世家的类型里一定少不了类似那样的卡通。这么些动画不便于,在
-scrollViewDidScroll: 里算各类参加动画的元素的
frame,然后总结动画触发临界地方,做完四次未来再也不想做第二次了。

下一场跑到 三星 X
上一看,地方全错。无法,只可以重头来三次了呗,那又尚未什么样近便的小路可走,只可以先将元素起首地方相对于平安区域布局好,然后再总括终点地方的布局,中间过渡不就很粗略了呢?

08.联动动画

世家的花色里肯定少不了类似那样的卡通片。那个动画不便于,在 -scrollViewDidScroll: 里算各个出席动画的元素的
frame,然后计算动画触发临界地方,做完一次未来再也不想做第二次了。

图片 7

然后跑到 索爱 X
上一看,地点全错。不能,只可以重头来三次了呗,那又尚未什么走后门可走,只好先将元素起初地点相对于平安区域布局好,然后再总结终点地方的布局,中间过渡不就很简短了呢?

09.第三方库适配

布局使用的 梅森ry 已经协助相对安全区域布局。ASDK 也早就支撑,只必要将
SDK 更新一下就可以了。

09.第三方库适配

布局使用的 Masonry 已经支撑相对安全区域布局。ASDK 也已经协助,只必要将
SDK 更新一下就足以了。

本人的稿子集合

上边这些链接是自己所有小说的一个聚集目录。那一个小说凡是涉及完成的,每篇小说中都有
Github
地址,Github
上都有源码。

本人的篇章集合索引

自己的稿子集合

上边那几个链接是自家拥有小说的一个汇集目录。那个文章凡是涉及达成的,每篇文章中都有 Github 地址,Github 上都有源码。若是某篇小说刚好在您的莫过于支出中帮到你,又或者提供一种区其余兑现思路,让您以为可行,那就看看那句话
“锲而不舍每天点赞的人,99%都是帅哥漂亮的女子,再也不用单身了”。

自身的小说集合索引

您仍能关切自己要好维护的简书专题 iOS开发心得。这么些专题的小说都是真正的干货。假设您有难点,除了在篇章最后留言,还是可以在和讯 @盼盼_HKbuy上给本人留言,以及走访我的 Github

你还是可以关注自身自己维护的简书专题 iOS开发心得。这么些专题的篇章都是真性的干货。

一旦您有难点,除了在篇章最终留言,还能在和讯 @盼盼_HKbuy上给自己留言,以及走访我的 Github

相关文章