iphone6/6+ 适配心得

news/2024/11/8 15:14:22/

1.     文档综述

iphone6/6+发布,ios屏幕分辨率的种类一下从2种变成了四种。对于以前很多手写UI,并且使用绝对坐标的UI,可能会发生异变,本文主要介绍在纯手写UI条件下,ios应用界面适配的一些经验了。

2.     iphone分辨率px, ptppi,以及@3x

老生常谈的一个问题了。但是随着iphone6+的引入,局面有了新的变化。首先介绍一张表,本章后续内容围绕此表展开:

手机

pt

px

ppi

iphone4/4s/

320x480

640x960

326

iphone5/5c/5s

320x568

640x1136

326

iphone6

375x667

750x1334

326

iphone6+

414x736

1242x2208 (1080x1920)

401

对于6+之前的手机,ptpx的比例为1:2。而6+出来之后,这一比例达到了1:3。同时分辨率达到了1242x2208(使用ip6+截图,再传到电脑上看,就是这个分辨率),而iphone实际分辨率为1080x1920。分辨率的比率为1.15:1

对于ppi6+之前均为326,而6+之后变为401

2.1.  素材资源发生的变化@3x

在实际开发中,素材通常是UI美眉负责提供。从@2x@3x,素材的分辨率提高了1.5倍。例如一个@2x的素材大小为44x44,那么相应的@3x大小分辨率为66x66

文件命名的方式依然没变:${IMG_NAME}@3x.png这种形式了。命名好的文件丢入资源文件夹内,只要代码保持一致,文件名称不变即可。

2.2.  UI到代码

由于ip6+点(point)和像素(pixel)的关系为13,因此,当UI设计稿基于1242x2208分辨率【iphone6+】图给定UI设计稿时,程序员进行实际换算为设计稿的1/3

假设上图是一个设计稿,基于1242x2208UI美眉给了两个按钮间距为30px。为了实现以上效果,则可以在代码中写:

btn2.frame = CGRectMake( GetX(btn1.frame)+GetWidth(btn1.frame)+30.f/3,

                            GetY(btn1.frame),

                            GetWidth(btn1.frame),

                            GetHeight(btn1.frame)

                        );

由于实际间距为30px,因此在代码中应该做除3的处理,保证间距效果。当然,如果设计搞给的不是ip6+的图,那么这里的30.f/3还是应该按照以前的老规矩:30.f/2

2.3.  代码到UI

UI到代码,只要在明确UI给出的设计图是基于哪部手机(具体来说是哪种分辨率)即可。但是,对于已经写好的代码,在不同的UI上表现是否相同呢?还是给出类似上面的代码:

btn2.frame = CGRectMake( GetX(btn1.frame)+GetWidth(btn1.frame)+10.f,

                            GetY(btn1.frame),

                            GetWidth(btn1.frame),

                            GetHeight(btn1.frame)

                        );

有两个btnbtn1btn2之间的水平间距是10。现在问题来了:这两个btn之间的距离在不同手机上看起来是相同的么?我们进行实际的换算:

手机

pt

px

iphone4/4s/5/5c/5s

10

20px

iphone6

10

20px

iphone6+

10

30px

因此,相同的代码,在iphone6+和非iphone6+(ip4, 5, 6)的手机上表现是不同的:

在非iphone6+中,间距为20px;在iphone6+中,间距为30px。糟了,那间距在不同手机上相差了10个像素?外观就有差距了,如何调整?

【其实不用太过担心】,他们的间距【看起来】依旧相同。还是给出一个表格:

手机

pt

px

ppi

iphone4/4s/5/5c/5s/6

10

20

326

iphone6+

10

30

401

继续回顾以前的讨论:

·分辨率缩放

ip6+的实际分辨率为1080x1920,和1242x2208的分辨率的比例为11.15。那么30px在实际距离变为了:

可以看到差不多在26px左右,间距【看起来】变小了一些。

·ppi影响

ppi,每英寸像素个数。ip6+ppi401,而非ip6+ppi326。相同屏幕物理距离,ip6+会显示更多的像素;或者,相同px长度,在ip6+上【看起来】更短。它们之间的比例:

·【看起来】

现在我们计算30pxip6+上与以前ip手机相比【看起来】有多长:

换算完毕之后,pt10,在ip6ip6+上面的间距【看起来】变成了:

20px21.2px在高分屏上,并且是用肉眼观察,它们的区别是很不明显的。那么结论就是,相同的UI代码,在不同的手机上的表现是基本相同的。对于在以前手机上写死的相对距离,不用过于担心在ip6+上的排序会乱掉。

ip6+的处理上可以看出,苹果手机在设计时对开发者的关怀。

3.     适配心得

总结自己对ip6ip6+的适配心得,未来有更多经验后,会继续丰富本章中的内容。

适配问题其实在ip5出现的时候就存在了,乔布斯的3.5寸是最方便单手操作的尺寸已经成为过去,ip54寸屏幕扇了自己的脸。随着ip6的出现,屏幕分辨率也越来越多样化,以前在iOS中很方便的写死坐标法将越来越不好用了。因此需要进行适配。

可以对控件间距进行适配,也可以对控件大小本身适配。

3.1.  适配原因

适配的最主要原因就是以前潜在的代码存在手写死坐标,导致在屏幕高度和宽度都发生变化后带来的UI错乱问题,简单举两个例子:

·例子1

某人想把一个按钮放在屏幕右边的位置,写下了如下代码:

