动手试试！手把手教你如何适配 iPhone X

2017-09-29 10:13:05 来源：易采站长网友投稿作者：优设网

　　基于许多文章皆只是翻译了民圆的本文，并出有参加本人的念法战睹解，以是我决议本人试着适配 iPhone X，假如呈现了得误大概成绩，请多指教。究竟结果写文章的初志是为了跟各人一同前进战讨论呢~

　　熟习 iPhone X

　　那里用 iPhone 6 举例子是果为年夜部门设想师皆用 iPhone 6 去做设想稿，便利各人了解，实在 iPhone 8也是那个分辩率。

　　iPhone 6 ：750×1334px(375×667px @2x)

　　iPhone X ：1125×2436px (375×812px @3x)

　　正在逻辑像素上 iPhone X 的宽度战 iPhone 6 连结分歧，只是下度下了145px(812-667)，假如是用@1x做设想稿，那末正在适配 iPhone X 的时分会便利许多，果为只需求删减下度便能获得 iPhone X 的巨细，一切的 Symbol 根本稳定，只是复造几个苹果爸爸的Symbol 到您的Symbol 内里，用去做 iPhone X 的设想稿。可是假如用@2x 去做设想稿会略微费事些，究竟结果Sketch UI Kit 皆是基于@1x 去做设想稿的，以是只能把 symbol 从头闭幕，然后做成@2x巨细的尺寸。

　　固然它们的逻辑像素宽度分歧，可是他们的像素分辩率是纷歧样的，iPhone 6 接纳@2x切图，iPhone X 接纳@3x 切图。有人会用@2x 做设想稿，那怎样适配 iPhone X 设想稿，岂非要缩放? iPhone 6 (750×1334px)尺寸到 iPhone X(1125×2436px)，固然二者的宽度干系是1.5倍，可是经由过程缩放做 iPhone X 也是相称费事，果为您的 Sketch 设想稿内里能够存正在 Symbol，以是那样的做法是止欠亨的。但假如您的团队皆是用@2x 去做设想稿的话，也出甚么成绩，接下去便供给一个更简朴的办法处理 iPhone X 的适配成绩。

　　iPhone X 适配

　　我列出了 iPhone X 的三种分辩率的尺寸：375×812px(@1x)，750×1624px(@2x)，1125×2436px(@3x)

　　假如您的团队利用的是750×1334px(@2x)的设想稿，您正在适配 iPhone X 的时分能够接纳 iPhone X @2x的图去适配，那样便省来了缩放那一步调，并且开辟利用的是逻辑像素即375pt×812px去做 iPhone X 的设想复原的，以是那样设想 iPhone X 是没有会影响开辟的，果为750×1624px(@2x)复原到@1x 借是375×812px，信赖您曾经大白了。

　　1.iPhone X宁静地区成绩

　　假如您用@1x 去做设想稿：iPhone X 宁静地区是375×734px。

　　假如您用@2x 去做设想稿：iPhone X 宁静地区是750×1468px。

　　2.怎样计较 iPhone X 宁静地区

　　@1x 的 iPhone X 宁静地区：

　　宁静地区=812px—Status Bar (44px) +Home Indicator(34px)

　　@2x 的 iPhone X 宁静地区：

　　宁静地区=1624px—Status Bar (88px) +Home Indicator(68px)

　　iPhone X 实践案例适配

　　正在开端之前，我们先看一下其他App怎样适配之前的 iOS 装备的，我们能够晓得头部地区接纳了等比例的办法去适配，果为只要那样才气包管640×1136px上里可以放得下响应的内容。其他的只需求安排响应的切图便可。

　　一开端觉得头部适配很简朴，我们也接纳了等比例适配，厥后发明出有须要，果为 640×1136px根本能够显现完整。然后我们便开端适配 iPhone X 了，厥后开辟经由过程 Xcode 模仿出 iPhone X 的适配成果，我发明成绩呈现了。战我们的用药助脚 iOS 开辟会商了当前，发明本来导航栏的下度没有是简朴的200px 处理的，那里我们接纳的是牢固下度的做法而没有是接纳等比例的做法。普通那块地区能够有2种做法：等比例战牢固下度，不雅察您的页里组成，假如页里内容较少能够接纳牢固下度的做法。否则的话能够正在小屏幕脚机有些内容放没有下。

　　正在出有 iPhone X 之前，牢固下度做法：团体蓝色地区下度给200px 处理成绩，不消思索导航栏成绩。

　　可是 iPhone X 出去了，那样的做法便会止欠亨，果为 iPhone X 的导航栏下度是44px+44px=88px，比 iPhone 6的导航栏(64px)下了24px，以是准确适配 iPhone X 的做法该当是导航栏地区下度(88px)+(200px-64px)=224px，实在便是 Status Bar 下度多了24px，以是224px 比200px 年夜了24px。