快捷導(dǎo)航

Android自定義View仿QQ等級(jí)天數(shù)進(jìn)度

更新時(shí)間：2016年07月12日 11:41:42 作者：qq_25193681

這篇文章主要為大家詳細(xì)介紹了Android自定義View仿QQ等級(jí)天數(shù)進(jìn)度效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近一直都在看自定義View這一塊。差不多一個(gè)星期了吧。這個(gè)星期堅(jiān)持每天更新博客，感覺(jué)自己的技術(shù)也有點(diǎn)突破，對(duì)自定義View的計(jì)算也有了更深的認(rèn)識(shí)。

今天看到手機(jī)一個(gè)成長(zhǎng)天數(shù)進(jìn)度的控件，覺(jué)得挺有意思的，于是想自己也寫(xiě)一個(gè)。效果如下：

由圖可以知道，這里面有很多個(gè)元素，首先是背景的矩形區(qū)域，其次就是兩個(gè)環(huán)形，然后三個(gè)Text文本。其實(shí)不復(fù)雜，我們一點(diǎn)一點(diǎn)的去實(shí)現(xiàn)。

首先呢，畫(huà)矩形背景。這里用到一個(gè)RectF的類(lèi)，這個(gè)類(lèi)包含一個(gè)矩形的四個(gè)單精度浮點(diǎn)坐標(biāo)。矩形通過(guò)上下左右4個(gè)邊的坐標(biāo)來(lái)表示一個(gè)矩形。這些坐標(biāo)值屬性可以被直接訪(fǎng)問(wèn)，用width（）和 height（）方法可以獲取矩形的寬和高，同時(shí)他還有構(gòu)造方法：

RectF一共有四個(gè)構(gòu)造方法：

RectF（）構(gòu)造一個(gè)無(wú)參的矩形

RectF（float left,float top,float right,float bottom）構(gòu)造一個(gè)指定了4個(gè)參數(shù)的矩形

RectF(Rect F r)根據(jù)指定的RectF對(duì)象來(lái)構(gòu)造一個(gè)RectF對(duì)象(對(duì)象的左邊坐標(biāo)不變)

RectF(Rect r)根據(jù)給定的Rect對(duì)象來(lái)構(gòu)造一個(gè)RectF對(duì)象

那么，這里使用第二個(gè)構(gòu)造方法，代碼如下：

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth=getWidth();
    mHeight=getHeight();
    mRectF=new RectF((float)(mWidth*0.1), (float)(mHeight*0.1), (float)(mWidth*0.9), (float)(mHeight*0.9));

  }

現(xiàn)在是矩形的背景有了，那么，還有環(huán)形跟文字又怎么去處理呢，別著急，我們先看看這個(gè)環(huán)形，我這里之所以定義兩個(gè)環(huán)形，是因?yàn)椋粋€(gè)用作進(jìn)度去顯示，一個(gè)當(dāng)做背景去實(shí)現(xiàn)，好了，分別繪制兩個(gè)環(huán)形。代碼如下：

  canvas.drawArc(mRectF, 90, 360, false, mButtomPaint);
  canvas.drawArc(mRectF, 15, 180, false, mTopPaint);

兩個(gè)環(huán)形也有了，接下來(lái)就是文字了，繪制文字我們使用canvas.DrawText方法，去繪制，具體代碼如下：

canvas.drawText("5.0", (mWidth-(mTextWidth+mTextSmail))/2, (float)(mHeight/2), mTextPaint);

canvas.drawText("天", (mWidth-(mTextWidth+mTextSmail))/2+mTextWidth, (float)(mHeight/2), mSmailTextPaint);

canvas.drawText("升級(jí)年費(fèi)超級(jí)會(huì)員立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);

這下全部的效果也出來(lái)了，最后，我貼上所有的代碼：

public class MyProgress extends View {

  private Paint mButtomPaint;

  private Paint mTopPaint;

  private Paint mTextPaint;

  private Paint mSmailTextPaint;

  private float mWidth;

  private float mHeight;

  private RectF mRectF;


  public MyProgress(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    initView();

  }
  public MyProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    initView();
  }

  public MyProgress(Context context) {
    super(context);
    initView();
  }

  private void initView() {
    mButtomPaint=new Paint();
    mButtomPaint.setColor(Color.rgb(69, 142, 253));
    mButtomPaint.setAntiAlias(true);
    mButtomPaint.setStrokeWidth(10);
    mButtomPaint.setStyle(Style.STROKE);

    mTopPaint=new Paint();
    mTopPaint.setColor(Color.parseColor("#ffffff"));
    mTopPaint.setAntiAlias(true);
    mTopPaint.setStrokeWidth(10);
    mTopPaint.setStyle(Style.STROKE);

    mTextPaint=new Paint();
    mTextPaint.setColor(Color.WHITE);
    mTextPaint.setAntiAlias(true);
    mTextPaint.setStrokeWidth(5);
    mTextPaint.setTextSize(50);

    mSmailTextPaint=new Paint();
    mSmailTextPaint.setStrokeWidth(3);
    mSmailTextPaint.setColor(Color.WHITE);
    mSmailTextPaint.setAntiAlias(true);
    mSmailTextPaint.setTextSize(15);

  }

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth=getWidth();
    mHeight=getHeight();
    mRectF=new RectF((float)(mWidth*0.1), (float)(mHeight*0.1), (float)(mWidth*0.9), (float)(mHeight*0.9));

  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    canvas.drawArc(mRectF, 90, 360, false, mButtomPaint);

    canvas.drawArc(mRectF, 15, 180, false, mTopPaint);

    float mTextWidth=mTextPaint.measureText("5.0");

    float mTextSmail=mSmailTextPaint.measureText("天");

    float mTextSmailButtom=mSmailTextPaint.measureText("升級(jí)年費(fèi)超級(jí)會(huì)員立即升至");

    canvas.drawText("5.0", (mWidth-(mTextWidth+mTextSmail))/2, (float)(mHeight/2), mTextPaint);

    canvas.drawText("天", (mWidth-(mTextWidth+mTextSmail))/2+mTextWidth, (float)(mHeight/2), mSmailTextPaint);

    canvas.drawText("升級(jí)年費(fèi)超級(jí)會(huì)員立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);

  }


}

謝謝閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: