189 8069 5689
第一种
创新互联主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、响应式网站开发、程序开发、网站优化、微网站、成都小程序开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的网站建设、做网站、网站设计、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体。
添加两个文件 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;
}
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+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。
读完你懂了吗，如果有疑问，欢饮留言跟我讨论╰(￣▽￣)╮
原文地址
一、App屏幕适配通用知识简介
1. 标注时注意事项
一般情况要定位一个Icon只需给出 上/下边距，左/右边距
标注图标距离只需标到可点击范围外
通用型颜色、字体单独标明一份
通用型模块只需单独标明一份，如导航栏
手机可视区域一般为宽度固定，长度超出边界可滑动，所以，标注物体宽度时可按比例说明
如果要标注内容上下居中，左右居中，或等比可不标注
当绘制的是一个列表时且每一条内容一样时，只需标注一条，如果每条内容有少许不同时，只需标明差异 部分
当交付的是一张完整图片时，不需做机型适配，只需给高清图(1920*1080)即可，注意进行压缩
当背景是纯色时只需给出色值（iOS使用RGB色值，Android使用16进制色值）
图标应给出可点击区域
若图标在不同页面重复出现，且尺寸相差不大，直接给出最大一份切图，并在圆形图标明尺寸，程序会根据需求缩放
可点击按钮通常要给出两种状态：普通/点击(选中)
按钮如果只是矩形、圆角矩形、圆形、椭圆形，给出尺寸和色值，可程序设置
渐变效果可通过程序实现，只需给出起始和结束色值跟范围
2. 切图命名规范
背景：bg_xxx.png
按钮：btn_xxx_normal.png/btn_xxx_select.png
图片：img_xxx.png
标签：tab_xxx.png
图标：icon_xxx.png
照片：pht_xxx.png
导航：nav_xxx.png
图示：tip_xxx.png
菜单：menu_xxx.png
侧栏：sidebar_xxx.png
二、iOS应用屏幕适配
1. iOS究竟要是适配多少种机型，以哪款机型分辨率作为设计尺寸最好
2016-3
iOS只需兼容iPhone4，完美兼容iphone5以上机型
如果按矢量图制作设计图按1X尺寸作图，后期放大成2X、3X；如果按传统的px作图应用最大尺寸(3X)作为画布。
以3X作为画布(1242*2208)难记且不能整除，我们可直接以1280(640*2)作为宽度，完美缩放为1X、2X;
2X-3X以1.5来算尺寸和字号可得到较好效果
2. 界面尺寸
设备分辨率状态栏高度导航栏高度标签栏高度
iPhone6 plus1242*2208px60px132px146px
iPhone6750*1334px40px88px98px
iPhone5/5s/5c640*1136px40px88px98px
iPhone4/4s640*960px40px88px98px
iPad3/4/Air/Air2/mini22048*1536px40px88px98px
iPad1/21024*768px20px44px49px
iPad mini1024*768px20px44px49px
导航栏背景图中,如果考虑状态栏背景,则背景图尺寸为导航栏px+状态栏px,如果只改变导航栏颜色则只需要导航栏px
3. 图标尺寸
设备App Store程序应用主屏幕spotlight搜索标签栏工具栏和导航栏
iPhone6 plus1024*1024px180*180px144*144px87*87px75*75px66*66px
iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px
iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px
iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px
iPad mini1024*1024px90*90px72*72px50*50px25*25px22*22px
按钮切图建议以等宽高尺寸切图,且像素必须=88、*88px , 当本身图片宽度或高度不足时,补充空白像素(透明像素).一般情况下,只需要普通状态下按钮切图即可
(适配不建议等比放大)
4. 参考文献
友盟设备指数
APP切图流程和APP切图命名规范详细完整版
APP切图详细规范终极指南
iOS和Android的app界面设计规范
APP界面切图命名和文件整理规范
三、Android应用屏幕适配
1.用px作为基础单位的缺陷
对比上图可以知道，ppi越低图片显示的越大，ppi越高图片显示的越小，造成不同手机上显示图片布局不统一！
使用dp作为单位所有机子显示统一
2. 衡量一个屏幕清晰度单位————屏幕密度(dpi==ppi)
计算公式：屏幕dpi = √ (屏幕长^2 + 屏幕宽^2) / 屏幕尺寸
名称密度代表分辨率Android单位与像素换算
mdpi120dpi~160dpi320*4801dp=1px
hdpi160dpi~240dpi480*8001dp=1.5px
xhdpi240dpi~320dpi720*12801dp=2px
xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px
xxxhdpi480dpi~640dpi2k~4k1dp=4px
屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画
320*480px48*48px32*32px16*16px24*24px不小于2px
480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小于3 px
720*1280px96*96px64*64px32*32px48*48px不小于4 px
1080*1920px144*144px96*96px48*48px72*72px不小于6 px
3.究竟要适配多少种机型
2016-3
得出结论： 只需适配高端的xxhdpi(720*1280/1080*1920)，低端的hdpi(480*800)
4. 度量单位与边框
可触摸控件都是以 48dp 为单位的
为什么是 48dp？一般情况下，48dp 在设备上的物理大小是 9mm (会有一些变化)。这刚好在触摸控件推荐的大小范围 (7-10mm) 内，而且这样的大小，用户用手指触摸起来也比较准确、容易。( xxhdpi标准下为144px )
边框 注意留白 界面元素之间的留白应当是 8dp 。
例：
5. 字体排版
Roboto 是Android系统的默认字体集，字体大小单位 sp（可缩放像素数，scaleable pixels）
根据Android设计规范，推荐使用 12 、 14 、 16 、 20 和 34 号 ，字体粗细可调
spHDPIXHDPIXXHDPI
12sp18px24px36px:
14sp21px28px42px
16sp24px32px48px
18sp27px36px54px
20sp30px40px60px
34sp51px68px102px
（注意：字号要为双数，且不可带小数位）
6. 9-patch 图制作
什么是9-patch图
为什么要用9-patch格式制作图
适应各种手机屏幕拉伸图片需求，有效缩减图片体积
什么情况下使用
当发现图片是背景时且可能拉伸被拉伸时，或图片过大时
如何制作patch9 图
图片外层增加一全透明像素，在透明像素区花4条纯黑色边
1. 宽度可拉伸区域
2. 高度可拉伸区域
3. 垂直内容区域
4. 水平内容区域
8. 参考文献
友盟设备指数
Android 设计指南简体中文版4.x
Material Design 中文版
Android设计中的.9.png
iOS设计尺寸375*812适配安卓可以按照以下标准做参考：设计基准选择指的是挑选当前主流的手机屏幕分辨率作为设计适配标准。摒弃些非主流甚至已经淘汰的手机屏幕尺寸，例如i0S@1x倍率的屏幕尺寸。
目前一般以iOS系统主流分辨率750x1334像素进行设计，像素倍率为@2x，因为它的尺寸向上或向下适配时，界面调整幅度最小，偏差不会太大，视觉比例也不会出现太大问题。而且与Android版本720x1280像素的尺寸相近，甚至屏幕密度也是相近的，所以只需做最小的设计调整。
在iOS开发中，有些公司对字体也有适配要求，为了让字体美观，所以在不同尺寸的屏幕上字体大小也要做到适配。
自己总结了几种方法供大家参考。
方法一：用宏定义适配字体大小（根据屏幕尺寸判断）
方法二：用宏定义适配字体大小（根据屏幕尺寸判断）
方法三：(利用runTime给UIFont写分类 替换系统自带的方法)推荐使用这种
外部正常调用系统设置字体方法就行
注意:
作者链接：
基本上每个IOS APP都会有新手引导页面这个功能，常规的就是几张静态图片，可以左右滚动。既然涉及到图片，就肯定会存在适配的问题（为了达到最优的体验效果，一般都会针对不同的分辨率设计不同尺寸的图片），本文主要就是讨论如何适配的问题。
2.1 方案一
根据屏幕分辨率的不同，使用不同的图片。
2.2 方案二
熟悉IOS开发的人都知道，每一个ios项目中，都有一个Assets.xcassets文件夹，用来管理项目中所有的图片（AppIcon、LaunchImage、其他业务图片）。
从上面的截图我们可以看到，xcode提供了两个内置的类型AppIcon、LaunchImage。我们只要提供正确尺寸的图片，ios系统就能在不同分辨率的设备上使用对应的图片而无需我们自己指定；另外就是我们自己创建的（avatar），提供2x、3x这两种类型的图片即可（1x的设备现在基本上找不到了，而且当前的ios系统也不支持1x的设备）。那么问题来了，我们自己创建的图片集合，只有3个类型（1x、2x、3x），并不能按照分辨率来设定。再看一下上面的截图，有一个“show”的图片集合，形式如下：
咦！这个鬼东西是怎么搞出来的？我们先看看Assets.xcassets文件夹在硬盘上的组织形式：
从上图我们可以看到，系统内置的两种类型AppIcon、LaunchImage对于的文件夹为AppIcon.appiconset、LaunchImage.launchimage，我们自己创建的图片集合avatar对应的文件夹为avatar.imageset。讲到这里，你应该大概猜到了show这个图片集合是怎么创建出来了吧？
1、先创建一个LaunchImage类型的图片集合；
2、修改名称（LaunchImage→show）
3、修改文件夹名称(show.launchimage→show.imageset)
回到正题，在show这个图片集合里面，我们就可以轻松的根据分辨率设置2x、3x类型的图片。
现在我们可以按照下图的方式使用新手引导图片了：
亲测：不同分辨率的设备，展示对应的图片。
我们注意到，show.imageset文件夹中有一个文件Contents.json，正是这个文件，ios系统才能根据设备类型展示对应的图片资源。Contents.json文件内容如下：
系统展示图片的时候，会先解析这个文件，然后根据设备的分辨率，找到对应的图片。