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

 更新时间:2016年07月12日 11:41:42   作者:qq_25193681  
这篇文章主要为大家详细介绍了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 studio 打包自动生成版本号与日期,apk输入路径详解

    android studio 打包自动生成版本号与日期,apk输入路径详解

    这篇文章主要介绍了android studio 打包自动生成版本号与日期,apk输入路径详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03
  • Android创建与解析XML(三)——详解Sax方式

    Android创建与解析XML(三)——详解Sax方式

    本篇文章主要介绍了Android创建与解析XML(三)——详解Sax方式 ,这里整理了详细的代码,有需要的小伙伴可以参考下。
    2016-11-11
  • android ListView深入理解

    android ListView深入理解

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示。抽空把对ListView的使用做了整理,需要的朋友可以参考下
    2012-11-11
  • Kotlin中的反射机制深入讲解

    Kotlin中的反射机制深入讲解

    反射,简单来说,是一种在运行时动态地访问对象属性和方法的方式,而不需要事先确定这些属性是什么。下面这篇文章主要给大家介绍了关于Kotlin中反射机制的相关资料,需要的朋友可以参考下
    2018-11-11
  • Flutter实现支付宝集五福手画福字功能

    Flutter实现支付宝集五福手画福字功能

    支付宝一年一度的集五福活动又开始了,其中包含了一个功能就是手写福字,还包括撤销一笔,清除重写,保存相册等。本文将介绍如何使用Flutter实现这些功能,感兴趣的可以了解一下
    2022-01-01
  • Android7.0版本影响开发的改进分析

    Android7.0版本影响开发的改进分析

    这篇文章主要介绍了Android7.0版本影响开发的改进,总结分析了Android7.0版本中比较常见的开发注意事项与操作技巧,需要的朋友可以参考下
    2017-11-11
  • Android通过BLE传输文件遇到问题解决

    Android通过BLE传输文件遇到问题解决

    这篇文章主要为大家介绍了Android通过BLE传输文件遇到问题解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Android中程序的停止状态详细介绍

    Android中程序的停止状态详细介绍

    这篇文章主要介绍了Android中程序的停止状态详细介绍,本文讲解了什么是程序的停止状态、为什么Android要引入这一状态、激活状态和停止状态的切换、如何变为停止状态等内容,需要的朋友可以参考下
    2015-01-01
  • Android ListView列表优化的方法详解

    Android ListView列表优化的方法详解

    列表 ListView 是应用中最为常见的组件,而列表往往也会承载很多元素,这时就需要对其进行优化。本文介绍了 Flutter ListView 的4个优化要点,非常实用,需要的可以参考一下
    2022-05-05
  • Android利用BitMap获得图片像素数据的方法

    Android利用BitMap获得图片像素数据的方法

    这篇文章主要介绍了Android利用BitMap获得图片像素数据的方法,结合实例对比分析了Android获取图片像素数据的相关技巧,需要的朋友可以参考下
    2016-02-02

最新评论