Android自定義view實(shí)現(xiàn)圓環(huán)效果實(shí)例代碼
先上效果圖,如果大家感覺(jué)不錯(cuò),請(qǐng)參考實(shí)現(xiàn)代碼。

重要的是如何實(shí)現(xiàn)自定義的view效果
(1)創(chuàng)建類,繼承view,重寫onDraw和onMesure方法
public class CirclePercentBar extends View{
private Context mContext;
private int mArcColor;
private int mArcWidth;
private int mCenterTextColor;
private int mCenterTextSize;
private int mCircleRadius;
private Paint arcPaint;
private Paint arcCirclePaint;
private Paint centerTextPaint;
private RectF arcRectF;
private Rect textBoundRect;
private float mCurData=0;
private int arcStartColor;
private int arcEndColor;
private Paint startCirclePaint;
public CirclePercentBar(Context context) {
this(context, null);
}
public CirclePercentBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CirclePercentBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext=context;
TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.CirclePercentBar,defStyleAttr,0);
mArcColor = typedArray.getColor(R.styleable.CirclePercentBar_arcColor,0xff0000);
mArcWidth = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_arcWidth, DisplayUtil.dp2px(context, 20));
mCenterTextColor = typedArray.getColor(R.styleable.CirclePercentBar_centerTextColor, 0x0000ff);
mCenterTextSize = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_centerTextSize, DisplayUtil.dp2px(context, 20));
mCircleRadius = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_circleRadius, DisplayUtil.dp2px(context, 100));
arcStartColor = typedArray.getColor(R.styleable.CirclePercentBar_arcStartColor,
ContextCompat.getColor(mContext, R.color.green));
arcEndColor = typedArray.getColor(R.styleable.CirclePercentBar_arcEndColor,
ContextCompat.getColor(mContext, R.color.yellow));
typedArray.recycle();
initPaint();
}
private void initPaint() {
startCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
startCirclePaint.setStyle(Paint.Style.FILL);
//startCirclePaint.setStrokeWidth(mArcWidth);
startCirclePaint.setColor(arcStartColor);
arcCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
arcCirclePaint.setStyle(Paint.Style.STROKE);
arcCirclePaint.setStrokeWidth(mArcWidth);
arcCirclePaint.setColor(ContextCompat.getColor(mContext,R.color.colorAccent));
arcCirclePaint.setStrokeCap(Paint.Cap.ROUND);
arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
arcPaint.setStyle(Paint.Style.STROKE);
arcPaint.setStrokeWidth(mArcWidth);
arcPaint.setColor(mArcColor);
arcPaint.setStrokeCap(Paint.Cap.ROUND);
centerTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
centerTextPaint.setStyle(Paint.Style.STROKE);
centerTextPaint.setColor(mCenterTextColor);
centerTextPaint.setTextSize(mCenterTextSize);
//圓弧的外接矩形
arcRectF = new RectF();
//文字的邊界矩形
textBoundRect = new Rect();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, 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){
result=specSize;
}else{
result=mCircleRadius*2;
if(specMode==MeasureSpec.AT_MOST){
result=Math.min(result,specSize);
}
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
canvas.rotate(-90, getWidth()/ 2, getHeight()/ 2);
arcRectF.set(getWidth()/2-mCircleRadius+mArcWidth/2,getHeight()/2-mCircleRadius+mArcWidth/2
,getWidth()/2+mCircleRadius-mArcWidth/2,getHeight()/2+mCircleRadius-mArcWidth/2);
canvas.drawArc(arcRectF, 0,360,false,arcCirclePaint);
arcPaint.setShader(new SweepGradient(getWidth()/2,getHeight()/2,arcStartColor,arcEndColor));
canvas.drawArc(arcRectF, 0,360* mCurData /100,false,arcPaint);
canvas.rotate(90, getWidth()/ 2, getHeight()/ 2);
canvas.drawCircle(getWidth()/2,getHeight()/2-mCircleRadius+mArcWidth/2,mArcWidth/2,startCirclePaint);
String data= String.valueOf(mCurData) +"%";
centerTextPaint.getTextBounds(data,0,data.length(),textBoundRect);
canvas.drawText(data,getWidth()/2-textBoundRect.width()/2,getHeight()/2+textBoundRect.height()/2,centerTextPaint);
}
public void setPercentData(float data, TimeInterpolator interpolator){
ValueAnimator valueAnimator=ValueAnimator.ofFloat(mCurData,data);
valueAnimator.setDuration((long) (Math.abs(mCurData-data)*30));
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value= (float) valueAnimator.getAnimatedValue();
mCurData=(float)(Math.round(value*10))/10;
invalidate();
}
});
valueAnimator.setInterpolator(interpolator);
valueAnimator.start();
}
}
(2)其中需要用到的類
public class DisplayUtil {
public static int px2dp(Context context,float pxValue){
final float scale=context.getResources().getDisplayMetrics().density;
return (int)(pxValue/scale+0.5f);
}
public static int dp2px(Context context,float dpValue){
final float scale=context.getResources().getDisplayMetrics().density;
return (int)(dpValue*scale+0.5f);
}
}
(3)attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CirclePercentBar">
<attr name="arcColor" format="color"/>
<attr name="arcWidth" format="dimension"/>
<attr name="centerTextColor" format="color"/>
<attr name="centerTextSize" format="dimension"/>
<attr name="circleRadius" format="dimension"/>
<attr name="arcStartColor" format="color"/>
<attr name="arcEndColor" format="color"/>
</declare-styleable>
</resources>
(4)在activity_main里面寫布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.administrator.textc.CirclePercentBar
android:id="@+id/circle_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_gravity="center_horizontal"
app:arcWidth="30dp"
app:circleRadius="100dp"
app:centerTextSize="30sp"
app:arcColor="@color/colorPrimary"
app:centerTextColor="@color/colorAccent"
app:arcStartColor="@android:color/holo_green_light"/>
<Button
android:id="@+id/start_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="隨機(jī)"/>
</LinearLayout>
(6)編程實(shí)現(xiàn)效果:
public class MainActivity extends AppCompatActivity {
CirclePercentBar circlePercentBar;
Button startBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circlePercentBar= (CirclePercentBar) findViewById(R.id.circle_bar);
circlePercentBar.setPercentData(55.2f,new DecelerateInterpolator());
startBtn= (Button) findViewById(R.id.start_btn);
startBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
circlePercentBar.setPercentData((float) (100*Math.random()),new DecelerateInterpolator());
}
});
}
}
總結(jié)
以上所述是小編給大家介紹的Android自定義view實(shí)現(xiàn)圓環(huán)效果實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android實(shí)現(xiàn)長(zhǎng)按圓環(huán)動(dòng)畫View效果的思路代碼
- Android自定義View實(shí)現(xiàn)圓環(huán)進(jìn)度條
- Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條
- android自定義View實(shí)現(xiàn)圓環(huán)顏色選擇器
- Android自定義view繪制圓環(huán)占比動(dòng)畫
- Android自定義View實(shí)現(xiàn)圓環(huán)交替效果
- Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果
- Android自定義View之酷炫數(shù)字圓環(huán)
- Android開發(fā)筆記之:在ImageView上繪制圓環(huán)的實(shí)現(xiàn)方法
- Android自定義view實(shí)現(xiàn)半圓環(huán)效果
相關(guān)文章
Android Studio 3.0上分析內(nèi)存泄漏的原因
本篇文章主要介紹了Android Studio 3.0上分析內(nèi)存泄漏的原因,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Android框架Volley使用之Post請(qǐng)求實(shí)現(xiàn)方法
這篇文章主要介紹了Android框架Volley使用之Post請(qǐng)求實(shí)現(xiàn)方法,,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
初識(shí)Android?PowerManagerService省電模式
這篇文章主要介紹了初識(shí)Android?PowerManagerService省電模式,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-08-08
Android編程實(shí)現(xiàn)屏幕禁止休眠的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)屏幕禁止休眠的方法,分析了Android的Manifest.xml設(shè)置與代碼實(shí)現(xiàn)兩種操作技巧,需要的朋友可以參考下2016-10-10
Android實(shí)現(xiàn)手勢(shì)滑動(dòng)多點(diǎn)觸摸縮放平移圖片效果(二)
這篇文章主要介紹了Android實(shí)現(xiàn)手勢(shì)滑動(dòng)多點(diǎn)觸摸縮放平移圖片效果,實(shí)現(xiàn)圖片支持多點(diǎn)觸控,自由的進(jìn)行縮放、平移的注意事項(xiàng),感興趣的小伙伴們可以參考一下2016-02-02
Android ListView滾動(dòng)到底后自動(dòng)加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Android之ListView滾動(dòng)到底后自動(dòng)加載數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
Android短信驗(yàn)證碼(用的Mob短信驗(yàn)證)
這篇文章主要為大家詳細(xì)介紹了Android短信驗(yàn)證碼,使用Mob短信驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
Android實(shí)現(xiàn)授權(quán)訪問(wèn)網(wǎng)頁(yè)的方法
這篇文章主要介紹了Android實(shí)現(xiàn)授權(quán)訪問(wèn)網(wǎng)頁(yè)的方法,需要的朋友可以參考下2014-07-07

