扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1.png的方案
创新互联是一家集网站建设,雁山企业网站建设,雁山品牌网站建设,网站定制,雁山网站建设报价,网络营销,网络优化,雁山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
3x规格png实施起来会简单很多，设计师可以以iPhone6s plus为设计稿，导出稿中相同大小的图片，以6s为设计稿的话输出图片时宽高均乘以1.5。开发拿到切图后，iOS对应放入3x，Andrpid对应放入xxhdpi，搞定。目前使用率来说3x（即3倍）就足够了，其他倍数会从3x自动缩小获得。
2.矢量图方案
这个方案会复杂些。iOS矢量图为pdf格式，大小以1x输出就可以，这样做可以方便开发人员导入和布局。Android可以用VectorDrawable或者svg转png插件，需要的是svg格式矢量图。用VectorDrawable的话，设计师最好用最简单的方式制作svg，最好只用绘线和填色，蒙版、挖空、区域透明等等就不要用了。用svg转png插件的话，对制作svg就没有太多要求，但是这类插件会有一些坑，开发人员要去填坑，比如转换后清晰度不够的问题。
我给公司的方案就是设计师输出一套1x规格pdf矢量图，iOS可以直接套用，Android采用svg转png插件，自己写脚本将pdf批量转换成svg，再由插件生成3x规格png，是的，Android最终还是用png。因为公司iOS项目先启动，图片都做好了，不可能再让设计师为VectorDrawable一个图片一个图片的调整。
3. 分辨率和倍数
市面上各个规格的分辨率都有，Android的太多先不讨论，iPhone 6s+是1080x1920，6s是750x1334，se是640x1136。差异这么大难不成要一一适配？显然不可能，幸好除了分辨率外还有倍数的概念，比如2x（2倍）就是指设备的一个点等于2px，一般来说不同设备的一个点物理距离是接近的。我们来看看分辨率除以倍数后的“点”分辨率，那么6s+是414x736，6s是375x667，se是320x480，从这个角度上看，其实几个机型的“点”宽度变化不大，只是高度有所不同，只要布局得当完全可以做到一套设计稿通用大部分机型。
Android的情况也是类似，只是倍数更多，它用另一个名称表示：mdpi（1倍）hdpi（1.5倍）xhdpi（2倍）xxhdpi（3倍）。
补充，6s和se是2x，6s+的倍数情况比较复杂，详细请看：
iPhone 6 Plus的逻辑分辨率为什么是414x736？ - IOS app开发 android app开发 为什么 iPhone 6 Plus 要将 3x 渲染的 2208x1242 分辨率缩小到 1080p 屏幕上？ - iOS 开发
4. 良好的布局
一般来说，选用一款常用机型的分辨率作为设计稿，剩下的便是布局的工作。
布局就像排版一样，每一块区域每一个控件的摆放规则：往一边靠还是居中，拉伸铺满，保持一定比例，还是固定大小。要把设计稿想像得能够随时变宽变窄变高变矮，当大小发生变化时，按照预定的布局规则设计稿会变得怎么样。布局没有捷径，就是多思考多练习。
给个例子，公司的设计稿是以5s为基准，分辨率640x1136，倍数2x。
知道以哪个倍数为基准对适配很重要。比如说，有一次设计师不清楚怎么描述一个九宫格页面时，我让他针对6s+、6s、4s再做一次调整，基准倍数是2x，6s+基准到2x的尺寸便是828x1472，方便同一个设计稿复制到不同分辨率上，通过不同分辨率的调整便能做出满意的页面布局。（在这里你需要一套高效的标注工具）
* 当倍数不为1x，所有px表示的数值都应该能被倍数整除。以2x为例，输出图标大小就不能为45px x 45px，因为当输出到1x和3x时就会出现小数，小数会被舍弃。正确做法是调整到44px或者46px。
5、为什么不采用等比例缩放适配
为什么不采用等比例缩放适配？说到底，更大的屏幕尺寸提供了更多内容展示的空间，等比例缩放没能把发挥出大屏的优势，同时也很难保证系统UI的一致性体验。
示例SVG显示如图SVG格式是XML的一种，SVG文件其实只是普通的文本文件，用一般的文本编辑器便可查看或修改。
?xml
version="1.0"?
!DOCTYPE
svg
PUBLIC
"-//W3C//DTD
SVG
1.1//EN"
"http：//www。w3。org/Graphics/SVG/1.1/DTD/svg11.dtd"
svg
xmlns="http：//www。w3。org/2000/svg"
version="1.1"
width="467"
height="462"
!--
This
is
the
red
square:
--
rect
x="80"
y="60"
width="250"
height="250"
rx="20"
fill="red"
stroke="black"
stroke-width="2px"
/
!--
This
is
the
blue
square:
--
rect
x="140"
y="120"
width="250"
height="250"
rx="40"
fill="blue"
stroke="black"
stroke-width="2px"
fill-opacity="0.7"
/
/svg
[编辑]
SVG显示
[编辑]
插件支持
目前，最常用的SVG插件来自Adobe公司（Adobe
SVG
Viewer），另外Corel也提供SVG浏览器（Corel
SVG
Viewer）。
[编辑]
本地支持
比较著名的
SVG
项目包括
Mozilla
SVG
Project，KDE
的
KSVG，以及
Amaya
等。
Mozilla
Firefox自版本
1.5
发行后，即开始支援
SVG
格式的显示。
基于
Java
的
SVG
项目主要有
Batik
SVG
Toolkit
等。
Opera、Google
Chrome和Safari支持SVG显示。
Microsoft的Internet
Explorer至8.0版为止,尚未支援SVG。
[编辑]
各种SVG解释器支持程度比较
W3C的SVG网站上有一个测试套件可以用来测试SVG解释器对于标准的支持。这个套件既可以在线运行也可以下载到本地运行。截至2007年中，对于流行的SVG软件有如下测试结果：
对SVG支持最好的浏览器是Opera，它支持大多数的SVG特性。
对于专门的SVG浏览器，Batik
SVG
viewer能对大多数特性有良好支持，与Opera不相伯仲。但它不能和浏览器互动。
加载了Adobe
SVG
Viewer的Internet
Explorer也能支持多数SVG特性，但是由于没有浏览器的原生支持，在交互方面许多特性不支持。
Mozilla
Firefox
2.0对SVG特性的支持相当弱，许多重要特性如动画等都不能支持。
[编辑]
设计工具
能够设计SVG图形作品的软件工具包括Adobe
Illustrator以及CorelDRAW等。
而开放源代码的软件有Scribus、Karbon14、Inkscape以及Sodipodi等。
[编辑]
软件支援
Adobe
公司
SVG
插件
及
Adobe
公司
SVG
应用实例演示
Inkscape
开放源代码的软体
Karbon14
开放源代码的软体
Sodipodi
开放源代码的软体
Mozilla
SVG
and
Mozilla
SVG
演示
Firefox
1.5－首个
Firefox
版本开始支援显示
SVG
格式
Opera
浏览器－Opera
8.0
版开始支援显示
SVG
Tiny
1.1
的
spec
规格
[编辑]
参考资料
^
M
Media
Type
registration
for
image/svg+xml
[编辑]
外部连接
相关的维基共享资源：
可缩放矢量图形
W3C
SVG
官方标准网站
svg.org
社群消息网站
svgx.org
新闻及资源网
about-svg.de
svgwiki
SVG
Web
Opera开发网站上关于SVG的展示及教程（英文）
写一个控制器继承自UITabBarController，
在该控制器的ViewDidLoad方法中加入如下代码
// tabBarItem的图片名称
NSArray *images = @[@"tabBarItem_allTest_normal.png",@"tabBarItem_allTest_selected.png",@"tabBarItem_oneStation_normal.png",@"tabBarItem_oneStation_selected.png",@"tabBarItem_testResult_normal.png",@"tabBarItem_testResult_selected.png",@"tabBarItem_userCenter_normal.png",@"tabBarItem_userCenter_selected.png"];
for(int i= 0;i 8;){
// 分别给tabBarItem设置图片，图片模式为源图片
UITabBarItem *item = [self.tabBar.items objectAtIndex:i/2];
UIImage *normalImage = [UIImage imageNamed:images[i+1]];
normalImage = [normalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *selectImage = [UIImage imageNamed:images[i]];
selectImage = [selectImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[item setFinishedSelectedImage:normalImage
withFinishedUnselectedImage:selectImage];
i+=2;
}
// 设置tabbar的选中和未选中的字体颜色
[[UITabBarItem appearance] setTitleTextAttributes:@{
NSForegroundColorAttributeName:[UIColor lightGrayColor]
} forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{
NSForegroundColorAttributeName:[UIColor lightGrayColor]
} forState:UIControlStateSelected];
先说结论：建议做 UI 尽可能使用如 Adobe Illustrator、Sketch.app 这样的矢量绘制软件。若使用 PS 等位图处理软件，也建议尽可能使用矢量蒙版。
我自己是一个喜欢业馀使用 Adobe Illustrator 做设计的人。在当前大部分 GUI，包括 iOS 的 UI 中，控件的形状大部分都是很简单的图形。作为一个矢量创作软件，AI 在对形状、曲线的处理上有天然的优势。如在 AI 中，可以随时调整圆角矩形的圆角大小。并且 AI 支持多重填充、多重描边。如一个对象可以在底层有一个横向的渐变填充模拟金属光泽，同时还可以有一个垂直方向的填充来模拟光照，在 PS 中似乎只能通过绘制两个单独的矢量对象来实现。在 CS 5 加入对齐到像素网格功能以及 CS 6 中加入描边渐变功能後，可以说 AI 非常适合用於精细的 UI 设计，甚至用 AI 做 UI 设计可能比用 PS 更为方便。
从这段话理解， Quartz 2D 只是一套API, CoreGraphic 建立了一套 图形绘制 的体系。 CoreGraphic 中那些提供图形绘制功能的API，开放出来集合成了 Quartz 2D 。
核心为The Graphics Context,即CGContextRef。
graphics context并不是绘制的输出目标，但是它包含了绘制和输出所需的所有数据，是一个封装。针对不同的输出，有不同的context封装，所以一定程度，可以把context理解为输出目标。或者说对于输出目标，开发者也只能接触到context这个级别了。
总之context包含了绘制所有的参数，这也正是context这类角色的作用，只需要向context里输入绘制要求就可以了，剩余的它来处理。
就这6种输出目标：
PDF跟打印机没什么可说的，bitmap就是生成一个位图，window就是窗口，iOS里就是view,这里的Layer不是跟view一起的CALayer，而是CGLayer。CGLayer作用就是单图形的复用，替代原本用图片做的事，要更高效些。
所以内容就清晰的分为了两大部分： 1. 针对绘制目标的特殊处理,bigmap CGLayer 2. 绘制指令，path color shadow等
路径是什么？理解这个首先要理解 Quartz 2D 的绘制模式：
所以图形根本是线条，这个线条就是路径。
绘制路径的手段有：
CGContextMoveToPoint CGContextAddLineToPoint 搞定所有只有直线的图形
CGContextAddArcToPoint
这个就是指定圆心、半径、开始角度、结束角度，很好理解
CGContextAddArc
这个画圆弧的逻辑是：当前点+这个方法里的两个点，3个点构成一个夹角，然后画一个圆弧和这两条线都相切。这个方法在画圆角矩形的时候很好用，因为圆弧结束后还会把直线部分也一起画出来。
双控制点： CGContextAddCurveToPoint
单控制点： CGContextAddQuadCurveToPoint
然后是方便的添加矩形、椭圆。变化性最大的就是贝塞尔曲线了，可以模拟很多情况。
路线绘制好后还可以设置样式：
graphics context的混合模式，并不是指view和其他view，或layer之间的混合，而是一次绘制过程中，对某个点的多次上色之前的混合。就像绘画时，在鼻子上画了黄色，然后加点白色表现高光。
之后的绘制只会在被切出来的那个区域，其他区域绘制无效。
trasnform是对绘制的坐标进行了转换，前面都是说如何绘制出一个图，有了完整的图形后，可以用trasnform来对它进行整体的转换：移动、旋转、缩放以及这3个的叠加效果。
位图是什么？
一个位图就是一个像素数组，每个像素表示图片里的一个点。显示器上的图像都是一个个像素构成的，每个像素有自己的颜色，如果建一个表，把显示器上的每个像素的颜色都记录到表里，这个表数组就是一个位图bitmap。常用的JPEG PNG都是位图，当然这些图片都是压缩过得，内存和像素颜色不是一一对应的，但现实到屏幕之前一定会做解压。
有位图，就有对应的矢量图，它是由一系列计算机指令来描述和记录一幅图，显示之前再从这些指令从新把图绘制出来。
用一个圆来做例子，位图就是一张图，记录了每个位置的像素，跟其他的图没有不同。而矢量图可能就是一个命令： circle(radius:5,center:(20,20),color:...)
矢量图可能就要依赖于系统对指令的解析，而且绘制也需要消耗性能，但存储和传输更方便，而且一个很大的好处是可以应对不同的分辨率。
回到 Quartz 2D ,bitmap的context的作用就是把绘制的截图输出到一张图片里，常见的应用就是屏幕截图了。
核心方法：
mask在对个地方可以见到:这里的mask,CALayer里的mask,就是圆角的那个，哈希表里也有mask。总的来说就就是使用一种规则屏蔽掉某些数据，图像之间处理的mask，像这里，一般是根据alpha数据来的。alpha0的地方图像显示，alpha==0的地方图像屏蔽。
CAlayer是负责view的内容显示的，而CGLayer和它完全不同，它并不做显示，而是存储。构造一个样式，比如自己绘制一个小星星，然后要重用这个小星星，两个方案：1. 使用bitmap，即把绘制的小星星变成一张图，想怎么用都可以。 2.使用CGLayer保存绘制结果。
可以理解CGLayer为对一个图形的引用、保存，可以在需要的地方绘制出来，可以看成是一种特殊的图片，消耗更小、更高效复用的图片。
除了重复绘制，高性能离屏渲染(High-quality offscreen),缓冲数据(Buffering)时也可以使用。Buffering的场景不是很清楚，但High-quality offscreen可以用于复杂图形的副线程绘制，在副线程把复杂图形绘制出来，然后存储在CGLayer里，在显示的时候直接显示，略去绘制过程的性能影响。
核心方法：
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网