記錄貼

現在製作圓形頭像的第三方工具已經很多了，本帖只為記錄自定義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>
 

<?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>