Android 自定義view實現進度條加載效果實例代碼

2019-10-22 18:29:11

字體：大中小

來源：轉載

供稿：網友

這個其實很簡單,思路是這樣的,就是拿view的寬度,除以點的點的寬度+二個點之間的間距,就可以算出大概能畫出幾個點出來,然后就通過canvas畫出點,再然后就是每隔多少時間把上面移動的點不斷的去改變它的坐標就可以,

效果如下:

自定義view,進度條,android,自定義進度條

分析圖:

自定義view,進度條,android,自定義進度條

代碼如下:

package com.example.dotloadview;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Paint;import android.os.Handler;import android.util.AttributeSet;import android.view.View;/** * Created by zhouguizhi on 6/18/15. */public class DotLoadProgressView extends View {  private boolean isStart = false;  private int dotIndex =0;//點下面的角標  private int dotNumber = 0;  private Paint mPaint;  private int paddingTop = 50;  private int paddingBottom = 50;  private int paddingLeft = 30;  private int paddingRight = 30;  private Handler mHandler = new Handler();  private long DELAY_TIME = 300;  private Bitmap bitmap;  private int itemDotSpace = 10;//二個點之間的距離  private Bitmap moveBitmap ;  private Runnable mRunnable = new Runnable() {    @Override    public void run() {      if (dotNumber != 0){        dotIndex = (dotIndex + 1) % dotNumber;      }      invalidate();      mHandler.postDelayed(mRunnable, DELAY_TIME);    }  };  public DotLoadProgressView(Context context, AttributeSet attrs) {    super(context, attrs);    moveBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.active_dot);    init();  }  private void init() {    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);    mPaint.setStyle(Paint.Style.FILL);    mPaint.setDither(true);    mPaint.setAntiAlias(true);  }  @Override  protected void onDraw(Canvas canvas) {    super.onDraw(canvas);    for(int i=0;i<dotNumber;i++){      canvas.drawBitmap(bitmap,paddingLeft+i*itemDotSpace+bitmap.getWidth()*i,paddingTop,mPaint);    }    if(isStart){      canvas.drawBitmap(moveBitmap,paddingLeft+dotIndex*itemDotSpace+moveBitmap.getWidth()*dotIndex,paddingTop,mPaint);    }  }  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);    bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.inactive_dot);    setMeasuredDimension(parentWidth,bitmap.getHeight()+paddingTop+paddingBottom);    int widthWithoutPadding = parentWidth - paddingLeft - paddingRight;    dotNumber = calculateDotsNumber(widthWithoutPadding);  }  private int calculateDotsNumber(int width) {    int number = (width / (itemDotSpace + bitmap.getWidth()));    return number;  }  public void startProgress() {    isStart = true;    dotIndex = -1;    mHandler.removeCallbacks(mRunnable);    mHandler.post(mRunnable);  }  public void stopProgress() {    isStart = false;    mHandler.removeCallbacks(mRunnable);    invalidate();  }  @Override  protected void onAttachedToWindow() {    super.onAttachedToWindow();    startProgress();  }  @Override  protected void onDetachedFromWindow() {    super.onDetachedFromWindow();    stopProgress();  }}

布局代碼:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content">  <com.example.dotloadview.DotLoadProgressView    android:id="@+id/progress1"    android:layout_width="match_parent"    android:layout_height="wrap_content"    /></RelativeLayout>

二個點其實是圖片,在網上別人項目中拿出來用的，如果感覺那個點圖片大了的話,有二個辦法,第一叫你們美工切小點,第二就是通過drawable.setBound()去限制他大小了,我在這其實是偷懶,沒有那么做,當然這點你也可以通過shade去做,而不用圖片的話
最終的效果圖還是這樣的:

自定義view,進度條,android,自定義進度條