您好,欢迎来到学长源码!
热门推荐: html模板 网站模板 magento主题 织梦模板 微信小程序 h5小游戏 Linux教程 源码教程 数据库教程 Magento 2文档 android教程 IOS教程 DedeCMS文档 微信开发

JSP源码

C#源码

企业网站

Android自定义View实现仿QQ转盘抽奖功能实例

分类:移动开发 来源:网络收集 发布:学长源码 时间:2017-10-26

因为偶尔关注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 ,则说明点击的是抽奖所在的小卡片区域。

转载请注明:学长源码 » Android自定义View实现仿QQ转盘抽奖功能实例

上一篇 下一篇

图文推荐