Android自定义View实现QQ运动积分转盘抽奖功能
因为偶尔关注qq运动, 看到qq运动的积分抽奖界面比较有意思,所以就尝试用自定义view实现了下,原本想通过开发者选项查看下界面的一些信息,后来发现积分抽奖界面是在webview中展示的,应该是在h5页面中用js代码实现的,暂时不去管它了。
这里的自定义view针对的是继承自view的情况,你可以将canvas想象为画板, paint为画笔,自定义view的过程和在画板上用画笔作画其实类似,想象在画板上作画的过程,你要画一个多大图形(对应view的测量 onmeasure方法),你要画什么样的图形,比如圆形方形等等(对应view的ondraw方法),在掌握了view的一些基础概念(位置参数、触摸事件、滑动),测量模式、事件分发机制、绘制流程等知识后,自定义view的时候就不觉得复杂了。
不管是多么复杂的view,其内部基本都可以拆分至一个个小单元,比如如下的qq运动积分抽奖画面,(qq --> 动态 --> 运动 --> 我 --> 积分)
这里我们只关注抽奖的转盘,因为是截图没有动画效果,具体可以在自己的手机上查看下。这个抽奖的界面看似复杂,其实可以分为几个部分
1. 最外层圆环,其中有小圆圈闪动
2, 内部圆角矩形
3. 内部圆角卡片(包含一个图片或说明文字)
第一步:我们要继承view类, 如果需要自定义属性则应该实现带三个参数的构造方法,这里将自定义view命名为 lotteryview
public lotteryview(context context) { this(context, null); } public lotteryview(context context, attributeset attrs) { this(context, attrs, 0); } public lotteryview(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); init(context, attrs); }
在init方法中可以做一些初始化的操作,比如需要用的颜色值,画笔paint, 宽高信息等,如果有自定义属性,也可以在init方法中处理。
接着可以设定view的宽高信息,这里我们将view设置为正方形
@override protected void onmeasure(int widthmeasurespec, int heightmeasurespec) { //super.onmeasure(widthmeasurespec, heightmeasurespec); setmeasureddimension(mselftotalwidth, mselftotalwidth); }
调用setmeasuredimension方法,宽高都设置为 mselftotalwidth。这里我们宽高是限定的值,所以不需要的处理不同测量模式的情况,如果是其他自定义view要支持wrap_content属性,需要在onmeasure方法中自行处理
第一步:绘制外层带圆角的圆环
/** 外层带圆角矩形圆环 */ private void drawouterroundcircle(canvas canvas) { canvas.save(); canvas.cliprect( moutercirclewidth + getpaddingleft(), moutercirclewidth + getpaddingtop(), mselftotalwidth - moutercirclewidth - getpaddingright(), mselftotalwidth - moutercirclewidth - getpaddingbottom(), region.op.difference); canvas.drawroundrect( getpaddingleft(), getpaddingtop(), mselftotalwidth - getpaddingright(), mselftotalwidth - getpaddingbottom(), 18, 18, moutercirclepaint); canvas.restore(); }
绘制外层圆环中的小圆圈
private void drawouterdecoratesmallcircle(canvas canvas) { int result = minvalidatecirclecount % 2; // top int x = 0, y = 0; int sidesize = mselftotalwidth - moutercirclewidth * 2 - getpaddingleft() - getpaddingright(); // 除去最外边圆环后的边长 for (int i = 0; i < 10; i++) { msmallcirclepaint.setcolor(i % 2 == result ? msmallcircleyellowcolor : msmallcirclebluecolor); x = moutercirclewidth + (sidesize - msmallcircleradius * 2 * 9) / 9 * i + msmallcircleradius * 2 * i + getpaddingleft(); y = (moutercirclewidth - msmallcircleradius * 2) / 2 + msmallcircleradius + getpaddingtop(); canvas.drawcircle(x, y, msmallcircleradius, msmallcirclepaint); } // bottom for (int i = 0; i < 10; i++) { msmallcirclepaint.setcolor(i % 2 == result ? msmallcircleyellowcolor : msmallcirclebluecolor); x = moutercirclewidth + (sidesize - msmallcircleradius * 2 * 9) / 9 * i + msmallcircleradius * 2 * i + getpaddingleft(); y = mselftotalwidth - moutercirclewidth + (moutercirclewidth - msmallcircleradius * 2) / 2 + msmallcircleradius - getpaddingbottom(); canvas.drawcircle(x, y, msmallcircleradius, msmallcirclepaint); } // left for(int i = 0; i < 9; i++) { msmallcirclepaint.setcolor(i % 2 == (result == 0 ? 1 : 0) ? msmallcircleyellowcolor : msmallcirclebluecolor); x = moutercirclewidth / 2 + getpaddingleft(); y = moutercirclewidth*2 + (sidesize - msmallcircleradius * 2 * 9) / 9 * i + msmallcircleradius * 2 * i + getpaddingtop(); canvas.drawcircle(x, y, msmallcircleradius, msmallcirclepaint); } // right for(int i = 0; i < 9; i++) { msmallcirclepaint.setcolor(i % 2 == result ? msmallcircleyellowcolor : msmallcirclebluecolor); x = mselftotalwidth - moutercirclewidth / 2 - getpaddingright(); y = moutercirclewidth*2 + (sidesize - msmallcircleradius * 2 * 9) / 9 * i + msmallcircleradius * 2 * i + getpaddingtop(); canvas.drawcircle(x, y, msmallcircleradius, msmallcirclepaint); } }
第二步:绘制内部的圆角矩形,即卡片所在区域的背景
private void drawinnerbackground(canvas canvas) { canvas.drawrect(moutercirclewidth + getpaddingleft(), moutercirclewidth + getpaddingtop(), mselftotalwidth - moutercirclewidth - getpaddingright(), mselftotalwidth - moutercirclewidth - getpaddingbottom(), minnerpaint); }
第三步: 绘制内部小卡片
private void drawinnercards(canvas canvas) { int left = 0, top = 0, right = 0, bottom = 0; int spacenum = 0; for(int i = 0 ; i < 9 ; i++) { spacenum = i % 3 + 1; left = moutercirclewidth + minnercardwidth * (i%3) + minnercardspace * spacenum + getpaddingleft(); top = moutercirclewidth + minnercardwidth * (i/3) +minnercardspace * (i/3 + 1) + getpaddingtop(); right = left + minnercardwidth; bottom = top + minnercardwidth; if(!mhadinitial) { mcardpositioninfolist.add(new pair(new pair(left, right), new pair(top, bottom))); } drawinnerroundcard(canvas, left, top, right, bottom, i); } mhadinitial = true; }
全部绘制完成后,在ontouchevent中处理点击事件即可,如何判定我们点击的是抽奖的区域,这里使用对比位置信息的方法,如下
private int gettouchpositionincardlist(int x, int y) { if(mcardpositioninfolist != null) { int index = 1; for (pair<pair<integer, integer>,pair<integer, integer>> pair : mcardpositioninfolist) { if(x > pair.first.first && x < pair.first.second && y > pair.second.first && y < pair.second.second) { return index; } index++; } } return 0; }
将每一个小卡片的坐标信息(left,top, right, bottom)信息,保存在 arraylist<pair<pair<integer, integer>,pair<integer, integer>>> mcardposttioninfolist 中, 当点击view时获取到点击的x y 坐标和
list中保存的坐标信息做对比,如果index == 5 ,则说明点击的是抽奖所在的小卡片区域。
代码托管在: https://github.com/aquarius520/lotteryview 欢迎star fork
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。