Android中怎么實現一個炫酷進度條效果

這期內容當中小編將會給大家帶來有關Android中怎么實現一個炫酷進度條效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

HorizontalProgressbarWithProgress的代碼

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ProgressBar;

import trunk.doi.base.R;


public class HorizontalProgressbarWithProgress extends ProgressBar{

 private static final int DEFAULT_TEXT_SIZE=10;//sp
 private static final int DEFAULT_TEXT_COLOR=0xFFFC00D1;
 private static final int DEFAULT_COLOR_UNREACH=0xFFD3D6DA;
 private static final int DEFAULT_HEIGHT_UNREACH=2;//dp
 private static final int DEFAULT_COLOR_REACH=DEFAULT_TEXT_COLOR;
 private static final int DEFAULT_HEIGHT_REACH=2;
 private static final int DEFAULT_TEXT_OFFSET=10;

 protected int mTextSize=sp2px(DEFAULT_TEXT_SIZE);
 protected int mTextColor=DEFAULT_TEXT_COLOR;
 protected int mUnReachColor=DEFAULT_COLOR_UNREACH;
 protected int mUnReachHeigh=dp2px(DEFAULT_HEIGHT_UNREACH);
 protected int mReachHeigh=dp2px(DEFAULT_HEIGHT_REACH);
 protected int mReachColor=DEFAULT_COLOR_REACH;
 protected int mTextOffset=dp2px(DEFAULT_TEXT_OFFSET);

 protected Paint mPaint=new Paint();
 protected int mRealWidth;

 public HorizontalProgressbarWithProgress(Context context) {
  super(context);
  init(null);
 }

 public HorizontalProgressbarWithProgress(Context context, AttributeSet attrs) {
  super(context, attrs);
  init(attrs);

 }

 public HorizontalProgressbarWithProgress(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(attrs);
 }

 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
 public HorizontalProgressbarWithProgress(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  super(context, attrs, defStyleAttr, defStyleRes);
  init(attrs);
 }
 private void init(AttributeSet attrs) {


  /**
   * 獲取dimension的方法有幾種，區別不大
   * 共同點是都會將dp，sp的單位轉為px，px單位的保持不變
   *
   * getDimension() 返回float，
   * getDimensionPixelSize 返回int 小數部分四舍五入
   * getDimensionPixelOffset 返回int，但是會抹去小數部分
   */
  TypedArray array=getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalProgressbarWithProgress);

  mTextSize= (int) array.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_text_size,mTextSize);
  mTextColor=array.getColor(R.styleable.HorizontalProgressbarWithProgress_progress_text_color,mTextColor);
  mUnReachColor=array.getColor(R.styleable.HorizontalProgressbarWithProgress_progress_unreach_color,mUnReachColor);
  mUnReachHeigh=(int) array.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_unreach_height,mUnReachHeigh);
  mReachHeigh=(int) array.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_reach_height,mReachHeigh);
  mTextOffset=(int) array.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_text_offset,mTextOffset);
  mReachColor=array.getColor(R.styleable.HorizontalProgressbarWithProgress_progress_reach_color,mReachColor);

  array.recycle();

  mPaint.setTextSize(mTextSize);

 }

 @Override
 protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//  int widthMode=MeasureSpec.getMode(widthMeasureSpec);
  int width=MeasureSpec.getSize(widthMeasureSpec);
  int heigh=measureHeight(heightMeasureSpec);
  setMeasuredDimension(width,heigh);
  mRealWidth=getMeasuredWidth()-getPaddingLeft()-getPaddingRight();
 }



 private int measureHeight(int heightMeasureSpec) {

  int result=0;
  int mode=MeasureSpec.getMode(heightMeasureSpec);
  int size=MeasureSpec.getSize(heightMeasureSpec);

  if(mode==MeasureSpec.EXACTLY){
   result=size;
  }else{
   int textHeigh= (int) (mPaint.descent()-mPaint.ascent());
   result=getPaddingTop()+getPaddingBottom()+Math.max(Math.max(mReachHeigh,mUnReachHeigh),Math.abs(textHeigh));
   if(mode==MeasureSpec.AT_MOST){
    result=Math.min(result,size);
   }
  }
  return result;

 }

 @Override
 protected synchronized void onDraw(Canvas canvas) {


  canvas.save();
  canvas.translate(getPaddingLeft(),getHeight()/2);

  boolean noNeedUnReach=false;
  String text=getProgress()+"%";
  int textWidth= (int) mPaint.measureText(text);
  float radio =getProgress()*1.0f/getMax();
  float progressX=radio*mRealWidth;
  if(progressX+textWidth>mRealWidth){
   progressX=mRealWidth-textWidth;
   noNeedUnReach=true;
  }

  float endX=progressX-mTextOffset/2;
  if(endX>0){
   mPaint.setColor(mReachColor);
   mPaint.setStrokeWidth(mReachHeigh);
   canvas.drawLine(0,0,endX,0,mPaint);
  }

  //draw text
  mPaint.setColor(mTextColor);
  int y = (int) (-(mPaint.descent()+mPaint.ascent())/2);
  canvas.drawText(text,progressX,y,mPaint);


  //draw unreach bar
  if(!noNeedUnReach){
   float startX=progressX+ mTextOffset/2+textWidth;
   mPaint.setColor(mUnReachColor);
   mPaint.setStrokeWidth(mUnReachHeigh);
   canvas.drawLine(startX,0,mRealWidth,0,mPaint);
  }
  canvas.restore();


 }

 protected int dp2px(int dpVal){
  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpVal,getResources().getDisplayMetrics());
 }
 protected int sp2px(int spVal){
  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,spVal,getResources().getDisplayMetrics());
 }

}

