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

Apr 10, 2019   Owlling
什么是点9图?

.9图也就是 .9.png 格式的图片;其实就是png图片,这是Android开发里面的一种特殊的图片。

早期的设计风格都比较写实,像处理一些按钮需要拉伸的图标以及气泡对话框等等时候 png图片在拉伸后边角就会出现失真模糊的情况;在Android开发中便出现了.9图这种处理方式;

我们可以知道.9.png其实就是png图片,和png不同的区别在于.9有可拉伸区域保证图片不失真。

.9图怎么制作?

上边说到了.9其实就是png进行切图,导出后缀名为 .9.png 格式的图片。

那制作完png如何去切呢?

有两种方法

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

Image

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

png设计尺寸要留出足够的拉伸区域;

横向和纵向拉伸区域要留出至少1px(但是尽量要大一些好设置区域)

特别注意纵向拉伸那个不要放置在右边突出箭头上了不然箭头也会拉伸;

横向和纵向显示区域是根据设计中字体上下左右留白得出来的;

按照右图切图方式里标注出拉伸和显示的位置及尺寸就好~

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

如何切呢?

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

Image

上图中

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

Image

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

Image

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

Image

完成后下载就ok~

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

iOS在处理这种类型的图片要比安卓方便的多; iOS自身一个实例方法就可以实现可拉伸处理

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

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

这里面有两个参数需要给到开发:

第一个 leftCapWidth 是指左侧不拉伸的宽度;

第二个 topCapHeight 是指顶部不拉伸的高度;

Image

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

如图,

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

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

所以,

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

END / THX