先上效果圖，如果大家感覺不錯(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

(4)在activity_main里面寫布局

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

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"/>

android:id="@+id/start_btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="隨機(jī)"/>

(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Android 自定义 圆环,Android自定义view实现圆环效果实例代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。