.9图怎么切？iOS如何处理这种图片

什么是点9图？

.9图也就是.9.png；其实就是png图片
这是安卓开发里面的一种特殊的图片

早期的设计风格都比较写实，
在处理一些按钮或可拉伸图标以及气泡对话框和主题设计的时候png图片在拉伸后边角就会出现失真模糊的情况；
安卓开发中便出现了.9图这种处理方式；

我们可以知道.9.png其实就是png图片处理的啦；
和png不同的区别在于.9可以拉伸

那么做完png如何去切呢？

有两种方式

1、将png图片标注好给到开发让开发用Android Studio自带的制作工具去切

如何标注呢？

举个例子

拿上图聊天气泡的切图来举例

png设计尺寸要留出足够的拉伸区域；
横向和纵向拉伸区域要留出至少1px(但是尽量要大一些好设置区域)
特别注意纵向拉伸那个不要放置在右边突出箭头上了不然箭头也会拉伸；
横向和纵向显示区域是根据设计中字体上下左右留白得出来的；
按照右图切图方式里标注出拉伸和显示的位置及尺寸就好～

2、我们设计师自己切图完了再给到开发

如何切呢？

Google的一位设计师Roman Nurik
开发了一个切.9图的小工具...

这个链接是工具的链接

上图中

左面版是选择png图片资源；选择资源大小(和导出资源一致)；命名；

中间面板是设置拉伸区域；内容显示区域；切图留白区域；

右边面板是预览效果面板和下载按钮；

完成后下载就ok～

iOS中如何处理这种要求的图片？

iOS在处理这种类型的图片要比安卓方便的多；
iOS自身一句代码就可以实现可拉伸处理

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

这个是 UIImage 的类方法，作用是能创建一个内容区域可拉伸，而边角区域不拉伸的图片

这里面有两个参数需要给到开发：
第一个 leftCapWidth 是指左侧不拉伸的宽度；
第二个 topCapHeight 是指顶部不拉伸的高度；

*它的拉伸原理就是第n+1个像素拉伸

如图，

如果我们设置为左侧不拉伸宽度为8px，那么它就是第9个像素复制向右拉伸；

如果我们设置为顶部不拉伸高度为10px，那么它就是第11个像素复制向下拉伸；

所以，

我们只需要告知开发左侧和顶部的不拉伸距离就ok～

转载于:https://juejin.im/post/5cac805df265da035d0c5bdd