Android自定义View仿QQ等级天数进度

最近一直都在看自定义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);  }}

谢谢阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

离开睁眼闭眼看见的城市,逃离身边的纷纷扰扰,

Android自定义View仿QQ等级天数进度

相关文章:

你感兴趣的文章:

标签云: