仿微信群聊头像（图像合成、缩放）

来源：互联网发布：老公拔出来知乎编辑：程序博客网时间：2024/06/05 00:07

最近群里面有人问，微信群聊的头像是怎么实现的，就花了半个小时写了一个demo，今天又优化了一下，写个博客分享一下。

先上效果图
这里写图片描述

原理
原理比较简单，就是用画布（canvas）把九张图片合成一张图，然后再按比例缩放一下。
主要就是两个方法，一个是图片合成方法mergePictures(int[] pictures, int row, int column)，一个是图片缩放方法resizeImage(Bitmap bitmap, int width, int height)。
优化后可以控制行和列包含几张图片，缩放后图片的宽高。

源码

public class PictureMergeDemo extends AppCompatActivity {    private final static String TAG = "PictureMergeDemo";    private final static int NUM = 3;//每行和列包含几张图片    private Context mContext;    private ImageView mMergePic;    //带合成的图像源    private int[] mPics = {R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher,                                R.mipmap.ic_launcher};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_picture_merge_demo);        mContext = this;        mMergePic = (ImageView) findViewById(R.id.iv_merge_pic);    }    @Override    protected void onResume() {        super.onResume();        Bitmap mergePicture = mergePictures(mPics,NUM);        int width = BitmapFactory.decodeResource(mContext.getResources(), mPics[0]).getWidth();        int height = BitmapFactory.decodeResource(mContext.getResources(), mPics[0]).getHeight();        mMergePic.setImageBitmap(resizeImage(mergePicture, width, height));    }    /*    * @pictures the origin images which want to be merged    * @num      the row&column num for merge image    * */    public Bitmap mergePictures(int[] pictures, int num) {        if(pictures == null) {            return null;        }        int width = BitmapFactory.decodeResource(mContext.getResources(), pictures[0]).getWidth();        int height = BitmapFactory.decodeResource(mContext.getResources(), pictures[0]).getHeight();        Bitmap mergeBitmap = Bitmap.createBitmap(width * num, height * num ,Bitmap.Config.ARGB_8888);        Canvas canvas = new Canvas(mergeBitmap);        for(int i = 0 ; i < num; i++) {            for(int j = 0 ; j < num; j++) {                canvas.drawBitmap(BitmapFactory.decodeResource(mContext.getResources(), pictures[i+j]), width * i, height * j, null );            }        }        canvas.save(Canvas.ALL_SAVE_FLAG);        canvas.restore();        return  mergeBitmap;    }    /*    * @bitmap the image you want ro resize    * @width  the new image's width    * @height the new image's height    * */    public static Bitmap resizeImage(Bitmap bitmap, int width, int height) {        if(bitmap == null || width <= 0 || height <= 0) {            return null;        }        int originWidth = bitmap.getWidth();        int originHeight = bitmap.getHeight();        float scaleWidth = ((float) width) / originWidth;        float scaleHeight = ((float) height) / originHeight;        Matrix matrix = new Matrix();        matrix.postScale(scaleWidth, scaleHeight);        // if you want to rotate the Bitmap        // matrix.postRotate(45);        Bitmap resizedBitmap = Bitmap.createBitmap(bitmap, 0, 0, originWidth,                originHeight, matrix, true);        return resizedBitmap;    }}

布局

<LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical"            android:gravity="center"            >                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="origin picture"/>                <ImageView                    android:id="@+id/iv_pic"                    android:background="@mipmap/ic_launcher"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content" />                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="merge picture"/>                <ImageView                    android:id="@+id/iv_merge_pic"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content" />        </LinearLayout>

1 0