btn.frame = CGReactMake(290,y,width,height);

这段代码在ip4/5上面都正常,因为屏幕宽度均为320,而对于ip6/6+,屏幕变宽了,按钮位置看起来发生了变化:

如上图,按钮在ip6ip6+上面表现的不再靠屏幕右边,而是越来越靠左。

·例子2

对于两个按钮的间距或者按钮宽高度问题,前面已经讨论过了,在不同的屏幕上【看起来】是一样的。但是屏幕大小发生了改变,因此也需要酌情进行适配。酌情的原因是,有些间距UI要求就是固定间距,而有些间距UI要求是相对间距,所有要根据情况来看。

现在给一个例子,依旧是前面的间距问题:

btn2.frame = CGRectMake( GetX(btn1.frame)+GetWidth(btn1.frame)+10.f,

                            GetY(btn1.frame),

                            GetWidth(btn1.frame),

                            GetHeight(btn1.frame)

                        );

iphone4/5时,btn2在间距btn1右侧10单位后,来到了比较靠近的屏幕右侧的位置。而当屏幕变宽之后,在ip6ip6+上面却无法达到靠近右侧的效果。

3.2.  常见适配方法

适配的总体原则就是相对布局了。

后续几个小节介绍一些常见的适配方法。未来总结出更多新的适配思想后,也会对文章内容进行响应补充。

3.2.1. 不适配

对于ip6或者6+最简单的适配方法就是:不适配。

曾经ip5刚刚出现的时候,以前基于ip4写的应用在ip5上运行的话,会发现屏幕的顶端和底端出现两条黑又粗的黑边。出现黑边的主要问题是ip4ip5的屏幕比例不同:

而当ip66+出现时,屏幕的比例变成了:

 

从上面计算可以看出,ip566+的屏幕比例均为169。因此,当一个app【支持ip5】的话,那么在ip6/6+上运行时,系统将会对画面进行拉伸,以便填充整个屏幕。

拉伸之后看起来图标、字体、图片什么的都变大了,并且清晰度降低了,感觉就是在PC上全屏运行FC模拟器玩游戏这种感受。虽然降低了用户体验,但是比以前屏幕顶端和底端出现粗又黑的黑条来说,简直是好多了。

3.2.2. 占屏比适配

以前UI给距离,长度等内容,通常给定的是像素值px。现在为了进行适配可以给出像素值相对某个长度的比例:

例如,两个按钮的距离是屏幕宽度的12%

对于不同手机,屏幕宽度是不同的。这样两个按钮的间距在不同屏幕上就显示合适了。使用[UIScreen mainScreen].bounds.size.width求出屏幕宽度。

当然也不一定使用屏幕宽度作为基准尺度,在实际应用中,还可以选择superView frame的宽度、按钮本身宽度、某个基准图片的宽度等作为基准尺度。

3.2.3. 比例缩放适配

另一种适配方法就是比例缩放适配了,根据屏幕比例进行适配。例如,在ip5上,btn1btn2的横向间距为10

那么,在ip6/6+的间距可以根据屏幕长度带来的变化进行:

 

比例缩放适配,使得UI仅关注某个iphone机型,其它机型根据屏幕宽度和高度进行缩放即可。

转载于:https://www.cnblogs.com/ilfmonday/p/iphoneAdapt.html


http://www.ppmy.cn/news/665119.html

相关文章

vue-H5 移动端适配方案 rem

vue-H5 移动端适配方案 rem 在这里插入代码片(function (doc, win) { var docEl doc.documentElement, resizeEvt “onorientationchange” in window ? “onorientationchange” : “resize”, recalc function () { var clientWidth docEl.clientWidth; if (!clientWid…

HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难。为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于…

H5性能优化方案

H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性。 用户感受 当用户能够在1-2秒内打…

HTML5学习

文章目录 autofocus自动聚焦语义化标签DOCTYPE声明metameta http-equivmeta charset的指定viewport移动端视口 不允许写结束标记的元素可以省略结束标记的标签属性值的简写废弃标签contenteditable规定元素内容是否可编辑hidden属性data-* 属性draggable拖拽属性dataTranfer数据…

android iphone字体,网站中的字体设置--兼容苹果、pc、安卓系统的字体设置

在网站设计制作中很多人会遇到一个问题:设计图和实际出来的网站的页面字体差别很大?苹果、pc、安卓以及各个浏览器显示都很不一样? 这要从网站设计各个职能的人说起了,平面设计师设计完后不管了,丢给前端工程师开发h5代码。而前端设计师做完后又丢给程序开发写后台程序………

如何做好云渗透测试的威胁建模(上)

NO.1 威胁建模相关定义 微软针对威胁建模(Threat modeling)的描述:威胁建模是帮助保护系统、应用程序、网络和服务的有效方法。这是一种工程技术,用于识别潜在的威胁和建议,以帮助降低风险并在开发生命周期的早期实现…

Vim 使用学习记录(1)

前言 在使用编辑器的时候依然存在很多不方便,Vim使用上手成本很高,但还是得学着用,此系列用来记录学习使用的Vim基本命令和用法 参考链接 zhihu 参考链接 博客 vim基本模式 vim的基本模式分为: 命令模式(Command Mo…

Pycharm新建模板默认添加作者时间等信息

在pycharm使用过程中,对于每次新建文件的shebang行和关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便。 方法如下: 1.打开pycharm,选择File-Settings 2.选择Editor--Color&Style--File and Templates--Python-S…