Android自定義view實現(xiàn)圓環(huán)進(jìn)度條效果

更新時間：2022年02月16日 12:06:08 作者：風(fēng)云正

這篇文章主要為大家詳細(xì)介紹了Android自定義view實現(xiàn)圓環(huán)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android自定義view實現(xiàn)圓環(huán)進(jìn)度條效果的具體代碼，供大家參考，具體內(nèi)容如下

一、實現(xiàn)效果圖

二、核心代碼

自定義view的屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>

? ? <declare-styleable name="RingProgressBar">
? ? ? ? <attr name="ringColor" format="color" />
? ? ? ? <attr name="ringProgressColor" format="color" />
? ? ? ? <attr name="ringWidth" format="dimension"></attr>
? ? ? ? <attr name="textColor" format="color" />
? ? ? ? <attr name="textSize" format="dimension" />
? ? ? ? <attr name="max" format="integer"></attr>
? ? ? ? <attr name="textIsDisplayable" format="boolean"></attr>
? ? ? ? <attr name="style">
? ? ? ? ? ? <enum name="STROKE" value="0"></enum>
? ? ? ? ? ? <enum name="FILL" value="1"></enum>
? ? ? ? </attr>
? ? </declare-styleable>

</resources>

自定義view

package com.czhappy.ringprogressdemo.view;

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

import com.czhappy.ringprogressdemo.R;

/**
?* Description:
?* User: chenzheng
?* Date: 2017/2/10 0010
?* Time: 15:11
?*/
public class RingProgressBar extends View {

? ? /**
? ? ?* 畫筆對象的引用
? ? ?*/
? ? private Paint ringPaint;
? ? private Paint ringProgressPaint;
? ? private Paint txtPaint;

? ? /**
? ? ?* 圓環(huán)的顏色
? ? ?*/
? ? private int ringColor;

? ? /**
? ? ?* 圓環(huán)進(jìn)度的顏色
? ? ?*/
? ? private int ringProgressColor;

? ? /**
? ? ?* 中間進(jìn)度百分比的字符串的顏色
? ? ?*/
? ? private int textColor;

? ? /**
? ? ?* 中間進(jìn)度百分比的字符串的字體
? ? ?*/
? ? private float textSize;

? ? /**
? ? ?* 圓環(huán)的寬度
? ? ?*/
? ? private float ringWidth;

? ? /**
? ? ?* 最大進(jìn)度
? ? ?*/
? ? private int max;

? ? /**
? ? ?* 當(dāng)前進(jìn)度
? ? ?*/
? ? private int progress;
? ? /**
? ? ?* 是否顯示中間的進(jìn)度
? ? ?*/
? ? private boolean textIsDisplayable;

? ? private Context mContext;
? ? /**
? ? ?* 進(jìn)度的風(fēng)格，實心或者空心
? ? ?*/
? ? private int style;

? ? public static final int STROKE = 0;
? ? public static final int FILL = 1;

? ? public RingProgressBar(Context context) {
? ? ? ? this(context, null);
? ? }

? ? public RingProgressBar(Context context, AttributeSet attrs) {
? ? ? ? this(context, attrs, 0);
? ? }

? ? public RingProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
? ? ? ? super(context, attrs, defStyleAttr);

? ? ? ? this.mContext = context;
? ? ? ? // 獲取自定義的屬性
? ? ? ? initAttrs(context, attrs);
? ? ? ? initPaint();
? ? }

? ? private void initAttrs(Context context, AttributeSet attrs) {
? ? ? ? TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
? ? ? ? ? ? ? ? R.styleable.RingProgressBar);

? ? ? ? //獲取自定義屬性和默認(rèn)值
? ? ? ? ringColor = mTypedArray.getColor(R.styleable.RingProgressBar_ringColor, Color.GRAY);
? ? ? ? ringProgressColor = mTypedArray.getColor(R.styleable.RingProgressBar_ringProgressColor, Color.GREEN);
? ? ? ? textColor = mTypedArray.getColor(R.styleable.RingProgressBar_textColor, Color.GREEN);
? ? ? ? textSize = mTypedArray.getDimension(R.styleable.RingProgressBar_textSize, 16);
? ? ? ? ringWidth = mTypedArray.getDimension(R.styleable.RingProgressBar_ringWidth, 5);
? ? ? ? max = mTypedArray.getInteger(R.styleable.RingProgressBar_max, 100);
? ? ? ? textIsDisplayable = mTypedArray.getBoolean(R.styleable.RingProgressBar_textIsDisplayable, true);
? ? ? ? style = mTypedArray.getInt(R.styleable.RingProgressBar_style, 0);

