溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么在Android中自定義一個圓形進度條效果

發(fā)布時間:2021-04-19 16:34:49 來源:億速云 閱讀:152 作者:Leah 欄目:開發(fā)技術(shù)

怎么在Android中自定義一個圓形進度條效果?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。

Android是什么

Android是一種基于Linux內(nèi)核的自由及開放源代碼的操作系統(tǒng),主要使用于移動設(shè)備,如智能手機和平板電腦,由美國Google公司和開放手機聯(lián)盟領(lǐng)導(dǎo)及開發(fā)。

1 控件 RoundProgress

package listview.tianhetbm.p2p.ui;

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

import listview.tianhetbm.p2p.R;


public class RoundProgress extends View {
    private Paint paint = new Paint();

    private int roundColor;
    private int roundProgressColor;
    private int textColor;
    private float textSize;
    private float roundWidth;
    private int max = 100;

    private int progress = 50;

    public RoundProgress(Context context) {
        this(context, null);
    }

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

    public RoundProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);
        //圓環(huán)的顏色
        roundColor = ta.getColor(R.styleable.RoundProgress_roundColor, Color.RED);
        //圓環(huán)進度的顏色
        roundProgressColor = ta.getColor(R.styleable.RoundProgress_roundProgressColor, Color.GREEN);
        //中間進度百分比文字字符串的顏色
        textColor = ta.getColor(R.styleable.RoundProgress_textColor, Color.GREEN);
        //中間進度百分比的字符串的字體大小
        textSize = ta.getDimension(R.styleable.RoundProgress_textSize, 15);
        //圓環(huán)的寬度
        roundWidth = ta.getDimension(R.styleable.RoundProgress_roundWidth, 5);
        ta.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
//第一步:繪制一個最外層的圓
        paint.setColor(roundColor);
        paint.setStrokeWidth(roundWidth);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        int center = getWidth() / 2;
        int radius = (int) (center - roundWidth / 2-45);
        //canvas.drawCircle(center, center, radius, paint);
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        canvas.drawArc(oval, 135, 270, false, paint);
        //第二步:繪制正中間的文本
        float textWidth = paint.measureText(progress + "%");
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setStrokeWidth(0);
        canvas.drawText(progress + "%", center - textWidth / 2, center + textSize / 2, paint);

        //第三步:
        /**
         * 參數(shù)解釋:
         * oval:繪制弧形圈所包含的矩形范圍輪廓
         * 0:開始的角度
         * 360 * progress / max:掃描過的角度
         * false:是否包含圓心
         * paint:繪制弧形時候的畫筆
         */
        //RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        paint.setColor(roundProgressColor);
        paint.setStrokeWidth(roundWidth);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(oval, 135, 270 * progress / max, false, paint);
        Log.e("測試角度",(270 * progress / max)+"");

        Paint mp=new Paint();
        mp.setAntiAlias(true);
        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.tiger);
        int bitmapHeight = bitmap.getHeight()/2;
        int bitmapWidth = bitmap.getWidth()/2;
        //canvas.translate(-center, center);
        float y=0f,x=0f;
//        if(270 * progress / max<=45){
            y = (float) (center-bitmapWidth - (radius) * Math.cos((270 * progress / max+225)*Math.PI/180));
            x = (float) (center-bitmapWidth + (radius) * Math.sin((270 * progress / max+225)*Math.PI/180));
//        }
    //canvas.translate(center, center*2);
    Log.e("測試角度", y + "-----" + x);
    canvas.drawBitmap(bitmap, x, y, mp);


    }
    public void setProgress(int progress){
        this.progress = progress;
        if(progress>100){
            this.progress = 100;
        }
        postInvalidate();
    }
}

2 xml 布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <listview.tianhetbm.p2p.ui.RoundProgress

        android:layout_marginTop="30dp"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_marginLeft="10dp"
        app:roundColor="@color/back_blue"
        app:roundProgressColor="@color/back_orange"
        android:id="@+id/ce"
        app:roundWidth="10dp"
        app:textSize="18sp"
        app:textColor="@color/record_red"
        />
</RelativeLayout>

3 activity(主要代碼)

 super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_three);
        ButterKnife.bind(this);
        new Thread(){
           @Override
           public void run() {
               while (progress<80){
                   progress+=1;
                   ce.setProgress(progress);
                   try {
                       Thread.sleep(50);
                   } catch (Exception e) {
                       e.printStackTrace();
                   }

               }
           }
}.start();

看完上述內(nèi)容,你們掌握怎么在Android中自定義一個圓形進度條效果的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI