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设置为正方形
@Overrideprotected 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;// topint 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);}// bottomfor (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);}// leftfor(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);}// rightfor(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);}}
View Code
第二步:绘制内部的圆角矩形,即卡片所在区域的背景
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
转载于:https://www.cnblogs.com/sphere/p/7736807.html
Android 自定义View实现QQ运动积分抽奖转盘相关推荐
- android自定义计步器形状,Android自定义View仿QQ运动步数效果
本文实例为大家分享了Android QQ运动步数的具体代码,供大家参考,具体内容如下 今天我们实现下面这样的效果: 首先自定义属性: 自定义View代码如下: /** * Created by Mic ...
- 自定义View | 仿QQ运动步数进度效果
项目GitHub地址 思路 固定不动的蓝色大圆弧 动画变动的红色小圆弧 中间的步数文字显示 相关的自定义属性 比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属性给用户自 ...
- android动画 行星,Android自定义View之星球运动
Android自定义View之星球运动 欢迎大家访问我的个人博客 在dribbble闲逛的时候发现的一个有意思的星球运动的动画,刚好最近时间尚可,就简单实现了一下中间运动的部分,又是因为时间的原因,开 ...
- android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
- oracle number型步数,Android自定义View仿QQ计步器
自定义计步器 Android自定义View是Android开发中比较重要的一项,也是很多开发者比较怕的一个东西.其实只要认真去学习,自定义View其实没有那么可怕:相反的,我们还能从自定义View中找 ...
- 自定义View 仿QQ运动步数进度效果
1. 概述 我记得QQ之前是有一个,运动步数的进度效果,今天打开QQ一看发现没有了.具体效果我也不清楚了,我就按照自己大概的印象写一下,这一期我们主要是熟悉Paint画笔的使用: 2. 效果 ...
- 自定义View - 仿QQ运动步数效果
今天我们实现下面这样的效果: 首先自定义属性: <?xml version="1.0" encoding="utf-8"?> <resourc ...
- Android自定义View实现QQ气泡效果
首先我们来看一下最终的效果: 根据我们上边拆分出来的公式,我们分别看看每一个效果需要如何去实现: 红色圆:canvas.drawCircle 消息数字:canvas.drawText 拖拽粘性效果:c ...
- Android自定义view仿QQ的Tab按钮动效
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
最新文章
- 驱动学习之LED驱动框架
- NFV — 系统架构
- Leetcode 25 K个一组翻转链表 (每日一题 20210719)
- mysql忽略列,MySQL:使用DISTINCT时忽略选定的列
- Linux下修改swap的大小
- (八)限定某个目录禁止解析php、限制user_agent和PHP相关配置
- HDMI视频光端机传输故障如何调试?
- 京东数科公布11.11一小时战报:白条交易额10秒破亿
- 从数据库读取数据后输出XML
- 好程序员大数据入门学习之Hadoop技术优缺点
- [操作系统]Nachos4.1安装教程(docker+linux)
- VBA写入公式(4):数字转大写金额公式
- SWIG简介 | win10和Linux下的安装--亲测 | (一)
- Python 爬虫:抓取豆瓣top250电影数据
- 汉诺塔问题模拟实现代码
- 制作动态图表,没有比这个方法更简单的了
- Bit、Byte、KB
- ps纯色、渐变填充图层只能是灰色
- Unity调用Android封装的声网sdk
- Attention专场——(2)Self-Attention 代码解析
热门文章
- 小学计算机课5年级第一课,人教版(2015)小学信息技术 五年级下册 第1课 录制声音真轻松 教案...
- python中 的用法_详解python中@的用法
- php url传递变量,php – 在laravel中通过url传递变量
- oracle 会话实例,返璞归真:Oracle实例级别和会话级别的参数设置辨析
- python函数封装计算n运算_在Python里面怎么可以运算出999999999**999999999,求思路?...
- python 子串是否在字符串中_python七种方法判断字符串是否包含子串
- GTJ2018如何导出全部工程量_如何成为优秀的造价员?广联达编制内刊手册,造价员算量高手秘籍...
- 算法—振兴中华(C语言版)
- 计算机的网络与结构,计算机结构与组成29-网络.ppt
- ASCII码排序(C++)