自定義view原環進度圈

第一view類
package views;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by wangyajie on 2017/10/21.
*/

public class CompletedView extends View {
// 畫實心圓的畫筆
private Paint mCirclePaint;
// 畫圓環的畫筆
private Paint mRingPaint;
// 畫圓環的畫筆背景色
private Paint mRingPaintBg;
// 畫字體的畫筆
private Paint mTextPaint;
// 圓形顏色
private int mCircleColor;
// 圓環顏色
private int mRingColor;
// 圓環背景顏色
private int mRingBgColor;
// 半徑
private float mRadius;
// 圓環半徑
private float mRingRadius;
// 圓環寬度
private float mStrokeWidth;
// 圓心x座標
private int mXCenter;
// 圓心y座標
private int mYCenter;
// 字的長度
private float mTxtWidth;
// 字的高度
private float mTxtHeight;
// 總進度
private int mTotalProgress = 100;
// 當前進度
private int mProgress;

public CompletedView(Context context, AttributeSet attrs) {
super(context, attrs);
// 獲取自定義的屬性
initAttrs(context, attrs);
initVariable();
}

//屬性
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView, 0, 0);
mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
mRingBgColor = typeArray.getColor(R.styleable.TasksCompletedView_ringBgColor, 0xFFFFFFFF);

mRingRadius = mRadius + mStrokeWidth / 2;
}

//初始化畫筆
private void initVariable() {
//內圓
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mCircleColor);
mCirclePaint.setStyle(Paint.Style.FILL);

//外圓弧背景
mRingPaintBg = new Paint();
mRingPaintBg.setAntiAlias(true);
mRingPaintBg.setColor(mRingBgColor);
mRingPaintBg.setStyle(Paint.Style.STROKE);
mRingPaintBg.setStrokeWidth(mStrokeWidth);


//外圓弧
mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
mRingPaint.setStrokeWidth(mStrokeWidth);
//mRingPaint.setStrokeCap(Paint.Cap.ROUND);//設置線冒樣式,有圓 有方

//中間字
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setColor(mRingColor);
mTextPaint.setTextSize(mRadius / 2);

Paint.FontMetrics fm = mTextPaint.getFontMetrics();
mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
}

//畫圖
@Override
protected void onDraw(Canvas canvas) {
mXCenter = getWidth() / 2;
mYCenter = getHeight() / 2;

//內圓
canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);

//外圓弧背景
RectF oval1 = new RectF();
oval1.left = (mXCenter - mRingRadius);
oval1.top = (mYCenter - mRingRadius);
oval1.right = mRingRadius * 2 + (mXCenter - mRingRadius);
oval1.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
canvas.drawArc(oval1, 0, 360, false, mRingPaintBg); //圓弧所在的橢圓對象、圓弧的起始角度、圓弧的角度、是否顯示半徑連線

//外圓弧
if (mProgress > 0 ) {
RectF oval = new RectF();
oval.left = (mXCenter - mRingRadius);
oval.top = (mYCenter - mRingRadius);
oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); //

//字體
String txt = mProgress + "分";
mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint);
}
}

//設置進度
public void setProgress(int progress) {
mProgress = progress;
postInvalidate();//重繪
}
}

第二佈局
引用時在佈局的上邊加上
xmlns:tc="http://schemas.android.com/apk/res/com.***.test.***"
com.***.test.*** 是你自己的包名
<views.CompletedView
android:id="@+id/tasks_view"
android:layout_width="223dp"
android:layout_height="223dp"
tc:circleColor="@color/white"
tc:radius="50dip"
tc:ringBgColor="@color/white2"
tc:ringColor="@color/colorRed"
tc:strokeWidth="10dip" />
第三attrs文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--圓弧進度條-->
<declare-styleable name="TasksCompletedView">
<attr name="radius" format="dimension"/>
<attr name="strokeWidth" format="dimension"/>
<attr name="circleColor" format="color"/>
<attr name="ringColor" format="color"/>
<attr name="ringBgColor" format="color"/>
</declare-styleable>
</resources>
第四顏色
粘到colors文件裏
<color name="white">#FFFFFF</color>
<color name="white2">#f5f3f3</color>
<color name="colorRed">#d50f09</color>
發佈了38 篇原創文章 · 獲贊 6 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章