业务需求详细描述:最近产品说要在分享的商品图中添加一些其他图片和文字,然后拼接为一张图片,再分享到微信朋友圈,于是我就一脸懵逼了,但是没办法还是得做额!

然后整理了一下思路,主要有这么两条路线:

  1. 自己手动绘制。

  2. 将布局转换为图片。

很显然第一种方式是不合适的,无论是开发前还是开发后,成本都很大,所以果断选择了第二种方式。

一开始的时候,我没有经过大脑思考,果断的使用了getDrawingCache这个方法来解决这个业务需求,大致流程如下:

(1)创建需要显示成图片的布局,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout >"http://schemas.android.com/apk/res/android"
    android_id="@+id/picmontage_root"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical">

    <RelativeLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_layout_weight="1"
        android_background="@android:color/white">

        <ImageView
            android_id="@+id/img_shop"
            android_layout_width="match_parent"
            android_layout_height="match_parent"
            android_layout_margin="20dp" />

        <RelativeLayout
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_layout_alignParentBottom="true"
            android_layout_centerHorizontal="true"
            android_layout_marginBottom="20dp">

            <ImageView
                android_id="@+id/img_price"
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"/>

            <TextView
                android_id="@+id/txt_price"
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_layout_centerInParent="true" />

        </RelativeLayout>

    </RelativeLayout>

    <LinearLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_background="@android:color/white">

        <ImageView
            android_id="@+id/img_qrcode"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_layout_margin="20dp" />

        <LinearLayout
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_layout_marginBottom="20dp"
            android_layout_marginRight="20dp"
            android_layout_marginTop="20dp"
            android_orientation="vertical">

            <TextView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_text="黄老五 提子味皇式烤芙条 300g 沙琪玛 休闲办公室零食...n"
                android_textColor="@android:color/black" />

            <TextView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_text="长按识别二维码或扫一扫购买n"
                android_textColor="@android:color/darker_gray" />

            <TextView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_text="From 萌店"
                android_textColor="@android:color/darker_gray" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

(2)设置图片和文字信息,这里为了方便,直接把文字放到了布局中,设置图片的代码如下所示:

private void addLinearLayout() {
    view = View.inflate(this, R.layout.activity_picmontage, null);

    LinearLayout picmontageRoot = (LinearLayout) view.findViewById(R.id.picmontage_root);
    ImageView shopImg = (ImageView) view.findViewById(R.id.img_shop);
    ImageView priceImg = (ImageView) view.findViewById(R.id.img_price);
    TextView priceTxt = (TextView) view.findViewById(R.id.txt_price);
    ImageView qrcodeImg = (ImageView) view.findViewById(R.id.img_qrcode);

    shopImg.setImageResource(R.mipmap.shop);
    priceImg.setImageResource(R.mipmap.price);
    priceTxt.setText("$ 20.00");
    priceTxt.setTextSize(20);
    priceTxt.setTextColor(Color.WHITE);
    qrcodeImg.setImageResource(R.mipmap.qrcode);

    addViewContent.addView(view);
}

(3)然后就可以将布局转换成图片了,代码如下所示:

private void drawingCacheShow() {
    Bitmap cacheBitmap = convertViewToBitmap(addViewContent);
    //Bitmap cacheBitmap = getMagicDrawingCache(addViewContent);

    //addViewContent.removeView(view);

    if(cacheBitmap != null) {
        Bitmap newBitmap = Bitmap.createBitmap(cacheBitmap);
        if (newBitmap != null) {
            imgAddViewCache.setImageBitmap(newBitmap);
        } else {
            Log.i("123", "newBitmap=null");
        }
    } else {
        Log.i("123", "cacheBitmap=null");
    }
}
public static Bitmap convertViewToBitmap(View view){
    view.measure(
            View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
            View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    view.buildDrawingCache();
    Bitmap bitmap = view.getDrawingCache();

    if (bitmap != null) {
        Bitmap.Config cfg = bitmap.getConfig();
        Log.d("123", "----------------------- cache.getConfig() = " + cfg);
    }

    return bitmap;
}

(4)然后发现图片不能正确显示,经过debug之后发现原来是图片过大的缘故,一脸懵逼,虽然使用了这样的压缩算法,但总是不尽如人意:

private void addLinearLayout() {
    view = View.inflate(this, R.layout.activity_picmontage, null);

    LinearLayout picmontageRoot = (LinearLayout) view.findViewById(R.id.picmontage_root);
    ImageView shopImg = (ImageView) view.findViewById(R.id.img_shop);
    ImageView priceImg = (ImageView) view.findViewById(R.id.img_price);
    TextView priceTxt = (TextView) view.findViewById(R.id.txt_price);
    ImageView qrcodeImg = (ImageView) view.findViewById(R.id.img_qrcode);

    // 压缩shop
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.shop);
    shopImg.setImageBitmap(resizeBm(bitmap, 600));
    priceImg.setImageResource(R.mipmap.price);
    priceTxt.setText("$ 20.00");
    priceTxt.setTextSize(20);
    priceTxt.setTextColor(Color.WHITE);
    qrcodeImg.setImageResource(R.mipmap.qrcode);

    addViewContent.addView(view);
}
private Bitmap resizeBm(Bitmap bitmap, int scaleWidth) {
    // 原始宽高
    float rawWidth = bitmap.getWidth();
    float rawHeight = bitmap.getHeight();
    // 新宽高
    float newWidth = 0;
    float newHeight = 0;
    // 将宽度缩放到scaleWidth
    if(rawWidth>scaleWidth) {
        newWidth = scaleWidth;
        newHeight = rawHeight*(scaleWidth/rawWidth);
    } else {
        newWidth = rawWidth;
        newHeight = rawHeight;
    }
    // 计算缩放比例
    float widthScale = newWidth/rawWidth;
    float heightScale = newHeight/rawHeight;
    Log.i("123", "widthScale="+widthScale+", heightScale="+heightScale);
    // 显示
    Matrix matrix = new Matrix();
    matrix.postScale(widthScale,heightScale);
    Bitmap resizeBmp = Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true);
    return resizeBmp;
}

之后有了大神的帮助,终于顿悟了,发现了神奇的方法:view.draw(canvas)。然后就很简单了:
这里的第1步和第2步流程与上面的1、2步流程一模一样,我们直接进入第3步,我先给出主界面中的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout >"http://schemas.android.com/apk/res/android"
    android_id="@+id/main_root"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical">

    <ScrollView
        android_layout_width="match_parent"
        android_layout_height="wrap_content">

        <LinearLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_orientation="vertical">

            <Button
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_onClick="showPic"
                android_text="显示绘制的图片" />

            <ImageView
                android_id="@+id/img"
                android_layout_width="wrap_content"
                android_layout_height="wrap_content" />

            <LinearLayout
                android_id="@+id/main_content"
                android_visibility="invisible"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_orientation="vertical"/>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

(3)然后将该布局添加到主界面中,并设置为invisible,但不能设置为gone,否则不能成功渲染,同样不能生成图片了:

mainContent.addView(v);

(4)最后我们就可以在点击事件里面将布局生成图片了,代码如下:

public void showPic(View view) {
    int width = picmontageRoot.getMeasuredWidth();
    int height = picmontageRoot.getMeasuredHeight();
    Bitmap b = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
    Canvas canvas = new Canvas(b);
    picmontageRoot.draw(canvas);
    img.setImageBitmap(b);
}

本文固定链接: http://www.js-code.com/android/android_56455.html