当前位置： 移动技术网 > IT编程>移动开发>Android > Android自定义View实现QQ运动积分转盘抽奖功能

Android自定义View实现QQ运动积分转盘抽奖功能

2019年07月24日  | 移动技术网IT编程  | 我要评论

125卡盟平台,爱兼职网,撒旦冷枭的眷宠

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网