Android自定义View之圆形头像

记录贴

现在制作圆形头像的第三方工具已经很多了，本帖只为记录自定义view学习过程。

1.主体代码部分

public class CirclePhotoView extends View {
    private int max;//最大进度
    private int roundColor;//圈颜色
    private int roundProgressColor;//进度颜色
    private int textColor;//文字颜色
    private int backgroundColor;//背景颜色
    private float textSize;//文字大小
    private float roundWidth;//圈宽度
    private boolean textShow;//是否显示文字
    private int progress;//当前进度
    private Paint mPaintCircle;      //画圆形图像的笔
    private Paint mPaintBorder;          //画圆形边界的笔
    private BitmapShader mBitmapShader;      //图像着色器，可以用来画圆
    private Matrix mMatrix;          //图片变换处理器-用来缩放图片以适应view控件的大小
    private int mWidth;        //获得控件宽度
    private int mHeight;             //获得控件高度
    private float mRadius;             //中心园的半径
    public static final int STROKE = 0;
    public static final int FILL = 1;
    private Bitmap bitmap;
    private float mBitmapHeight;
    private float mBitmapWidth;
    private  Bitmap afterBitmap ;


    public CirclePhotoView(Context context) {
        super(context);
    }

    public CirclePhotoView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);
        max = typedArray.getInteger(R.styleable.CustomProgressBar_max, 100);
        roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.RED);
        roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor, Color.BLUE);
        textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor, Color.GREEN);
        textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize, 55);
        roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth, 10);
        textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow, true);
        backgroundColor = typedArray.getColor(R.styleable.CustomProgressBar_backgroundColor, Color.GRAY);
        typedArray.recycle();
        initPaint();
    }

    private void initPaint() {
        //初始化图片变换处理器
        mMatrix = new Matrix();
        //圆形头像画笔设置
        mPaintCircle = new Paint();
        mPaintCircle.setColor(roundColor);
        mPaintCircle.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaintCircle.setStrokeWidth(roundWidth);
        mPaintCircle.setAntiAlias(true);

        //边框设置
        mPaintBorder = new Paint();
        mPaintBorder.setAntiAlias(true);
        mPaintBorder.setStyle(Paint.Style.STROKE);
        mPaintBorder.setStrokeWidth(roundWidth);
        mPaintBorder.setColor(roundColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(backgroundColor);//设置圆形图片背景色，和整体背景保持一致为好。
        mWidth = getWidth() / 2;
        mHeight = getHeight() / 2;
        mRadius = Math.min(mWidth, mHeight) - roundWidth;
        Drawable drawable = getBackground();
        if (drawable == null) {
            super.onDraw(canvas);
        } else {
            bitmap = ((BitmapDrawable) drawable).getBitmap();
            if(bitmap==null){
                return;
            }
            mBitmapHeight = bitmap.getHeight();
            mBitmapWidth = bitmap.getWidth();
            mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            float scale = Math.max(bitmap.getWidth(),bitmap.getHeight()) / Math.min(bitmap.getWidth(),bitmap.getHeight());
            mMatrix.setScale(scale,scale);
            mBitmapShader.setLocalMatrix(mMatrix);
            mPaintCircle.setShader(mBitmapShader);
            canvas.drawCircle(mWidth, mHeight, mRadius, mPaintCircle);
            canvas.drawCircle(mWidth, mHeight, mRadius + roundWidth / 2, mPaintBorder);

            /* 也可以绘制圆形
            ShapeDrawable shapeDrawble = new ShapeDrawable(new OvalShape());
            shapeDrawble.getPaint().setShader(mBitmapShader);
            shapeDrawble.setBounds(0,0,getWidth(),getHeight());
            shapeDrawble.draw(canvas);
            */
        }
    }
}

2.自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CustomProgressBar">
        <attr name="roundProgressColor" format="color"></attr>
        <attr name="roundColor" format="color"></attr>
        <attr name="roundWidth" format="dimension"></attr>
        <attr name="textSize" format="dimension"></attr>
        <attr name="textColor" format="color"></attr>
        <attr name="max" format="integer"></attr>
        <attr name="textShow" format="boolean"></attr>
        <attr name="backgroundColor" format="color"></attr>
    </declare-styleable>

</resources>

3.布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:lpq="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    android:orientation="vertical">
    <ImageView
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/s"/>
    <com.example.lpq.myapplication.customview.CirclePhotoView
        android:layout_marginTop="20dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@mipmap/s"
        lpq:textColor="@color/colorPrimary"
        lpq:roundColor = "@color/white"
        lpq:roundWidth ="1dp"
        lpq:backgroundColor="@color/gray_1"
        lpq:roundProgressColor ="@color/colorPrimaryDark"
        />

</LinearLayout>