iOS屏幕适配(续)

上一篇博客总结了iOS屏幕适配的若干技巧,本文再补充几点别的方面

设计图

一般会先由美工做出界面的设计图,然后开发再去实现。上一篇博客说的主要是,开发怎么实现的问题。实际上从设计图这个环节,就需要开始考虑界面适配的问题。主要是2点:

1、出几张图

如果以iPhone6为基准出设计图的话,一般很难完美地适配到iPhone4,5和6P上,因为屏幕尺寸差异很大。一般在6上摆得很紧凑好看,在4和5上就会摆不下(溢出屏幕),在6P上则会有比较大的空隙

通常有几种办法:

设计元素的位置和大小,不用具体的数值,而是使用百分比,这样在每种屏幕上会适配。但是通常这只是理想情况,因为4种屏幕的宽高比都不一样,必然会出现拉伸的情况;可能在4上的显示区域和点击区域都会非常小;而且也难以达到最佳视觉效果

尽量考虑流式布局,比如瀑布流,滚动页面等,这样由于页面可滚动,通常不会出现太大的问题。相比之下,把显示区域限制在一个屏幕里,就容易出问题

最完美的办法,出4张设计图,尺寸用具体数值而不是百分比。这种做法可以在每个屏幕上达到最佳效果。当然设计和开发的工作量也是最大的

2、点和分辨率的关系

iOS在开发的时候,用的单位是point,可是一般只有开发人员才理解这个概念,设计师画图时一般都是用分辨率。在4,5,6上都是2X分辨率,而在6P上是3X分辨率。在设计的时候,必须考虑这点

比如说,字体大小在2x屏上是24px,一定要尽量在3x上设计成36px,这样开发不需要做任何判断,字体大小自然会乘以1.5。一个反面的例子,设计图上2x屏是24px,3x屏是28px,这通常就是一个错误的设计。开发只能根据屏幕类型,设置UIFont的大小,而且28还无法被3整除

再比如说,设计一个元素距离左边距在2x屏上是10px,那么在3x屏上就设计成15px,开发也不需要做任何改动

兼容WEB页面

还有一种情况,某些页面需要在APP上实现,同时也要在web页面上实现。我们一开始错误的做法,是要求web页面去“精确”地实现APP的设计图。实际上这是不可能的,因为2点:

1、WEB页面使用的CSS布局方法,跟iOS界面开发的思路有很大差异,在实现上会有问题

2、WEB页面要面对的手机屏幕尺寸更多,无论是设计还是开发,要精确地匹配N种屏幕,根本不可能

所以,正确的做法,是针对WEB页面再出一张设计图,其中的尺寸用百分比决定:

如上图,在APP设计图里可以精确确定每个单元格的宽度,而在WEB里,应该指定每个单元格占屏幕宽度的50%。甚至,在WEB上应该用响应式布局来处理尺寸差异巨大的屏幕,不过这是另一个话题,不延伸了

UIFont到底有多大

这个是我们试错试出来的,其实非常简单,设置

[UIFont systemFontOfSize:16]

这个字体在2x屏上就是32px,在3x屏上会自然变成48px,非常方便

同理,设置一个UIView的frame为

CGRectMake(0, 0, 100, 100);

在2x屏上是200px * 200px的矩形,在3x屏上是300px * 300px的矩形

时间: 2024-11-05 16:11:08

iOS屏幕适配(续)的相关文章

iOS屏幕适配

一.iOS屏幕适配发展历程 设备 适配技术 4及以前(iPad未出) 直接用代码计算 有了iPad autoResizing 有不同屏幕的iPhone后 autoLayout 有更多不同屏幕的iPhone后 sizeClass 二.各个技术的特性 1. 直接用代码计算 由于屏幕的大小都一样,只有横竖屏的情况,可以直接计算 2. autoResizing 适合于控件与其父控件的关系 各属性的解释 属性 解释 UIViewAutoresizingNone 不会随父视图的改变而改变 UIViewAut

iOS 屏幕适配

对于iOS开发,屏幕的适配真的很重要,在这里就不多说了,今天主要给大家介绍一下按比例适配: 1.首先我们在 AppDelegate.h 里面定义两个宏定义,屏幕的宽和高 #import <UIKit/UIKit.h> //宏定义 #define ScreenHEIGHT [[UIScreen mainScreen] bounds].size.height #define ScreenWIDTH  [[UIScreen mainScreen] bounds].size.width @interf

iOS屏幕适配方案-Auto Layout

市场上的android手机五花八门.各种尺寸的屏幕让android程序员们比較头疼. 也有一些大神写了一些博客提出了自己的观点.iOS貌似也迎来了大屏6+,因此屏幕适配的问题也是有滴,因此苹果也有自己的方法-auto Layout . 本人初学iOS.今天学了自己主动布局.在学习的过程中,毕竟还是有些知识点没有接触到的,因此写这篇博客来深入的了解一下Auto Layout. 官方解释: Auto Layout 是一个系统,能够让你通过创建元素之间关系的数学描写叙述来布局应用程序的用户界面.--<

iOS屏幕适配的几种方式

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策);(2)Autoresizing的使用(中策);(3)AutoLayout的使用(上策);(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据屏幕宽高写控件frame 利用宽高比,在不同的屏幕中来进行对控件的位置与控件的宽高进行等比例缩放.选定一个型号的屏幕的宽高为基准,进行等比例缩放.例如以iPhone6或者iPhone6s为基准. 其宽高分别是375与667.Iphon

iOS - 屏幕适配-之自动适配

最近把xcode升级到7,然后就是各种蛋疼的问题,出现,期中有一个就是屏幕适配的问题,由于 我的项目比较老,所以,一直没怎么注意过屏幕适配,都是ios 自动适配,这在ios8 之前都没有问题,但是在ios9后,这个问题就出现了,启动程序后,,出现上下边黑屏,找了些资料,弄明白: 从Xcode6 GM版本开始,模拟器新增了iPhone6和iPhone6 Plus两种,如果旧的工程直接跑到这两个模拟器中时,默认是"兼容模式",即系统会简单的把内容等比例放大,显示效果有些模糊但尚可接受.此时

iOS 屏幕适配 (转)

参考 微信的多屏适配 目前为止,iPhone屏幕尺寸已经有四种: 3.5(inch):1/3G/3GS/4/4S 4.0(inch):5/5S/5C 4.7(inch):6 5.5(inch):6Plus 看一下iPhone4~6(+)的屏幕高宽比: iPhone4(s):分辨率960*640,高宽比1.5 iPhone5(s):分辨率1136*640,高宽比1.775 iPhone6:分辨率1334*750,高宽比1.779 iPhone6+:分辨率1920*1080,高宽比1.778 可粗略

iOS屏幕适配(尺寸适配)

屏幕适配在用Masonry.或者其他的感觉有点用不习惯,屏幕尺寸适配是我在前辈哪儿雪来的,简单分享一下我的写法,不成熟之处望多多指教,仅供参考:建议跟着代码敲一遍,以后自己用者熟悉方便,原理也很简单:废话有点多了,上 创建项目-创建PCH文件:若要创建.pch , 在other里选择 PCH file,并需要修改一下设置.在build settings 里设置 Precompile Prefix Header的值为YES,并设置Prefix Header的路径. 创建一个扩展文件UIView+C

&lt;iOS屏幕适配&gt; iPhoneX SafeArea - 安全区域

一. 前言 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "PingFang SC"; color: #000000 } span.s1 { } span.s2 { font: 13.0px "Helvetica Neue" } 本文的出发点是对iOS设备的适配, 我们之前的适配只是考虑设备的尺寸, 设备的方向, 而在iPhoneX出来之后呢, 我们又多了一种考量, 那就是刘海和底部横条(HomeIndic

iOS 屏幕适配之sizeclass

1. 屏幕适配的各种技术 1> 3gs\4\4s时代:没有屏幕适配一说,尺寸只有一个,直接用代码计算frame就行了 2> iPad出现:为应对横竖屏,苹果推出autoresizing,它的作用是让子控件能跟随父控件做拉伸.如下图,autoresizing可以让红色的子控件的宽度始终铺满屏幕 3> 5\5c\5s的出现:autoresizng不够用了,因为它只能解决父子关系控件的排布问题,解决不了兄弟关系控件之间的位置关系,所以autolayout出现了. autolayout,可以在任