Android 关于点9图在气泡评论里使用的调研

作者: 一夜游神 | 来源:发表于2020-08-28 08:37 被阅读0次

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<Int>()
    private val yRegions = mutableListOf<Int>()

    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

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

参考文章
QQ音乐- Android点九图总结以及在聊天气泡中的使用
 stackoverflow 社区

Android 关于点9图在气泡评论里使用的调研

1. 点9图简单介绍

2. 点9图的使用

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

4. 解决思路

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

第二种方案处理流程

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

5. 注意事项和遇见的坑

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

常用收藏