扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策);(2)Autoresizing的使用(中策);(3)AutoLayout的使用(上策);(4)sizeClasses+AutoLayout的使用(上上策)。下面将会分别来进行叙述。
坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观,专业网站建设服务10余年为成都成都咖啡厅设计小微创业公司专业提供成都定制网页设计营销网站建设商城网站建设手机网站建设小程序网站建设网站改版,从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。
(1)根据当前屏幕的宽高写frame
在新特性界面中,根据:[UIScreen mainScreen].bounds.size.height.来判断用户的屏幕长度,来判断时3.5寸,4寸,4.7寸,5.5寸,以此来设置新特性中图片选用哪套。
常用写法:
#define JKScreenW [UIScreen mainScreen].bounds.size.width
CGFloat btnW = JKScreenW * 0.2;
缺点:代码复杂,容易出错;而且维护难度大,灵活性极差。
(2)Autoresizing使用
在Autolayout以前,有Autoresizing可以做屏幕适配,但局限性较大,只能针对父子关系进行有限调整,如边距固定,尺寸可变,对于兄弟关系的调整无法实现。对于UI比较固定的app,这种方式基本满足。相比之下,Autolayout比Autoresizing强大很多。
(3)Autolayout使用
--在以前的iOS程序是怎样布局UI的?
经常编写大量的坐标计算代码;
为了保证在各种屏幕上都能有完美的UI界面效果,有时还需要分别为几种屏幕编写不同的坐标计算代码(即传说中的“屏幕适配”)
--什么是Autolayout?
Autolayout是一种“自动布局”技术,专门用来布局UI界面的。
Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大的推广。
自iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升。
苹果官方也推荐开发者使用Autolayout来布局UI界面。
Autolayout能够很轻松的解决屏幕适配的问题。
(4)Size Classes使用
iOS8中新增了Size Classes特性,他是对当前所有iOS设备尺寸的一个抽象。
用法:
屏幕的宽和高分别分成三种情况:(Compact,Regular,Any).也就是紧凑,正常和任意。这样宽和高三三整合,一共九种情况。针对每一种情况,如果需要的话,我们可以单独在storyboard或xib中设置UIView的自动布局约束,甚至某一个button是否显示都是能轻松实现的。
我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线的长度(diagonal)
PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目。
PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱。
根据勾股定理
计算结果稍有出入,这是因为像素的离散采样有锯齿效应。
早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS绘制图形(CGPoint/CGSize/CGRect)均以point为单位(measured in points):
后来在iPhone4中,同样大小(3.5 inch)的屏幕采用了Retina显示技术,横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326), 显像分辨率提升至iPhone3GS的4倍(1个Point被渲染成1个2x2的像素矩阵)。
在同样的逻辑坐标系下(320x480):
为了自动适应分辨率,系统会根据设备实际分辨率,自动给UIScreen.scale赋值,该属性对开发者只读。
在同样的逻辑分辨率下,可以通过scale参数识别是iPhone3GS还是iPhone4(s)。以下基于nativeScale参数,定义了探测机型是否为iPhone6+的宏
--------------------------------------------------------------------------------那么,同样的分辨率和scale,如何区分机型iPhone4与4s、iPhone5与5s呢?通过[[UIDevice currentDevice] model]只能判别iPhone、iPad、iPod大类,要判断iPhone具体机型型号,则需要通过sysctlbyname("hw.machine")获取详细的设备参数信息予以甄别。
iPhone3GS时代,我们为一个应用提供图标(或按钮提供贴图),只需要icon.png。针对现在的iPhone4~6 Retina显示屏,需要制作额外的@2x高分辨率版本。
Phone6+在实际渲染时,downsampling/1.15(1242x2208-1080x1920),准确的讲,应该是@2.46x。苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上。
参考: 一张图帮你看懂 iPhone 6 Plus 屏幕分辨率
1
该方法使用系统缓存,适合表视图重复加载图像的情形。同时该API根据UIScreen的scale,自动查找包含对应高倍图后缀名(@2x)的文件,如果找到二倍图,则image.scale=2.0,对应逻辑size大小以point度量(pixel度量的一半);如果没找到设置默认image.scale=1.0,对应逻辑size大小同像素尺寸。因此,
2
这组方法创建的UIImage对象 没有使用系统缓存 ,并且指定文件名必须包含明确的高倍图后缀。
3
//考虑 转屏 的影响,按照实际屏幕方向(UIDevice Orientation)的宽高
//不考虑转屏的影响,只取竖屏(UIDevice OrientationPortrait)的宽高
待续
针对不同屏幕尺寸的适配,主要有3种方式:
1.不同屏幕尺寸下,元素的尺寸是固定的;
2.不同屏幕尺寸下,元素的尺寸改变一个delta值;
3.不同屏幕尺寸下,元素的尺寸随屏幕尺寸缩放。
这里记录一些适配中经常用到的宏。
2.不同屏幕尺寸下,元素的尺寸改变一个delta值
3.不同屏幕尺寸下,元素的尺寸随屏幕尺寸缩放
Come on! 来看看 主流的适配方案吧
随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。
当然除了这三种还有iPhone4 屏幕是 640*960,加起来就有四种屏幕了,你有没有感觉很复杂,发过愁吗,我们来慢慢分析下
加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?一个基本思路是:
1、选择一种尺寸作为设计和开发基准;
2、定义一套适配规则,自动适配剩下两种尺寸;
3、特殊适配效果给出设计效果。
来看一下手机淘宝的iPhone 6/iPhone 6 Plus采用的协作模式,再慢慢说明原委。
第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。
第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。
第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。
第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。
为什么选择iPhone 6作为基准尺寸?
当面对大中小三种屏幕需要适配的时候,很容易想到先做好一种屏幕,再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6(750px/375pt)作为基准,基于几个原因:
1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计,到320pt可能元素之间比例就不是那么回事了,比如图片和文字之间视觉比例可能失调。
2、iPhone 6 plus有两种显示模式,标准模式分辨率为1242x2208,放大模式分辨率为1125x2001(即iPhone 6的1.5倍)。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。
3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率,不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率,但是大屏时代依然以小尺寸为设计基准显然不合时宜,设计师会停留在小屏的视角做设计。
所以,iPhone6的750x1334是最适合基准尺寸。
只交付一套设计稿,默认用什么规则来适配?
前文提到适配策略是先选择iPhone 6作为基准设计尺寸,然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话:文字流式,控件弹性,图片等比缩放
控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势。
按照上述默认适配规则,大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容,需要设计出特殊适配效果。比如App store首页焦点图,从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个,真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。
读完你懂了吗,如果有疑问,欢饮留言跟我讨论╰( ̄▽ ̄)╮
原文地址
第一种
添加两个文件 UIViewExt.h与UIViewExt.m文件
在ViewController.h文件中导入头文件
#import"UIViewExt.h"
然后宏定义 获取设备的高与宽
#define HEIGHT self.view.height
#define WIDTH self.view.width
然后在ViewController.m文件中初始化各种控件时就可以使用视图的相对位置
如
self.lblName=[[UILabelalloc]initWithFrame:CGRectMake(self.view.left+50,self.view.top+100,WIDTH/8,HEIGHT/16)];
self.lblPassworw=[[UILabelalloc]initWithFrame:CGRectMake(self.view.left+50,self.lblName.bottom+10,WIDTH/8,HEIGHT/16)];
第二种
这种方法是 等比缩放
首先在AppDelegate.h文件里面
宏定义 获取设备的高与宽
#define SCREENHEIGHT [[UIScreen mainScreen] bounds].size.height
#define SCREENWIDTH [[UIScreen mainScreen] bounds].size.width
接着声明两个属性变量
@property(assign,nonatomic)floatautoSizeScaleX;
@property(assign,nonatomic)floatautoSizeScaleY;
在AppDelegate.m文件里面
//初始化AppDelegate单例的方法
AppDelegate*myDelegate=[[UIApplicationsharedApplication]delegate];
//判断屏幕的高大于480即为iPhone5或以上设备因为它们屏幕都是等比增长的
if(SCREENHEIGHT480)
{
/**
*以iPhone5为基准若是iPhone5
则myDelegate.autoSizeScaleX=SCREENWIDTH/320;
即为myDelegate.autoSizeScaleX=320/320;
若是iPhone6
则myDelegate.autoSizeScaleX=SCREENWIDTH/320;
即为myDelegate.autoSizeScaleX=375/320;
*/
myDelegate.autoSizeScaleX=SCREENWIDTH/320;
myDelegate.autoSizeScaleY=SCREENHEIGHT/568;
}
else{
/**
*否则即为iPhone4
*/
myDelegate.autoSizeScaleX=1.0;
myDelegate.autoSizeScaleY=1.0;
}
在ViewController.h文件中使用时导入头文件
#import"AppDelegate.h"
模仿系统的CGRectMake方法 重写一个CGRectMake1方法 在初始化控件时用这个方法就可以实现等比缩放 来失陪不同屏幕尺寸的iPhone
/**
* CG_INLINE为内联函数
将CGRectMake重新定义为CGRectMake1
*
* @param x #x description#
* @param y #y description#
* @param width #width description#
* @param height #height description#
*
* @return rect的大小
*/
CG_INLINECGRect
CGRectMake1(CGFloatx,CGFloaty,CGFloatwidth,CGFloatheight)
{
CGRectrect;
AppDelegate*myDelegate=[[UIApplicationsharedApplication]delegate];
rect.origin.x= x * myDelegate.autoSizeScaleX;
rect.origin.y= y * myDelegate.autoSizeScaleY;
rect.size.width= width * myDelegate.autoSizeScaleX;
rect.size.height= height * myDelegate.autoSizeScaleY;
returnrect;
}
iOS设计尺寸375*812适配安卓可以按照以下标准做参考:设计基准选择指的是挑选当前主流的手机屏幕分辨率作为设计适配标准。摒弃些非主流甚至已经淘汰的手机屏幕尺寸,例如i0S@1x倍率的屏幕尺寸。
目前一般以iOS系统主流分辨率750x1334像素进行设计,像素倍率为@2x,因为它的尺寸向上或向下适配时,界面调整幅度最小,偏差不会太大,视觉比例也不会出现太大问题。而且与Android版本720x1280像素的尺寸相近,甚至屏幕密度也是相近的,所以只需做最小的设计调整。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流