Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android自定義View仿QQ等級天數進度

Android自定義View仿QQ等級天數進度

編輯:關於Android編程

最近一直都在看自定義View這一塊。差不多一個星期了吧。這個星期堅持每天更新博客,感覺自己的技術也有點突破,對自定義View的計算也有了更深的認識。

今天看到手機一個成長天數進度的控件,覺得挺有意思的,於是想自己也寫一個。效果如下:

由圖可以知道,這裡面有很多個元素,首先是背景的矩形區域,其次就是兩個環形,然後三個Text文本。其實不復雜,我們一點一點的去實現。

首先呢,畫矩形背景。這裡用到一個RectF的類,這個類包含一個矩形的四個單精度浮點坐標。矩形通過上下左右4個邊的坐標來表示一個矩形。這些坐標值屬性可以被直接訪問,用width()和 height()方法可以獲取矩形的寬和高,同時他還有構造方法:

RectF一共有四個構造方法:

RectF()構造一個無參的矩形

RectF(float left,float top,float right,float bottom)構造一個指定了4個參數的矩形

RectF(Rect F r)根據指定的RectF對象來構造一個RectF對象(對象的左邊坐標不變)

RectF(Rect r)根據給定的Rect對象來構造一個RectF對象

那麼,這裡使用第二個構造方法,代碼如下:

  @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));

  }

現在是矩形的背景有了,那麼,還有環形跟文字又怎麼去處理呢,別著急,我們先看看這個環形,我這裡之所以定義兩個環形,是因為,一個用作進度去顯示,一個當做背景去實現,好了,分別繪制兩個環形。代碼如下:

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

兩個環形也有了,接下來就是文字了,繪制文字我們使用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("升級年費超級會員立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);

這下全部的效果也出來了,最後,我貼上所有的代碼:

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("升級年費超級會員立即升至");

    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("升級年費超級會員立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);

  }


}

謝謝閱讀。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持本站。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved