Android自定义View——仿QQ等级天数进度
2016-07-08 16:49
537 查看
最近一直都在看自定义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对象
那么,这里使用第二个构造方法,代码如下:
现在是矩形的背景有了,那么,还有环形跟文字又怎么去处理呢,别着急,我们先看看这个环形,我这里之所以定义两个环形,是因为,一个用作进度去显示,一个当做背景去实现,好了,分别绘制两个环形。代码如下:
两个环形也有了,接下来就是文字了,绘制文字我们使用canvas.DrawText方法,去绘制,具体代码如下:
这下全部的效果也出来了,最后,我贴上所有的代码:
谢谢阅读。更多技术,可以关注我的其他文章,谢谢支持。
今天坐地铁玩手机的时候,看到手机一个成长天数进度的控件,觉得挺有意思的,于是想自己也写一个。效果如下:
由图可以知道,这里面有很多个元素,首先是背景的矩形区域,其次就是两个环形,然后三个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布局--fill_parent、wrap_content和match_parent的区别
- 关于android传感器中的一些名词
- 定制Android系统开发之二——系统服务
- 关于Android studio导入so库文件失败
- Android LayoutInflater详解
- Android 依赖注入 ButterKnife 基本使用
- Android Studio每次重启都恢复之前的状态
- Android 控件之TextView常见使用问题
- Android自定义控件:绘图基础Canvas、Paint类
- 使用Android SDK Manager更新时出现Download Interrupted:Connection reset错误解决办法
- Android开发——SQLite数据库框架Sugar的使用
- Android 复习笔记5 listView ArrayList
- Android中关于Intent filter和Intent的一些用法。
- universal-imageloader和glide清除磁盘缓存问题
- Android RecyclerView使用notifyItemRemoved()移除数据时数据错乱
- Service里面启动Activity和Alertdialog
- Android系统永不锁屏永不休眠的方法
- Android 动画初步
- android:windowSoftInputMode属性详解
- Android中的Interpolator