快捷導航

Android自定義扇形倒計時實例代碼

更新時間：2017年03月31日 12:01:10 作者：猜火車_

最近工作中需要做一個倒計時,是那種一個圓,慢慢的被吃掉的動畫倒計時,由于自己是android小白，效果還不是多滿意，先給大家分享實例代碼，僅供大家參考

一.概述

嚴格來說,我是Android小白,寫的目的只是想作為知識儲備而已….但是想到別人或許會不小心搜到我的這篇,如果我只是簡單的描述,別人有可能看不懂,說不定還被吐槽,那豈不是很冤嗎?

所以,我還是把問題及過程描述清楚,這也是對自己的一個交代,同時,這也是我的第一篇,我應(yīng)該做好它;

先說一下需求: 最近工作中需要做一個倒計時,是那種一個圓,慢慢的被吃掉的動畫倒計時,由于自己知識不是很足,只知道要用Canvas來畫,在網(wǎng)上搜了一圈,發(fā)現(xiàn)要么是靜態(tài)的畫了一個扇形,要么是不能控制控件的位置大小….總之,找了一圈感覺學了不少Canvas的知識,但是由于自己也是Android小白,所以并不能從中總結(jié)出我想要的那種動畫的扇形倒計時(這里說一下,因為我是第一次用這玩意,對一些編輯不熟,所以就不上效果圖了,但是這里的代碼非常簡單,需要的朋友可以直接拿過去運行一下看看是否是你需要的效果);

最后我不得不請教我的一個朋友,現(xiàn)在他倒是也談不上大神,但是比我厲害多了…..這里說白了我只是把他的邏輯更多的挪過來…好慚愧…因為我更多的只是想作為一個知識儲備…

二.正文

剛才也說到用到Canvas,所以我們先來自定義一個控件,直接繼承View的自定義控件;

SweepView.java:

public class SweepView extends View {
  private static final int DEFAULT_WIDTH = 100;
  private static final int DEFAULT_HEIGHT = 100;
  private int mWidth;   
  private int mHeight; 
  private RectF rectF;
  private Paint paint;
  private int mColor = Color.RED;//默認顏色為紅色
  private float mSweep = 0;  //扇形角度
  public SweepView(Context context) {
    super(context);
    init();
  }
  public SweepView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }
  public SweepView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
  private void init() {
    paint = new Paint();
    paint.setColor(mColor); //畫筆顏色
    paint.setStyle(Paint.Style.FILL);  //填充
    paint.setAntiAlias(true);  //是否抗鋸齒
  }
  /**
   * 設(shè)置扇形顏色
   * UIThred
   */
  public void setColor(int color) {
    this.mColor = color;
    paint.setColor(mColor);
    //調(diào)用onDraw重繪
    invalidate();
  }
  /**
   * 設(shè)置扇形的區(qū)域0-360
   * UIThred
   */
  public void setSweep(float mSweep) {
    this.mSweep = mSweep;
    //調(diào)用onDraw重繪
    invalidate();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int resultWidth = measureWidth(widthMeasureSpec);
    int resultHeight = measureHeight(heightMeasureSpec);
    setMeasuredDimension(resultWidth, resultHeight);
  }
  /**
   * 繪制的寬
   * 其實里面的內(nèi)容我不懂,好慚愧...我以后會弄懂的.....0.0
   */
  private int measureWidth(int widthMeasureSpec) {
    int size = MeasureSpec.getSize(widthMeasureSpec);
    int mode = MeasureSpec.getMode(widthMeasureSpec);
    int result;
    if (mode == MeasureSpec.EXACTLY) {
      result = size;
    } else {
      result = DEFAULT_WIDTH;
      if (mode == MeasureSpec.AT_MOST) {
        result = Math.min(size, DEFAULT_WIDTH);
      }
    }
    return result;
  }
  /**
   * 繪制的高
   * 這里面的內(nèi)容我也不懂,好慚愧...我以后會弄懂的.....0.0
   */
  private int measureHeight(int heightMeasureSpec) {
    int size = MeasureSpec.getSize(heightMeasureSpec);
    int mode = MeasureSpec.getMode(heightMeasureSpec);
    int result;
    if (mode == MeasureSpec.EXACTLY) {
      result = size;
    } else {
      result = DEFAULT_HEIGHT;
      if (mode == MeasureSpec.AT_MOST) {
        result = Math.min(size, DEFAULT_HEIGHT);
      }
    }
    return result;
  }
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    this.mHeight = h;
    this.mWidth = w;
    rectF = new RectF(0, 0, w, h);
    super.onSizeChanged(w, h, oldw, oldh);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    //畫扇形
    canvas.drawArc(rectF, -90, mSweep, true, paint);
  }
}

寫好自定義的View,顯然我們要用它,所以布局文件中聲明:(不過有一點要注意的是,如果想要控制它的位置及大小,這里要用ViewGroup來包裹,通過設(shè)置ViewGroup的位置及大小來控制它,至于為什么,我也很想知道0.0)

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.example.meijun.myapplication.MainActivity">
  <RelativeLayout
    android:layout_centerInParent="true"
    android:layout_width="20dp"
    android:background="#00f"
    android:layout_height="20dp">
    <com.example.meijun.myapplication.SweepView
      android:layout_width="wrap_content"
      android:id="@+id/sweepView"
      android:layout_height="wrap_content" />
  </RelativeLayout>
</RelativeLayout>

最后就是在代碼里來繪制動畫形態(tài)的,圓形扇形倒計時了:

MainActivity.java:

public class MainActivity extends AppCompatActivity {
  private SweepView sweepView;
  float angle = 0;//繪制的角度
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    sweepView = (SweepView) findViewById(R.id.sweepView);
    sweepView.setColor(Color.WHITE);  //設(shè)置畫筆顏色
    sweepView.setSweep(0); //初始繪制0度
    new Thread(new Runnable() {
      @Override
      public void run() {
        while (angle <= 360) { //這里相當于繪制一個完整的圓,結(jié)合下面的3.6及50,也就是5秒鐘的倒計時
          angle += 3.6;
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              sweepView.setSweep(angle);
            }
          });
          try {
            Thread.sleep(50);
          } catch (InterruptedException e) {
            e.printStackTrace();
          }
        }
      }
    }).start();
  }
}

三.總結(jié)

在自定義view中,我有很多地方還不是很明白的,因為自己本身對自定義的一些方法認知是缺乏的,不過我想我以后會慢慢弄懂其中一些方法的含義;當然如果朋友你不小心能看到這篇文章,還望你能對我解惑,不勝感激.