仿QQ圆头像裁剪开源项目——ClipCircleHeadLikeQQ

1.项目背景：

很多项目中用到的头像都是圆头像，圆头像使界面看起来更具有美感，比如QQ在整个应用中使用的就是圆头像。基本上每个应用都有上传头像的功能，在上传头像的时候需要对图片裁剪。虽然截取出来的图片实际上都是方图，但是在裁剪的时候如果能直观的让用户看到裁剪以后的圆头像的效果，体验就更好了。一像注重用户体验的QQ就是这么实现的，如图

我们项目中用到的也是圆头像。截取头像功能的需求就是做成跟QQ类似的交互，一般我们在设计软件的时候都习惯向业界知名产品“学习”（你懂得）。

我试着上网查了一下开源的头像截取的项目，发现这些项目的截图界面全部都是方图，好吧，轮子还没人造，只能自己动手了。

2.效果图：

csdn图片限制竟然才2M，只好将效果图分成两份了，前后连起来看。

         

想着其他人做项目的时候可能用的着，就把截图的功能整理了一下，做成了一个小demo,没必要重复造轮子了，分享是互联网的精神精髓。

3.项目托管地址：

https://github.com/ShuangtaoJia/ClipCircleHeadLikeQQ

如果还不会使用github,你就真out了

4.使用方法：

• 打开截图界面

    /**
     * 打开截图界面
     * @param uri 原图的Uri
     */
    public void starCropPhoto(Uri uri) {

        if (uri == null) {
            return;
        }
        Intent intent = new Intent();
        intent.setClass(this, ClipHeaderActivity.class);
        intent.setData(uri);
        intent.putExtra("side_length", 200);//裁剪图片宽高
        startActivityForResult(intent, CROP_PHOTO);
    }

• 获取返回结果

在onActivityResult 方法中

Uri uri = intent.getData();

• 上传头像

可以通过uri得到截图文件的本地路径，可以方便的上传到服务器

• 头像展示

iv_head_icon.setImageURI(uri);  

ImageView 提供有直接设置图片URI的方法，可以方便的在ImageView中展示

5.实现原理：

下面简单介绍一下具体实现原理：

• 项目结构：

• 编译方式：

本项目采用的是gradle编译 导入的时候选gradle wrapper 一般没什么问题

• 截图界面 ClipHeaderActivity

package com.example.clipheaderlikeqq.app.clip;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.graphics.Rect;
import android.net.Uri;
import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;