? ? ? ? //資源回收
? ? ? ? mTypedArray.recycle();
? ? }

? ? /**
? ? ?* 初始化畫筆
? ? ?*/
? ? private void initPaint() {
? ? ? ? //圓環(huán)畫筆
? ? ? ? ringPaint = new Paint();
? ? ? ? ringPaint.setColor(ringColor); //設(shè)置圓環(huán)的顏色
? ? ? ? ringPaint.setStyle(Paint.Style.STROKE); //設(shè)置空心
? ? ? ? ringPaint.setStrokeWidth(ringWidth); //設(shè)置圓環(huán)的寬度
? ? ? ? ringPaint.setAntiAlias(true); ?//消除鋸齒

? ? ? ? //圓環(huán)進(jìn)度畫筆
? ? ? ? ringProgressPaint = new Paint();
? ? ? ? ringProgressPaint.setColor(ringProgressColor); //設(shè)置圓環(huán)的顏色
? ? ? ? ringProgressPaint.setStrokeWidth(ringWidth); //設(shè)置圓環(huán)的寬度
? ? ? ? ringProgressPaint.setAntiAlias(true); ?//消除鋸齒
? ? ? ? switch (style) {
? ? ? ? ? ? case STROKE:
? ? ? ? ? ? ? ? ringProgressPaint.setStyle(Paint.Style.STROKE);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case FILL:
? ? ? ? ? ? ? ? ringProgressPaint.setStyle(Paint.Style.FILL_AND_STROKE);
? ? ? ? ? ? ? ? break;
? ? ? ? }

? ? ? ? //百分比文字畫筆
? ? ? ? txtPaint = new Paint();
? ? ? ? txtPaint.setColor(textColor);
? ? ? ? txtPaint.setTextSize(textSize);
? ? ? ? txtPaint.setTypeface(Typeface.DEFAULT_BOLD); //設(shè)置字體
? ? }

? ? @Override
? ? protected void onDraw(Canvas canvas) {
? ? ? ? super.onDraw(canvas);

? ? ? ? //圓心坐標(biāo)
? ? ? ? int mXCenter = getWidth() / 2;
? ? ? ? int mYCenter = getHeight() / 2;
? ? ? ? int radius = (int) (mXCenter - ringWidth / 2); //圓環(huán)的半徑
? ? ? ? //繪制圓環(huán)
? ? ? ? canvas.drawCircle(mXCenter, mYCenter, radius, ringPaint);

? ? ? ? //繪制圓環(huán)進(jìn)度
? ? ? ? RectF oval = new RectF(mXCenter - radius, mYCenter - radius, mXCenter
? ? ? ? ? ? ? ? + radius, mYCenter + radius); ?//用于定義的圓弧的形狀和大小的界限
? ? ? ? switch (style) {
? ? ? ? ? ? case STROKE:
? ? ? ? ? ? ? ? canvas.drawArc(oval, -90, 360 * progress / max, false, ringProgressPaint); ?//根據(jù)進(jìn)度畫圓弧
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case FILL:
? ? ? ? ? ? ? ? if (progress != 0)
? ? ? ? ? ? ? ? ? ? canvas.drawArc(oval, -90, 360 * progress / max, true, ringProgressPaint); ?//根據(jù)進(jìn)度畫圓弧
? ? ? ? ? ? ? ? break;
? ? ? ? }

? ? ? ? //繪制百分比數(shù)字
? ? ? ? //文字繪制
? ? ? ? String txt = progress ?+ "%";
? ? ? ? //文字的長度
? ? ? ? float mTxtWidth = txtPaint.measureText(txt, 0, txt.length());
? ? ? ? Log.e("tag", textIsDisplayable+","+progress+(style==STROKE));
? ? ? ? if(textIsDisplayable && progress!=0 && style==STROKE){
? ? ? ? ? ? canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter+textSize/2, txtPaint);
? ? ? ? }


? ? }

