android开发步步为营之58:给图片绘制圆形气泡背景效果

最近在开发项目的时候，有一个需求，需要给应用图标绘制圆形气泡背景，有了彩色气泡这样显得漂亮一点，气泡的颜色是应用图标的颜色均值，先看看效果，然后，我再给出demo。

demo应用图标是这样的：

添加气泡背景后是这样的：

仔细看圆形背景颜色是图标颜色的均值。

好的，下面我们来完成这个demo。

第一步、编写页面activity_drawcycle.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imgCycle"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

第二步、编写Activity,DrawCycleActivity.java

/**
 *
 */
package com.figo.study;

import com.figo.study.utils.UIUtils;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuffXfermode;
import android.graphics.Bitmap.Config;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.ImageView;

/**
 * @author figo
 *
 */
public class DrawCycleActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_drawcycle);
                //需要给该图片绘制圆形气泡背景
		Drawable img = getResources().getDrawable(R.drawable.ic_launcher);
		//绘制圆形气泡
		Bitmap bp = createCircleImage(drawableToBitmap(img),40);
                //绘制好的图片赋值给ImageView控件
		ImageView imgView = (ImageView) findViewById(R.id.imgCycle);
		imgView.setImageDrawable(new BitmapDrawable(bp));
	}

	private Bitmap drawableToBitmap(Drawable drawable)
	{
		Bitmap bitmap=null;
		try {
			bitmap = Bitmap
					.createBitmap(
							drawable.getIntrinsicWidth(),
							drawable.getIntrinsicHeight(),
							drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
									: Bitmap.Config.RGB_565);
			Canvas canvas = new Canvas(bitmap);
			drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
			drawable.draw(canvas);
		} catch (Exception e) {
			// TODO: handle exception
		}
		return bitmap;

	}

	private Bitmap createCircleImage(Bitmap source, int sizeDp) {
		final Paint paint = new Paint();
		final int nw = source.getWidth();
        final int nh = source.getHeight();
        //计算源图片颜色平均值，然后将该平均值颜色作为气泡颜色
        int[] pixels = new int[nw * nh];
        source.getPixels(pixels, 0, nw, 0, 0, nw, nh);
        long rtotal=0;
        long gtotal=0;
        long btotal=0;
        for (int i = 0; i < pixels.length; i++) {
            int p = pixels[i];
            int r = (p & 0x00FF0000) >> 16;
            int g = (p & 0x0000FF00) >> 8;
            int b = (p & 0x000000FF) >> 0;
            rtotal+=r;
            gtotal+=g;
            btotal+=b;
        }
        int rAverage=(int) (rtotal / (nw * nh));
        int gAverage=(int) (gtotal / (nw * nh));
        int bAverage=(int) (btotal / (nw * nh));
        //设置画笔颜色
		paint.setColor(Color.argb(255, rAverage, gAverage, bAverage));
		paint.setAntiAlias(true);
		int sizePix=UIUtils.dip2px(DrawCycleActivity.this,sizeDp);
		Bitmap target = Bitmap.createBitmap(sizePix, sizePix, Config.ARGB_8888);
		//绘制正方形画布
		Canvas canvas = new Canvas(target);
        //在正方形里面绘制圆形
		canvas.drawCircle(sizePix/2, sizePix/2, sizePix / 2, paint);
		//图片相交模式，canvas原有的图片 可以理解为背景 就是dst，新画上去的图片 可以理解为前景 就是src
		//SRC_OVER就是新画上去的图片在canvas之上
		paint.setXfermode(new PorterDuffXfermode(
				android.graphics.PorterDuff.Mode.SRC_OVER));
        //计算目标图形的左上角和右下角的坐标
		RectF dst=new RectF();
        //圆形内置正方形（即将绘制的图片区域）的边长
		float destRectWidth= (float)Math.sqrt((sizeDp*sizeDp/2));
		float left= (sizeDp-destRectWidth)/2+1;//空1dp
		float top=left;
		float right=sizeDp-left;
		float bottom=right;
//		dst.set(UIUtils.dip2px(DrawCycleActivity.this, 5.86f), UIUtils.dip2px(DrawCycleActivity.this,5.86f), UIUtils.dip2px(DrawCycleActivity.this,34.14f), UIUtils.dip2px(DrawCycleActivity.this,34.14f));
		dst.set(UIUtils.dip2px(DrawCycleActivity.this,left), UIUtils.dip2px(DrawCycleActivity.this,top), UIUtils.dip2px(DrawCycleActivity.this,right),UIUtils.dip2px(DrawCycleActivity.this,bottom));
		canvas.drawBitmap(source, null, dst, paint);
		return target;
	}
}