因为偶尔关注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

  1. public LotteryView(Context context) {
  2. this(context, null);
  3. }
  4.  
  5. public LotteryView(Context context, AttributeSet attrs) {
  6. this(context, attrs, 0);
  7. }
  8.  
  9. public LotteryView(Context context, AttributeSet attrs, int defStyleAttr) {
  10. super(context, attrs, defStyleAttr);
  11. init(context, attrs);
  12. }

  在init方法中可以做一些初始化的操作,比如需要用的颜色值,画笔Paint, 宽高信息等,如果有自定义属性,也可以在init方法中处理。

  接着可以设定View的宽高信息,这里我们将View设置为正方形

  

  1. @Override
  2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  3. //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  4. setMeasuredDimension(mSelfTotalWidth, mSelfTotalWidth);
  5. }

  调用setMeasureDimension方法,宽高都设置为 mSelfTotalWidth。这里我们宽高是限定的值,所以不需要的处理不同测量模式的情况,如果是其他自定义View要支持wrap_content属性,需要在onMeasure方法中自行处理

  第一步 :绘制外层带圆角的圆环

  

  1. /** 外层带圆角矩形圆环 */
  2. private void drawOuterRoundCircle(Canvas canvas) {
  3. canvas.save();
  4. canvas.clipRect(
  5. mOuterCircleWidth + getPaddingLeft(),
  6. mOuterCircleWidth + getPaddingTop(),
  7. mSelfTotalWidth - mOuterCircleWidth - getPaddingRight(),
  8. mSelfTotalWidth - mOuterCircleWidth - getPaddingBottom(),
  9. Region.Op.DIFFERENCE);
  10.  
  11. canvas.drawRoundRect(
  12. getPaddingLeft(),
  13. getPaddingTop(),
  14. mSelfTotalWidth - getPaddingRight(),
  15. mSelfTotalWidth - getPaddingBottom(),
  16. 18, 18, mOuterCirclePaint);
  17. canvas.restore();
  18. }

  

  绘制外层圆环中的小圆圈

  1. private void drawOuterDecorateSmallCircle(Canvas canvas) {
  2. int result = mInvalidateCircleCount % 2;
  3.  
  4. // top
  5. int x = 0, y = 0;
  6. int sideSize = mSelfTotalWidth - mOuterCircleWidth * 2 - getPaddingLeft() - getPaddingRight(); // 除去最外边圆环后的边长
  7. for (int i = 0; i < 10; i++) {
  8. mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
  9. x = mOuterCircleWidth + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingLeft();
  10. y = (mOuterCircleWidth - mSmallCircleRadius * 2) / 2 + mSmallCircleRadius + getPaddingTop();
  11. canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
  12. }
  13.  
  14. // bottom
  15. for (int i = 0; i < 10; i++) {
  16. mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
  17. x = mOuterCircleWidth + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingLeft();
  18. y = mSelfTotalWidth - mOuterCircleWidth + (mOuterCircleWidth - mSmallCircleRadius * 2) / 2 + mSmallCircleRadius - getPaddingBottom();
  19. canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
  20. }
  21.  
  22. // left
  23. for(int i = 0; i < 9; i++) {
  24. mSmallCirclePaint.setColor(i % 2 == (result == 0 ? 1 : 0) ? mSmallCircleYellowColor : mSmallCircleBlueColor);
  25. x = mOuterCircleWidth / 2 + getPaddingLeft();
  26. y = mOuterCircleWidth*2 + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingTop();
  27. canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
  28. }
  29.  
  30. // right
  31. for(int i = 0; i < 9; i++) {
  32. mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
  33. x = mSelfTotalWidth - mOuterCircleWidth / 2 - getPaddingRight();
  34. y = mOuterCircleWidth*2 + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingTop();
  35. canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
  36. }
  37. }

  

  第二步:绘制内部的圆角矩形,即卡片所在区域的背景

  1. private void drawInnerBackground(Canvas canvas) {
  2. canvas.drawRect(mOuterCircleWidth + getPaddingLeft(), mOuterCircleWidth + getPaddingTop(),
  3. mSelfTotalWidth - mOuterCircleWidth - getPaddingRight(),
  4. mSelfTotalWidth - mOuterCircleWidth - getPaddingBottom(), mInnerPaint);
  5. }

  第三步: 绘制内部小卡片

  1. private void drawInnerCards(Canvas canvas) {
  2. int left = 0, top = 0, right = 0, bottom = 0;
  3. int spaceNum = 0;
  4. for(int i = 0 ; i < 9 ; i++) {
  5. spaceNum = i % 3 + 1;
  6. left = mOuterCircleWidth + mInnerCardWidth * (i%3) + mInnerCardSpace * spaceNum + getPaddingLeft();
  7. top = mOuterCircleWidth + mInnerCardWidth * (i/3) +mInnerCardSpace * (i/3 + 1) + getPaddingTop();
  8. right = left + mInnerCardWidth;
  9. bottom = top + mInnerCardWidth;
  10. if(!mHadInitial) {
  11. mCardPositionInfoList.add(new Pair(new Pair(left, right), new Pair(top, bottom)));
  12. }
  13. drawInnerRoundCard(canvas, left, top, right, bottom, i);
  14. }
  15. mHadInitial = true;
  16. }

  

  全部绘制完成后,在onTouchEvent中处理点击事件即可,如何判定我们点击的是抽奖的区域,这里使用对比位置信息的方法,

  如下,

  1. private int getTouchPositionInCardList(int x, int y) {
  2. if(mCardPositionInfoList != null) {
  3. int index = 1;
  4. for (Pair<Pair<Integer, Integer>,Pair<Integer, Integer>> pair : mCardPositionInfoList) {
  5. if(x > pair.first.first && x < pair.first.second && y > pair.second.first && y < pair.second.second) {
  6. return index;
  7. }
  8. index++;
  9. }
  10. }
  11. return 0;
  12. }

  将每一个小卡片的坐标信息(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

Android 自定义View实现QQ运动积分抽奖转盘的更多相关文章

  1. Android 自定义View合集

    自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/ ...

  2. android自定义View之仿通讯录侧边栏滑动,实现A-Z字母检索

    我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体 ...

  3. Android 自定义 View 圆形进度条总结

    Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...

  4. Android自定义View(CustomCalendar-定制日历控件)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/54020386 本文出自:[openXu的博客] 目录: 1分析 2自定义属性 3onMeas ...

  5. Android自定义View(RollWeekView-炫酷的星期日期选择控件)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

  6. Android自定义View(LimitScrollerView-仿天猫广告栏上下滚动效果)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53303872 本文出自:[openXu的博客] 1分析 2定义组合控件布局 3继承最外层控件 ...

  7. Android自定义View(LineBreakLayout-自动换行的标签容器)

      最近一段时间比较忙,都没有时间更新博客,今天公司的事情忙完得空,继续为我的自定义控件系列博客添砖加瓦.本篇博客讲解的是标签自动换行的布局容器,正好前一阵子有个项目中需要,想了想没什么难度就自己弄了 ...

  8. Android自定义View实战(SlideTab-可滑动的选择器)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/52178553 本文出自:[openXu的博客] 目录: 初步分析重写onDraw绘制 重写o ...

  9. 简单说说Android自定义view学习推荐的方式

    这几天比较受关注,挺开心的,嘿嘿. 这里给大家总结一下学习自定义view的一些技巧.  以后写自定义view可能不会写博客了,但是可以开源的我会把源码丢到github上我的地址:https://git ...

随机推荐

  1. 201521123087 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问)1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么 ...

  2. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  3. Spring第九篇【Spring与Hibernate整合】

    前言 前面已经学习了如何使用Spring与Struts2进行整合,本博文主要讲解如何使用Spring对Hibernate进行整合 Spring和Hibernate整合的关键点: SessionFact ...

  4. Windows的文件权限 研究笔记

    最近公司的一台设备中了病毒,杀了又出现,总是破坏机器上面运行的程序. 想着研究下文件权限,把文件设为只读,让病毒破坏不了即可. 于是开始了实验1: 首先建立一个txt文件,查看权限: 可以看到User ...

  5. iOS多线程编程

    废话不多说,直接上干货.先熟悉一下基本知识,然后讲一下常用的两种,NSOperation和GCD. 一.基础概念 进程: 狭义定义:进程是正在运行的程序的实例(an instance of a com ...

  6. 搬瓦工修改自带ss密码和端口

    如果是从控制面板那里直接点击安装的ss,只需要修改这两个文件: 修改端口 /root/.kiwivm-shadowsocks-port修改密码 /root/.kiwivm-shadowsocks-pa ...

  7. 第5章 不要让线程成为脱缰的野马(Keeping your Threads on Leash) ----初始化一个线程

    使用线程的一个常见问题就是如何能够在一个线程开始运行之前,适当地将它初始化.初始化最常见的理由就是为了调整优先权.另一个理由是为了在SMP 系统中设定线程比较喜欢的 CPU.第10 章谈到 MFC 时 ...

  8. 支持向量机SVM(一)

    [转载请注明出处]http://www.cnblogs.com/jerrylead 1 简介 支持向量机基本上是最好的有监督学习算法了.最开始接触SVM是去年暑假的时候,老师要求交<统计学习理论 ...

  9. Vim的基本使用(二)

    本文为原创文章,转载请标明出处 目录 11.可视模式 12.指定计数 13.重复命令 14.外部命令 15.命令行编辑 16.文件编辑 17.分割窗口 18.GUI命令 19.配置 20.Vim Ch ...

  10. 关于xamarin.forms 中 list 的loadmore

    前言 最近几天在研究上拉加载啊,下拉刷新啊什么的.然而坑爹的事情总是那么多.在xamarin.forms中,list自带的,并没有上拉加载的这个属性(难道当初他们封装方法时,就不会想到数据多了会咋整吗 ...