? ? public synchronized int getMax() {
? ? ? ? return max;
? ? }

? ? /**
? ? ?* 設(shè)置進(jìn)度的最大值
? ? ?* @param max
? ? ?*/
? ? public synchronized void setMax(int max) {
? ? ? ? if(max < 0){
? ? ? ? ? ? throw new IllegalArgumentException("max not less than 0");
? ? ? ? }
? ? ? ? this.max = max;
? ? }

? ? /**
? ? ?* 獲取進(jìn)度.需要同步
? ? ?* @return
? ? ?*/
? ? public synchronized int getProgress() {
? ? ? ? return progress;
? ? }

? ? /**
? ? ?* 設(shè)置進(jìn)度，此為線程安全控件，由于考慮多線程的問題，需要同步
? ? ?* 刷新界面調(diào)用postInvalidate()能在非UI線程刷新
? ? ?* @param progress
? ? ?*/
? ? public synchronized void setProgress(int progress) {
? ? ? ? if(progress < 0){
? ? ? ? ? ? throw new IllegalArgumentException("progress not less than 0");
? ? ? ? }
? ? ? ? if(progress > max){
? ? ? ? ? ? progress = max;
? ? ? ? }
? ? ? ? if(progress <= max){
? ? ? ? ? ? this.progress = progress;
? ? ? ? ? ? postInvalidate();
? ? ? ? }

? ? }

? ? public int getRingColor() {
? ? ? ? return ringColor;
? ? }

? ? public void setRingColor(int ringColor) {
? ? ? ? this.ringColor = ringColor;
? ? }

? ? public int getRingProgressColor() {
? ? ? ? return ringProgressColor;
? ? }

? ? public void setRingProgressColor(int ringProgressColor) {
? ? ? ? this.ringProgressColor = ringProgressColor;
? ? }

? ? public int getTextColor() {
? ? ? ? return textColor;
? ? }

? ? public void setTextColor(int textColor) {
? ? ? ? this.textColor = textColor;
? ? }

? ? public float getTextSize() {
? ? ? ? return textSize;
? ? }

? ? public void setTextSize(float textSize) {
? ? ? ? this.textSize = textSize;
? ? }

? ? public float getRingWidth() {
? ? ? ? return ringWidth;
? ? }

? ? public void setRingWidth(float roundWidth) {
? ? ? ? this.ringWidth = roundWidth;
? ? }
}

MainActivity.java

package com.czhappy.ringprogressdemo.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.czhappy.ringprogressdemo.R;
import com.czhappy.ringprogressdemo.view.RingProgressBar;

public class MainActivity extends AppCompatActivity {

? ? private RingProgressBar myProgress;

? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);

? ? ? ? myProgress = (RingProgressBar) findViewById(R.id.myProgress);

? ? }

? ? public void beginAnim(View view){
? ? ? ? new Thread(){

? ? ? ? ? ? @Override
? ? ? ? ? ? public void run() {
? ? ? ? ? ? ? ? super.run();
? ? ? ? ? ? ? ? for(int i=0; i<=60; i++){
? ? ? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? ? ? Thread.sleep(20);
? ? ? ? ? ? ? ? ? ? } catch (InterruptedException e) {
? ? ? ? ? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? myProgress.setProgress(i);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }.start();

? ? }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
? ? xmlns:ring="http://schemas.android.com/apk/res-auto"
? ? android:id="@+id/activity_main"
? ? android:gravity="center_horizontal"
? ? android:layout_width="match_parent"
? ? android:layout_height="match_parent"
? ? android:orientation="vertical">

? ? <Button
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:onClick="beginAnim"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:text="開始動畫"/>

? ? <com.czhappy.ringprogressdemo.view.RingProgressBar
? ? ? ? android:id="@+id/myProgress"
? ? ? ? android:layout_width="100dp"
? ? ? ? android:layout_height="100dp"
? ? ? ? android:layout_marginTop="20dp"
? ? ? ? ring:ringColor="@color/ring_color"
? ? ? ? ring:ringProgressColor="@color/ring_progress_color"
? ? ? ? ring:textColor="@color/ring_progress_color"
? ? ? ? ring:textIsDisplayable="true"
? ? ? ? ring:ringWidth="6dp"
? ? ? ? ring:textSize="16sp"/>
</LinearLayout>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: