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>