需求是这样的

气泡

1. 点9图简单介绍

Android为了使用同一张图作为大小区域背景，设计了一种可以指定区域拉伸的图片格式“.9.png”，这种图片格式就是点九图。Android 特有的一种格式，在ios开发中，可以在代码中指定某个点进行拉伸。

点9图

如上图，点九图的本质实际上是在图片的四周各增加了1px的像素，并使用纯黑(#FF000000)的线进行标记，其它的与原图没有任何区别

标记位置 含义

左--> 纵向拉伸区域

上--> 横向拉伸区域

右--> 纵向显示区域

下--> 横向显示区域

点9图可以通过ps等p图工具手动画黑线、Draw9patch工具、AndroidStudio、或者

在线工具点击进入

2. 点9图的使用

Android中使用点九图，主要有三种形式，使用res文件夹中的点九图，使用assets文件夹中的点九图以及使用网上拉取的点九图。

注意

Android并不是直接使用点九图，而是在编译时将其转换为另外一种格式，这种格式是将其四周的黑色像素保存至Bitmap类中的一个名为mNinePatchChunk的byte[]中，并抹除掉四周的这一个像素的宽度；接着在使用时，如果Bitmap的这个mNinePatchChunk不为空，且为9patch chunk，则将其构造为NinePatchDrawable，否则将会被构造为BitmapDrawable，最终设置给view，NinePatchDrawable的拉伸主要是通过其draw方法实现的。

总而言之，最后打出的包中的点九图，已经不是原来的带黑线的点九图了。而是通过appt工具，把点9图的黑线信息编码到png的图片字节中。

3. 把点9图应用到气泡中

点9图放到res文件夹， 在编译期已经已经把点9信息合成到png中， 我们使用的时候，系统自动解析信息，所以使用起来基本无感知，但是放到文件和网络中的点9图片不能直接使用。如果直接加载就会出现如下效果

示例图片

黑线仍然存在，且没有固定区域拉伸的效果

4. 解决思路

既然无法直接使用点9图，就要寻求系统是如何使用点9图的，包括他的编译过程，也就是点9信息存储和使用方式。

关于点9图的源码分析，参考腾讯音乐团队的blog,详见文末的参考文献

根据之前的讨论我们知道，画黑线的点九图与普通图片的区别主要在于四周多了1px的黑线，而转换后的点九图则没有这1px的黑线，但是它却包含了用于拉伸的信息。所以我们要从这个信息里面入手。

第一种方案：直接上传点9图片，下载之后再做处理。UI生成端比较方便，但是处理过程比较繁琐， 而且资源图片要和iOS进行区分，后台配置比较繁琐。

第二种方案：设计生成点9图之后，通过appt命令，把点9信息编码到在图片资源中，Android 端获取图片后直接解析点9信息。优点是可以和iOS端共用一个资源图，解析也比较方便，缺点是上传前需要提前进行appt命令合成，而且有合成错误的风险，。

第三种方案：直接和iOS使用同一套资源，Android手动添加patch点，便于适配不使用padding。优点是配置端比较方便，缺点是解析和生成比较繁琐。

第一种方案就不说了，三端都繁琐的事情，就没必要做了。

第二种方案处理流程

a> UI端生成点9图片

b> 通过命令 aapt s -i xx.9.png -o xx.png 生成包含点9信息的图片，上传服务器

c> Android下载之后，解析点9信息

var bmp = Bitmap.createBitmap(bmpTemp)

var chunk = bmp?.ninePatchChunk

d> 判断点9信息正确之后，生成NinePatchDrawable，设置对应view backgroud

if (NinePatch.isNinePatchChunk(chunk)) {

var ninePatchDrawable = NinePatchDrawable(context?.resources, bmp, chunk, NinePatchChunk.getPaddingRect(chunk), null)

view.post {

view.background = ninePatchDrawable

}

} else {

var bitmapDrawable = BitmapDrawable(context?.resources, bmp)

view.post {

view.background = bitmapDrawable

}

}

中间遇到的一个坑，就是这种方式加载的点9图无法使用padding效果，就是点9图的右下内容区域控制，查资料找到实现方案NinePatchDrawable的第三个参数padding内容, 如下类中的getPaddingRect方法。

import android.graphics.Rect;

import com.richard.base.BaseApplication;

import java.nio.ByteBuffer;

import java.nio.ByteOrder;

/**

* **************************************

* 项目名称:Giggle

*

* @Author wuzhiguo

* 创建时间: 2020/8/14 11:25 AM

* 用途:

* **************************************

*/

public class NinePatchChunk {

private static final String TAG = "NinePatchChunk";

public final Rect mPaddings = new Rect();

public int mDivX[];

public int mDivY[];

public int mColor[];

private static float density = BaseApplication.Companion.getInstance().getResources().getDisplayMetrics().density;

private static void readIntArray(final int[] data, final ByteBuffer buffer) {

for (int i = 0, n = data.length; i < n; ++i)

data[i] = buffer.getInt();

}

private static void checkDivCount(final int length) {

if (length == 0 || (length & 0x01) != 0)

throw new IllegalStateException("invalid nine-patch: " + length);

}

public static Rect getPaddingRect(final byte[] data) {

NinePatchChunk deserialize = deserialize(data);

if (deserialize == null) {

return new Rect();

}

return deserialize.mPaddings;

}

public static NinePatchChunk deserialize(final byte[] data) {

final ByteBuffer byteBuffer =

ByteBuffer.wrap(data).order(ByteOrder.nativeOrder());

if (byteBuffer.get() == 0) {

return null; // is not serialized

}

final NinePatchChunk chunk = new NinePatchChunk();

chunk.mDivX = new int[byteBuffer.get()];

chunk.mDivY = new int[byteBuffer.get()];

chunk.mColor = new int[byteBuffer.get()];

try {

checkDivCount(chunk.mDivX.length);

checkDivCount(chunk.mDivY.length);

} catch (Exception e) {

return null;

}

// skip 8 bytes

byteBuffer.getInt();

byteBuffer.getInt();

chunk.mPaddings.left = byteBuffer.getInt();

chunk.mPaddings.right = byteBuffer.getInt();

chunk.mPaddings.top = byteBuffer.getInt();

chunk.mPaddings.bottom = byteBuffer.getInt();

// skip 4 bytes

byteBuffer.getInt();

readIntArray(chunk.mDivX, byteBuffer);

readIntArray(chunk.mDivY, byteBuffer);

readIntArray(chunk.mColor, byteBuffer);

return chunk;

}

}

另一个坑就是fresco图片加载框架通过ImagePipeline、BaseBitmapDataSubscriber获取的bitmap对象中，NinePatchChunk信息是空的，只能通过DataSource方式获取字节流转换成bitmap才可以。

第三种方案，手动添加拉伸信息到bitmap

要实现这种方案，首先要对Bitmap和NinePatch以及png的tunk信息有一定的了解，详情可参阅QQ音乐的blog讲解

实现方案如下

import android.content.res.Resources

import android.graphics.Bitmap

import android.graphics.NinePatch

import android.graphics.drawable.NinePatchDrawable

import java.nio.ByteBuffer

import java.nio.ByteOrder

/**

* **************************************

* 项目名称:Giggle

*

* @Author wuzhiguo

* 创建时间: 2020/8/14 11:25 AM

* 用途: 手动构建NinePatch

* **************************************

*/

class NinePatchBuilder {

var width: Int

var height: Int

var bitmap: Bitmap? = null

var resources: Resources? = null

private val xRegions = mutableListOf()

private val yRegions = mutableListOf()

constructor(resources: Resources?, bitmap: Bitmap) {

width = bitmap.width

height = bitmap.height

this.bitmap = bitmap

this.resources = resources

}

constructor(width: Int, height: Int) {

this.width = width

this.height = height

}

fun addXRegion(x: Int, width: Int): NinePatchBuilder {

xRegions.add(x)

xRegions.add(x + width)

return this

}

fun addXRegionPoints(x1: Int, x2: Int): NinePatchBuilder {

xRegions.add(x1)

xRegions.add(x2)

return this

}

fun addXRegion(xPercent: Float, widthPercent: Float): NinePatchBuilder {

val xtmp = (xPercent * width).toInt()

xRegions.add(xtmp)

xRegions.add(xtmp + (widthPercent * width).toInt())

return this

}

fun addXRegionPoints(x1Percent: Float, x2Percent: Float): NinePatchBuilder {

xRegions.add((x1Percent * width).toInt())

xRegions.add((x2Percent * width).toInt())

return this

}

fun addXCenteredRegion(width: Int): NinePatchBuilder {

val x = ((this.width - width) / 2)

xRegions.add(x)

xRegions.add(x + width)

return this

}

fun addXCenteredRegion(widthPercent: Float): NinePatchBuilder {

val width = (widthPercent * width).toInt()

val x = ((this.width - width) / 2)

xRegions.add(x)

xRegions.add(x + width)

return this

}

fun addYRegion(y: Int, height: Int): NinePatchBuilder {

yRegions.add(y)

yRegions.add(y + height)

return this

}

fun addYRegionPoints(y1: Int, y2: Int): NinePatchBuilder {

yRegions.add(y1)

yRegions.add(y2)

return this

}

fun addYRegion(yPercent: Float, heightPercent: Float): NinePatchBuilder {

val ytmp = (yPercent * height).toInt()

yRegions.add(ytmp)

yRegions.add(ytmp + (heightPercent * height).toInt())

return this

}

fun addYRegionPoints(y1Percent: Float, y2Percent: Float): NinePatchBuilder {

yRegions.add((y1Percent * height).toInt())

yRegions.add((y2Percent * height).toInt())

return this

}

fun addYCenteredRegion(height: Int): NinePatchBuilder {

val y = ((this.height - height) / 2)

yRegions.add(y)

yRegions.add(y + height)

return this

}

fun addYCenteredRegion(heightPercent: Float): NinePatchBuilder {

val height = (heightPercent * height).toInt()

val y = ((this.height - height) / 2)

yRegions.add(y)

yRegions.add(y + height)

return this

}

fun buildChunk(): ByteArray {

if (xRegions.size == 0) {

xRegions.add(0)

xRegions.add(width)

}

if (yRegions.size == 0) {

yRegions.add(0)

yRegions.add(height)

}

/* example code from a anwser above

// The 9 patch segment is not a solid color.

private static final int NO_COLOR = 0x00000001;

ByteBuffer buffer = ByteBuffer.allocate(56).order(ByteOrder.nativeOrder());

//was translated

buffer.put((byte)0x01);

//divx size

buffer.put((byte)0x02);

//divy size

buffer.put((byte)0x02);

//color size

buffer.put(( byte)0x02);

//skip

buffer.putInt(0);

buffer.putInt(0);

//padding

buffer.putInt(0);

buffer.putInt(0);

buffer.putInt(0);

buffer.putInt(0);

//skip 4 bytes

buffer.putInt(0);

buffer.putInt(left);

buffer.putInt(right);

buffer.putInt(top);

buffer.putInt(bottom);

buffer.putInt(NO_COLOR);

buffer.putInt(NO_COLOR);

return buffer;*/

val NO_COLOR = 1 //0x00000001;

val COLOR_SIZE = 9 //could change, may be 2 or 6 or 15 - but has no effect on output

val arraySize: Int = 1 + 2 + 4 + 1 + xRegions.size + yRegions.size + COLOR_SIZE

val byteBuffer: ByteBuffer =

ByteBuffer.allocate(arraySize * 4).order(ByteOrder.nativeOrder())

byteBuffer.put(1.toByte()) //was translated

byteBuffer.put(xRegions.size.toByte()) //divisions x

byteBuffer.put(yRegions.size.toByte()) //divisions y

byteBuffer.put(COLOR_SIZE.toByte()) //color size

//skip

byteBuffer.putInt(0)

byteBuffer.putInt(0)

//padding -- always 0 -- left right top bottom

byteBuffer.putInt(0)

byteBuffer.putInt(0)

byteBuffer.putInt(0)

byteBuffer.putInt(0)

//skip

byteBuffer.putInt(0)

for (rx in xRegions) byteBuffer.putInt(rx) // regions left right left right ...

for (ry in yRegions) byteBuffer.putInt(ry) // regions top bottom top bottom ...

for (i in 0 until COLOR_SIZE) byteBuffer.putInt(NO_COLOR)

return byteBuffer.array()

}

fun buildNinePatch(): NinePatch? {

val chunk = buildChunk()

return if (bitmap != null) NinePatch(bitmap, chunk, null) else null

}

fun build(): NinePatchDrawable? {

val ninePatch = buildNinePatch()

return ninePatch?.let { NinePatchDrawable(resources, it) }

}

}

简单使用方式如下

val builder = NinePatchBuilder(resources, bmpTemp)

builder.addXCenteredRegion(10)

builder.addYCenteredRegion(10)

val drawable = builder.build()

view.background = drawable

这种方式会保存原来的点9图padding信息，如果原图没有的话， 可以手动在view上做padding控制。

5. 注意事项和遇见的坑

一定要使用缓存，不然异步加载的过程中，在list中显示会有问题，跳变很严重，尤其是在快速滑动的时候， 最好能复用图片缓存框架，内存+磁盘两种缓存都要做。

代码操作bitmap一定要及时释放回收，最好能有一定的保障机制，避免bitmap大量占用内存。比如发现图片过大，可以走default处理方式。

给view设置Drawable背景的时候，会把view本身的padding删除，解决方案是提前把view的padding获取到，设置完drawable背景之后，再把padding设置上

public static void setBackgroundAndKeepPadding(View view, Drawable backgroundDrawable) {

Rect drawablePadding = new Rect();

backgroundDrawable.getPadding(drawablePadding);

int top = view.getPaddingTop() + drawablePadding.top;

int left = view.getPaddingLeft() + drawablePadding.left;

int right = view.getPaddingRight() + drawablePadding.right;

int bottom = view.getPaddingBottom() + drawablePadding.bottom;

view.setBackgroundDrawable(backgroundDrawable);

view.setPadding(left, top, right, bottom);

}

屏幕适配问题，网络下发的图可能尺寸对不上，要先适配屏幕，再做点9，再设置背景

/**

* 指定大小缩放， 为了屏幕适配

* @param bmpTemp Bitmap

* @param bubblePicHeight Float

* @return Bitmap

*/

private fun decodeBitmap(bmpTemp: Bitmap, bubblePicHeight: Float): Bitmap {

val width = bmpTemp.width

val height = bmpTemp.height

//计算压缩的比率

val scaleHeight = bubblePicHeight / height

//获取想要缩放的matrix

val matrix = Matrix()

matrix.postScale(scaleHeight, scaleHeight)

//获取新的bitmap

return Bitmap.createBitmap(bmpTemp, 0, 0, width, height, matrix, false)

}

View设置Drawable背景，再去掉背景之后，原来的padding并不会去掉，导致控件无法还原，所以要动态设置padding

更新列表数据闪动问题， 因为设置drawable背景比较耗时，且有可能设置不同padding的drawable，所以会导致列表view闪动， 解决方案是局部更新item，或者更新到具体的view

具体方案二和方案三哪种方案更合适，预研阶段进行了测试，看不出来有什么性能的差异，后续实际开发会持续进行测试验证。