Android 自定義view實現(xiàn)進度條加載效果實例代碼

更新時間：2017年08月28日 17:00:24 作者：zhoushenxian

這篇文章主要介紹了Android 自定義view實現(xiàn)進度條加載效果實例代碼,需要的朋友可以參考下

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

效果如下:

分析圖:

代碼如下:

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;//點下面的角標(biāo)
  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>

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