时间:2021-05-20
最近一直都在看自定义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); }}谢谢阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
分享一个自己制作的Android自定义View。是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动。以下是效果图:这个自定义View
上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下
Android实现自定义圆形进度条:Android自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进
Android自定义View的构造函数自定义View是Android中一个常见的需求,每个自定义的View都需要实现三个基本的构造函数,而这三个构造函数又有两种
本文实例讲述了Android编程实现自定义进度条颜色的方法。分享给大家供大家参考,具体如下:android自定义进度条颜色先看图基于产品经理各种自定义需求,经过