Android自定義View圓形百分比控件（一）
更新時間：2017年03月13日 11:14:01 作者：猴菇先生
這篇文章主要為大家詳細(xì)介紹了Android自定義View圓形百分比控件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
做一個自定義View的小練習(xí)，效果如下
只需要畫一個圓、一個圓弧、一個百分比文本，添加一個點擊事件，傳入百分比重繪
1、在res/values文件夾下新建attrs.xml文件，編寫自定義屬性：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CirclePercentView" >
<attr name="circleBg" format="color"/>
<attr name="arcColor" format="color"/>
<attr name="arcWidth" format="dimension"/>
<attr name="percentTextColor" format="color"/>
<attr name="percentTextSize" format="dimension"/>
<attr name="radius" format="dimension"/>
</declare-styleable>
</resources>
2、新建CirclePercentView繼承View，重寫構(gòu)造方法：
public CirclePercentView(Context context) {
this(context, null);
}
public CirclePercentView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CirclePercentView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
3、在第三個構(gòu)造方法中獲取自定義屬性的值：
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CirclePercentView, defStyleAttr, 0);
mCircleColor = ta.getColor(R.styleable.CirclePercentView_circleBg, 0xff8e29fa);
mArcColor = ta.getColor(R.styleable.CirclePercentView_arcColor, 0xffffee00);
mArcWidth = ta.getDimensionPixelSize(R.styleable.CirclePercentView_arcWidth, DensityUtils.dp2px(context, 16));
mPercentTextColor = ta.getColor(R.styleable.CirclePercentView_arcColor, 0xffffee00);
mPercentTextSize = ta.getDimensionPixelSize(R.styleable.CirclePercentView_percentTextSize, DensityUtils.sp2px(context, 16));
mRadius = ta.getDimensionPixelSize(R.styleable.CirclePercentView_radius, DensityUtils.dp2px(context, 100));
ta.recycle();
4、創(chuàng)建畫圖所使用的對象，如Paint、Rect、RectF：
mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCirclePaint.setStyle(Paint.Style.FILL);
mCirclePaint.setColor(mCircleColor);
mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(mArcWidth);
mArcPaint.setColor(mArcColor);
mArcPaint.setStrokeCap(Paint.Cap.ROUND);//使圓弧兩頭圓滑
mPercentTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPercentTextPaint.setStyle(Paint.Style.STROKE);
mPercentTextPaint.setColor(mPercentTextColor);
mPercentTextPaint.setTextSize(mPercentTextSize);
mArcRectF = new RectF();//圓弧的外接矩形
mTextBound = new Rect();//文本的范圍矩形
5、重寫onMeasure()方法，計算自定義View的寬高：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureDimension(widthMeasureSpec), measureDimension(heightMeasureSpec));
}
private int measureDimension(int measureSpec) {
int result;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {//精確地，代表寬高為定值或者match_parent時
result = specSize;
} else {
result = 2 * mRadius;
if (specMode == MeasureSpec.AT_MOST) {//最大地，代表寬高為wrap_content時
result = Math.min(result, specSize);
}
}
return result;
}
6、重寫onDraw()方法，繪制圓、圓弧和百分比文本，注意坐標(biāo)的計算：
@Override
protected void onDraw(Canvas canvas) {
//畫圓
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, mCirclePaint);
//畫圓弧
mArcRectF.set(getWidth() / 2 - mRadius + mArcWidth / 2, getHeight() / 2 - mRadius + mArcWidth / 2
, getWidth() / 2 + mRadius - mArcWidth / 2, getHeight() / 2 + mRadius - mArcWidth / 2);
canvas.drawArc(mArcRectF, 270, 360 * mCurPercent / 100, false, mArcPaint);
String text = mCurPercent + "%";
//計算文本寬高
mPercentTextPaint.getTextBounds(text, 0, String.valueOf(text).length(), mTextBound);
//畫百分比文本
canvas.drawText(text, getWidth() / 2 - mTextBound.width() / 2
, getHeight() / 2 + mTextBound.height() / 2, mPercentTextPaint);
}
7、給這個view設(shè)置點擊事件，暴露一個動態(tài)設(shè)置百分比的方法：
public void setCurPercent(float curPercent) {
ValueAnimator anim = ValueAnimator.ofFloat(mCurPercent, curPercent);
//動畫時長由百分比大小決定
anim.setDuration((long) (Math.abs(mCurPercent - curPercent) * 20));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
mCurPercent = (float) (Math.round(value * 10)) / 10;//四舍五入保留到小數(shù)點后兩位
invalidate();//重繪，重走onDraw()方法，這也是不能再onDraw()中創(chuàng)建對象的原因
}
});
anim.start();
}
public void setOnCircleClickListener(OnClickListener onClickListener) {
this.mOnClickListener = onClickListener;
}
//在構(gòu)造方法中
setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mOnClickListener != null) {
mOnClickListener.onClick(CirclePercentView.this);
}
}
});
8、在activity_main.xml布局文件中使用該View：
<!-- 使用自定義命名空間namespace，cpv是該控件名的首字母縮寫，可以隨意取 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cpv="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- cpv后面的屬性名對應(yīng)attrs.xml文件中的自定義屬性名 -->
<com.monkey.customviewdemo.view.CirclePercentView
android:id="@+id/circlePercentView"
android:layout_width="match_parent"
android:layout_height="match_parent"
cpv:arcColor="#ffee00"
cpv:arcWidth="@dimen/activity_horizontal_margin"
cpv:circleBg="#8e29fa"
cpv:percentTextColor="#ffee00"
cpv:percentTextSize="16sp"
cpv:radius="100dp" />
</RelativeLayout>
9、在MainActivity.java中設(shè)置監(jiān)聽，傳入百分比：
mCirclePercentView = (CirclePercentView) findViewById(R.id.circlePercentView);
mCirclePercentView.setOnCircleClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float percent = (float) (Math.random() * 99 + 1);
mCirclePercentView.setCurPercent(percent);
}
});
代碼下載地址：
https://github.com/MonkeyMushroom/CirclePercentView/tree/master
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了WheelPicker自定義時間選擇器控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Android開發(fā)之底圖局部加載移動的方法,涉及Android針對圖片與屏幕屬性的讀取、計算、設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)搜索歷史功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Android利用SurfaceView實現(xiàn)簡單計時器
這篇文章主要為大家詳細(xì)介紹了Android利用SurfaceView實現(xiàn)一個簡單計時器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Android 動態(tài)添加view或item并獲取數(shù)據(jù)的實例
下面小編就為大家?guī)硪黄狝ndroid 動態(tài)添加view或item并獲取數(shù)據(jù)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Android程序開發(fā)之防止密碼輸入錯誤 密碼明文顯示功能
在使用App的時候，首次登錄都需要用戶輸入密碼的，有些朋友為了安全起見密碼設(shè)置的比較長，導(dǎo)致很多次密碼都輸入錯誤，嚴(yán)重影響了用戶體驗效果，下面通過本文給大家介紹Android程序開發(fā)之防止密碼輸入錯誤 密碼明文顯示功能，需要的朋友參考下2016-02-02
Android GridView實現(xiàn)滾動到指定位置的方法
這篇文章主要介紹了Android GridView實現(xiàn)滾動到指定位置的方法,本文介紹了4個相關(guān)的方法,分別對它們做了講解,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Android 連接匿名WiFi的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了android九宮格可分頁加載控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了Android IntentService詳解及使用實例的相關(guān)資料,需要的朋友可以參考下2017-03-03