图形用户界面中的图形有两种实现方式,一种是用代码画出来,比如Quartz 2D技术,狠一点有OpenGL ES,另一种则是使用图片。 
代码画的方式比较耗费程序员脑力,CPU或GPU; 图片则耗费磁盘空间,会增加app的体积.一般的app我们会偏重于使用图片来构建用户界面. 
设计师一般会使用PS来设计界面,所以在直接使用之前,有一个PSD到png的切图(Image Slicing)过程.下面是切图过程中可能要注意的几点.

一.可重复元素

在用户界面的图形元素中,重复随处可见 ,所以我们利用好框架提供的接口, 以比较高的性价比创建用户界面。

1.Color Pattern

Color Pattern在Web设计中也经常会遇到比如网页的背景,甚至网络中可以找到专门收集各类可重复的纹理图案的站点,比如 http://subtlepatterns.com. 下面这是一个小图片模板

UIColor *circleColorPattern = [UIColor colorWithPatternImage:
[UIImage imageNamed:@"circle_pattern.png"]];

这样便可以得到一个颜色模板,用这个颜色画或者填充某个区域的时候,模板图片会在指定的区域中进行平铺.比如把一个View的背景颜色设置成上面这个颜色,便会得到如下结果

2.resizableImage

除了整体平铺之外,很多时候我们希望某个图片的局部进行平铺,而其余部分则保持不变. 比如常见的按钮,聊天的气泡背景或者图片的阴影边框. 这里举个按钮的例子,一般情况下为了方便做按钮就直接切个按钮背景,如下图但是自己看,你会发现按钮中间大都数像素都是横向重复的,所以可以使用iOS的图片接口来使用体积更小的图片实现相同的效果. 首先使用PS的切图工具进行切图,下图中的切图逻辑是,左边切14像素(13像素加1像素,1像素为中间重复部分),右边切13像素.

Retina屏幕下一个单位对应着两个像素,这里的例子是非Retina下的情况,请注意

切图后将左右合并,变成最终所需要的图片

图片宽度为27像素宽,中间第14个像素为中间重复的部分.

UIImage *buttonBackgroundImage = [[UIImage imageNamed:@"button_bkg.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0,13,0,13)];
[button setBackgroundImage:buttonBackgroundImage
forState:UIControlStateNormal];

resizableImageWithCapInsets:的参数是一个UIEdgeInsets的结构体类型,被capInsets覆盖到的区域将会保持不变,而未覆盖到的部分将会被用来平铺.

在iOS 5.0之前并没有这个方法,而是使用的另一个方法

 - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth
topCapHeight:(NSInteger)topCapHeight;

这个方法有局限性,它只能指定leftCapWidth和topCapHeight,然后只有一个像素能够重复,也就是rightCapWidth为 imageWidth-leftCapWidth-1,而bottomCapHeight为 imageHeight - topCapHeight -1,所以重复的始终是中间的那一个像素.

二.图片边缘锯齿和抗锯齿问题

1.需要抗锯齿

有时候需要在旋转的动画中使用到图片,比如按钮的旋转,图片的旋转,为了避免在旋转的过程中出现边缘锯齿,我们需要在切图的时候,在边缘上多留至少一像素的透明像素,因为iOS在处理图片的时候对于外边缘是不做抗锯齿处理的,但是对于图片内部的边缘则会做抗锯齿处理.

2.需要去除抗锯齿效果

当某个imageView的frame的origin.x或者origin.y 不为整数的时候,会出现你不想要的抗锯齿效果,这个时候本来清晰的图片边缘会变得模糊,而这不是你想要的,所以这个时候我们就要对frame的起点进行取整。

IOS中类似的。9.png图片的更多相关文章

  1. iOS关于UILabel 基本属性 背景图片 背景色

    [代码] iOS关于UILabel 基本属性 背景图片 背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  2. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  3. ios 从网络上获取图片并在UIImageView中显示

    ios 从网络上获取图片   -(UIImage *) getImageFromURL:(NSString *)fileURL { NSLog(@"执行图片下载函数"); UIIm ...

  4. IOS中类的扩展(协议,分类)

    IOS中类的扩展(协议,分类) 扩展类,我们可以使用协议和分类这两种方法,下面我们来分别实现这两种方法: 参考网址:http://www.cnblogs.com/wendingding/p/37095 ...

  5. iOS 两种不同的图片无限轮播

    代码地址如下:http://www.demodashi.com/demo/11608.html 前记 其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵, ...

  6. ios 上传视频或图片

    关于iOS如何实现视频和图片的上传, 我们先理清下思路 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传 ...

  7. 使用脚本删除ios工程中未使用图片

    使用脚本删除ios工程中未使用图片 最近在读唐巧大神的<iOS开发进阶>,学到了一个大招:使用脚本删除ios中未使用的图片(纸书上有点小问题,参考github上的issue:使用脚本删除i ...

  8. ios中摄像头/相册获取图片压缩图片上传服务器方法总结

    本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下.     这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...

  9. iOS MJRefresh设置MJRefreshStateNoMoreData状态图片

    MJRefresh地址 //  代码地址: https://github.com/CoderMJLee/MJRefresh//  代码地址: http://code4app.com/ios/%E5%B ...

随机推荐

  1. CSS3之Flexbox布局

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...

  2. (五)Linux引导流程解析

    目录 Linux引导流程 Linux运行级别 Linux启动服务管理 GRUB配置与应用 启动故障分析与解决 Linux引导流程 Linux系统引导流程如下图: 固件(Firmware)就是写入ERO ...

  3. eclipse修改工程名

    直接修改工程可能会产生一些莫名其妙的问题,需遵循以下三步: 1. 右键工程:Refactor->Rename,或选中工程按F2,修改名称 2. 右键工程:Properties->Web P ...

  4. 学习C++11的一些思考和心得(1):lambda,function,bind和委托

     1.lambda表达式 lanbda表达式简单地来讲就是一个匿名函数,就是没有名称的函数,如果以前有接触过python或者erlang的人都比较熟悉这个,这个可以很方便地和STL里面的算法配合 st ...

  5. C#中判断子窗体是否存在

    可在父窗体中定义一个全局变量 public static Form form; 然后在秀出子窗体的点击事件中增加加下代码 if (form == null) { //窗体不存在时,实例化子窗体,并显示 ...

  6. MFC的类层次结构图

  7. 工作中Linux常用命令

    rpm -qa|grep -i mysql rpm -ev mysql-server-5.1.73-5.el6_6.x86_64 如果报: error: Failed dependencies: li ...

  8. Topology的构建

    public class BlackListBolt extends BaseRichBolt{ private static Logger logger = Logger.getLogger(Bla ...

  9. UVa 297 Quadtrees(树的递归)

    Quadtrees 四分树就是一颗一个结点只有4个儿子或者没有儿子的树 [题目链接]UVa 297 Quadtrees [题目类型]树的递归 &题意: 一个图片,像素是32*32,给你两个先序 ...

  10. 对Vector3.Lerp 插值的理解

    有时,我们在做游戏时会发现有些跟随动作不够圆滑或者需要一个缓冲的效果,这时,一般会考虑到插值.所以对插值的理解是必需的.(比如摄像机跟随主角) 插值是数学上的一个概念,在这里用公式表示就是:from  ...