RoundProgressBarWithProgress的代碼

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;

import trunk.doi.base.R;

/**
 * 作者：Mr.Lee on 2017-10-18 10:48
 * 郵箱：569932357@qq.com
 */

public class RoundProgressBarWithProgress extends HorizontalProgressbarWithProgress {


 private int mRadius=dp2px(30);
 private int mMaxPaintWidth;

 public RoundProgressBarWithProgress(Context context) {
  super(context);
  init(null);
 }

 public RoundProgressBarWithProgress(Context context, AttributeSet attrs) {
  super(context, attrs);
  init(attrs);
 }

 public RoundProgressBarWithProgress(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(attrs);
 }

 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
 public RoundProgressBarWithProgress(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  super(context, attrs, defStyleAttr, defStyleRes);
  init(attrs);
 }


 private void init(AttributeSet attrs){

  mReachHeigh= (int) (mUnReachHeigh*2.5f);

  TypedArray array=getContext().obtainStyledAttributes(attrs, R.styleable.RoundProgressBarWithProgress);
  mRadius=(int) array.getDimension(R.styleable.RoundProgressBarWithProgress_radius,mRadius);
  array.recycle();

  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setAntiAlias(true);
  mPaint.setDither(true);
  mPaint.setStrokeCap(Paint.Cap.ROUND);

 }

 @Override
 protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

  mMaxPaintWidth=Math.max(mReachHeigh,mUnReachHeigh);
  //默認4個padding一致
  int except=mRadius*2+mMaxPaintWidth+getPaddingLeft()+getPaddingRight();
  int width=resolveSize(except,widthMeasureSpec);
  int height=resolveSize(except,heightMeasureSpec);
  int realWidth=Math.min(width,height);

  mRadius=(realWidth-getPaddingLeft()-getPaddingRight()-mMaxPaintWidth)/2;

  setMeasuredDimension(realWidth,realWidth);
 }

 @Override
 protected synchronized void onDraw(Canvas canvas) {

  String text=getProgress()+"%";
  float textWidth=mPaint.measureText(text);
  float textHeight=(mPaint.ascent()+mPaint.descent())/2;

  canvas.save();
  canvas.translate(getPaddingLeft(),getPaddingTop());

  mPaint.setStyle(Paint.Style.STROKE);
  // draw unreachbar
  mPaint.setColor(mUnReachColor);
  mPaint.setStrokeWidth(mUnReachHeigh);
  canvas.drawCircle(mRadius,mRadius,mRadius,mPaint);
  //draw reach bar
  mPaint.setColor(mReachColor);
  mPaint.setStrokeWidth(mReachHeigh);
  float sweepAngle=getProgress()*1.0f/getMax()*360;
  canvas.drawArc(new RectF(0,0,mRadius*2,mRadius*2),0,sweepAngle,false,mPaint);
  //draw text
  mPaint.setColor(mTextColor);
  mPaint.setStyle(Paint.Style.FILL);
  canvas.drawText(text,mRadius-textWidth/2,mRadius-textHeight,mPaint);

  canvas.restore();

 }
}

activity_view_mv代碼

<?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:id="@+id/rl_view"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
 >


  <trunk.doi.base.ui.activity.test.HorizontalProgressbarWithProgress
   android:id="@+id/progress_bar"
   
   android:layout_marginTop="50dp"
   android:padding="5dp"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:max="100"
   android:progress="50"
   app:progress_unreach_color="@color/pink"
   app:progress_text_color="@color/yellow"
   app:progress_reach_color="@color/red"
   />

  <android.support.v7.widget.AppCompatSeekBar
   android:id="@+id/seekbar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:padding="5dp"
   android:layout_marginTop="100dp"
   />

  <trunk.doi.base.ui.activity.test.RoundProgressBarWithProgress
   android:id="@+id/progress_bar2"
   
   android:layout_marginTop="150dp"
   android:padding="5dp"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:max="100"
   android:progress="0"
   app:progress_unreach_color="@color/pink"
   app:progress_text_color="@color/yellow"
   app:progress_reach_color="@color/red"
   app:progress_reach_height="3dp"
   app:progress_unreach_height="1dp"
   app:radius="200dp"
   />

</RelativeLayout>

ViewMvActivity代碼

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatSeekBar;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.SeekBar;

import butterknife.BindView;
import trunk.doi.base.R;
import trunk.doi.base.base.BaseActivity;

public class ViewMvActivity extends BaseActivity {

 //沒有集成Butterknife的findviewbyid()

 @BindView(R.id.progress_bar)
 HorizontalProgressbarWithProgress progress_bar;
 @BindView(R.id.progress_bar2)
 RoundProgressBarWithProgress progress_bar2;
 @BindView(R.id.seekbar)
 AppCompatSeekBar seekbar;

 private float mTouchStartY;
 private static final float TOUCH_MOVE_MAX_Y=600;

 @Override
 protected int initLayoutId() {
  return R.layout.activity_view_mv;
 }

 @Override
 protected void initView(@Nullable Bundle savedInstanceState) {

 }

 @Override
 protected void setListener() {

  seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
   @Override
   public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    progress_bar.setProgress(progress);
    progress_bar2.setProgress(progress);
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {

   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {

   }
  });


 }

 @Override
 protected void initData() {

 }


}

上述就是小編為大家分享的Android中怎么實現一個炫酷進度條效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。