0°

自定义View之炫酷的成绩展示界面

内容预览:
  • 本号支持 投稿! “   前言 前几天帮助我们移动组的一个小伙伴...~
  • 先上UI妹子给的设计图,再看我写完之后的效果图~
  • (2)绘制弧我们用drawArc(RectF oval, float startAngle, floatsweepAn...~

始发于微信公众号: 程序员小乐

分享编程技能、互联网技术、生活感悟、打造干货分享平台,将总结的技术、心得、经验分享给大家,这里不只限于技术!值得你去关注,点击上方 蓝字 快速关注。本号支持 投稿

  前言



前几天帮助我们移动组的一个小伙伴绘制界面,遇到了一个成绩展示界面,作为菜鸟的我顿时感觉天都塌陷下来了,就立马焉了,幸好我有我的绝招,当然是baidu,google了,终于皇天不负有心人,让我给找到了解决.的方法,自定义View来实现。先上UI妹子给的设计图,再看我写完之后的效果图。


自定义View之炫酷的成绩展示界面

效果图 2.png

自定义View之炫酷的成绩展示界面

效果图.gif


截屏工具不是太好,将就看看吧!!!
看到这里,我们就要实现它了,待我一步一步的去搞定它吧!!!


  思路



首先,我们得有自己的思路啊,就像写作文一样,先要弄清楚自己的中心思想,然后在一步一步的去完成它。

1.自定义属性,如进度条的宽度、颜色,字体的大小、颜色等。

2.测量宽度和高度 

3.画出我们心目中的效果图(当然不是用笔在笔记本上画了),我们采用Paint在Canvas上来绘制界面。 

4.设置进度,相当于画龙点睛的作用了,使我们画出的静态页面动起来。


好了,下面我们将围绕我们的思路来一步一步的去实现它了。


1.自定义属性值

在value文件夹下面新建attrs.xml

自定义View之炫酷的成绩展示界面


然后在自定义属性的地方我们去获取并且设置他们的默认值。


自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

2.测量

测量是在 onMeasure(int  widthMeasureSpec,  int  heightMeasureSpec)方法里面来执行的onMeasure()方法的作用就是测量View需要多大的空间,就是宽和高,本文中因为我们要绘制一个圆,所以我们需要一个正方形,那么我们就指定宽度和高度一致。


自定义View之炫酷的成绩展示界面


3.绘制出想要的效果图(背景弧和展示弧,展示字体)


(1)绘制操作是在onDraw(Canvas canvas)方法中来执行的。

(2)绘制弧我们用drawArc(RectF oval, float startAngle, floatsweepAngle,

boolean useCenter,Paint paint)方法


自定义View之炫酷的成绩展示界面


(3)我们先确定圆弧的外轮廓矩形区域的大小


自定义View之炫酷的成绩展示界面


准备工作已经做完了,下面就让我们愉快的里绘制圆弧吧!!!


3.1背景弧

因为我们绘制的是一段弧线,故让它从135°开始,顺时针绘制到270°时停止,正好就是我们需要的那段弧线。


自定义View之炫酷的成绩展示界面


3.2 当前进度弧


自定义View之炫酷的成绩展示界面


3.3 两段文字

在绘制文字之前,我们需要搞清楚绘制文字的一些知识,先看看drawText(String text, float x, float y,Paint paint)方法吧


自定义View之炫酷的成绩展示界面

看到这里想必很多人都会问,基线是个神马东东,刚开始我也不太懂,直到我看了这位大神的一篇文章我才恍然大悟了http://blog.csdn.net/harvic880925/article/details/50423762不懂得小伙伴可以移步到这里去看看,搞清楚基线是个什么鬼之后就好办了。首先,我们要把文字放到我们绘制的圆弧的中心位置,即确认基线的X和Y的坐标值。


X值:外轮廓矩形的宽度的一半减去文字宽度的一半。
Y值:外轮廓矩形的高度的一半减去文字高度的一半。
上代码:


自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面


这样我们才是把文字给放到圆弧的中心位置,可是效果图上面的底部文字是在弦上的,所以我们还的计算圆心到弦的距离(这里就要运用初中数学知识了,赶紧恶补知识吧!)


(1)确定圆的半径,由以上可知,半径为外轮廓矩形的宽度的一半(我们是在一个正方形中来绘制圆弧的)。


自定义View之炫酷的成绩展示界面


(2)由于我们切掉的弧的角度为90°,则可以根据勾股定理来计算出圆心和弦的距离,这样我们就可以规定文字的位置了。


文字一的位置:半径加上计算出的距离减去文字二的高度在减去文字一高度的一半。
文字二的位置:半径加上计算出的距离减去文字二高度的一半。


自定义View之炫酷的成绩展示界面


如上,我们就让文字按照我们计算好的位置显示了。


自定义View之炫酷的成绩展示界面

4.添加动画效果

自定义View之炫酷的成绩展示界面


到这里,所有的绘制工作已经完成,来欣赏一下我们的劳动成果吧,哈哈哈。
activity_layout.xml


自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面


MainActivity.java


自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面


ProgressView .java


自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面

自定义View之炫酷的成绩展示界面


GitHub传送门:https://github.com/liuxinggen/CircleProgressProject


如何您想进技术群和大牛们交流,关注公众号在后台回复 “加群”,或者 “学习” 即可

作者:Android_gen

链接: http://www.jianshu.com/p/03022c1306fb
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

自定义View之炫酷的成绩展示界面—– 由   分享

如果您觉得不错,请别忘了分享到您的朋友圈让更多的人看到!! 您的举手之劳,就是对我最好的支持,非常感谢!

自定义View之炫酷的成绩展示界面

每日英文

They say that time changes things, but you actually have to change them yourself. When you change, everything else changes.

人们总说时间能改变一切,但事实上我们必须靠自己去改变。自己变了,其他一切也才会变。


乐乐有话说

昨日渐多,明日愈少,今日还在,不增不减,这就是人生。


自定义View之炫酷的成绩展示界面


推荐阅读




知识星球
这里聚集了业界内的大牛,值得各位大牛的加入!

自定义View之炫酷的成绩展示界面 

看完本文有收获?请转发分享给更多人
关注「杨守乐」,提升编程技能

【QQ技术群】279126311 []
【QQ技术群】484572225 [未]

以上就是:自定义View之炫酷的成绩展示界面 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论