Android-自定义幸运抽奖转盘

最新推荐文章于 2021-05-26 01:54:55 发布
最新推荐文章于 2021-05-26 01:54:55 发布
阅读量2.2k 收藏 6
点赞数
分类专栏： android 文章标签： android-自定义view 抽奖转盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23286245/article/details/70172452
版权

效果图：这里写图片描述

好久没有写博客了，在帮朋友修改项目的时候偶然发现了抽奖转盘，觉得挺好玩儿，就自己写了一个，为此我还特意贡献出了自己的女神们，哈哈。。。
项目参考了鸿洋的博客，在此特别感谢鸿洋大神的帮助，参考博客：http://blog.csdn.net/lmj623565791/article/details/41722441

这个自定义控件与鸿洋所写的不同点在于：
鸿洋牌抽奖转盘实现方式：
1.鸿洋采用继承并重写SurfaceView来实现，通过在子线程中不断绘制来实现转盘旋转。
2.抽奖图片采用正视角，也就是旋转过程中所看到的图片都是竖立的。
3.转盘集成在一个类中，引用时需要在xml中添加点击抽奖图片和指针。
我自己的实现方式：
1.采用传统的继承View的方式来绘制转盘，在子线程中发送旋转指令，然后在UI线程中使用View旋转动画来进行旋转。—-View旋转动画底层也是通过重新绘制实现
2.抽奖图片采用相对模块正视角。—这个纯属个人视觉爱好
3.将点击抽奖图片和绘制的转盘以及抽奖回调封装到一起，方便直接调用。
我将这个控件分布于三个类中，以下提供代码：
绘制转盘的LuckyRoller类：

package com.lxh.custom.view.luckRoller;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import java.util.List;

/**
 * Created by lxh on 2017/3/22.
 * QQ-632671653
 */

public class LuckyRoller extends View {


    /**
     * padding值
     */
    private int mPaddingLeft;

    /**
     * 控件中心坐标
     */
    private int centerX, centerY;

    /**
     * 控件宽度
     */
    private int with;

    /**
     * 外圆环宽度
     */
    private int circleWith;

    /**
     * 圆环半径
     */
    private int circleRadius;

    /**
     * 转盘半径
     */
    private int rollerRadius;

    /**
     * 绘制盘块的范围
     */
    private RectF mRange;

    /**
     * 盘块的个数
     */
    private int mItemCount;

    /**
     * 与文字对应图片的bitmap数组
     */
    private Bitmap[] mImgsBitmap;

    /**
     * 转盘内容实体集合
     */
    private List<LuckyBean> luckyBeanList;

    /**
     * 文字的大小
     */
    private float mTextSize = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());


    public LuckyRoller(Context context) {
        super(context);
    }

    public LuckyRoller(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public LuckyRoller(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        with = MeasureSpec.getSize(widthMeasureSpec);//控件宽度
        setMeasuredDimension(with, with);//重设控件宽高
        centerX = getMeasuredWidth() / 2; //控件X坐标
        centerY = getMeasuredHeight() / 2;//控件Y坐标
        circleWith = with / 12;     //外圆环的宽度
        mPaddingLeft = getPaddingLeft();  //控件padding值
        circleRadius = centerX - mPaddingLeft;  //圆环的半径
        rollerRadius = circleRadius - circleWith / 2;  //扇形块的半径
        luckyBeanList = LuckRollerView.dataList;   //填充的数据
        if (luckyBeanList!=null&&luckyBeanList.size()>=1){
            mItemCount = luckyBeanList.size();
            if (0 != mItemCount) {
                // 圆弧的绘制范围
                mRange = new RectF(centerX - circleRadius + circleWith / 2, centerY - circleRadius + circleWith / 2,
                        centerX + circleRadius - circleWith / 2, centerY + circleRadius - circleWith / 2);
                // 初始化图片
                mImgsBitmap = new Bitmap[mItemCount];
                for (int i = 0; i < mItemCount; i++) {
                    mImgsBitmap[i] = BitmapFactory.decodeResource(getResources(), luckyBeanList.get(i).getImg());
                }
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (0 != mItemCount) {
            Paint paint = new Paint();
            drawCircle(canvas, paint);
            Paint rollerPaint = new Paint();
            rollerPaint.setAntiAlias(true);//抗锯齿
            rollerPaint.setDither(true);//防抖动
            Paint mTextPaint = new Paint();
            mTextPaint.setColor(0xFFffffff);
            mTextPaint.setTextSize(mTextSize);
            float tmpAngle = 0;
            float sweepAngle = (float) (360 / 6);
            for (int i = 0; i < 6; i++) {
                drawRoller(canvas, rollerPaint, i, tmpAngle, sweepAngle);
                drawText(tmpAngle, sweepAngle, luckyBeanList.get(i).getName(), canvas, mTextPaint);
                drawIcon(tmpAngle, mImgsBitmap[i], canvas);
                tmpAngle += sweepAngle;
            }
        }
    }


    /**
     * 绘制文本
     *
     * @param startAngle
     * @param sweepAngle
     * @param string
     */
    private void drawText(float startAngle, float sweepAngle, String string, Canvas mCanvas, Paint mTextPaint) {
        Path path = new Path();
        path.addArc(mRange, startAngle, sweepAngle);
        float textWidth = mTextPaint.measureText(string);
        // 利用水平偏移让文字居中
        float hOffset = (float) (rollerRadius * Math.PI / mItemCount - textWidth / 2);// 水平偏移
        float vOffset = rollerRadius / 6;// 垂直偏移
        mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);
    }


    /**
     * 根据给定的宽和高进行缩放
     *
     * @param origin    原图
     * @param newWidth  新图的宽
     * @param newHeight 新图的高
     * @return new Bitmap
     */
    private Bitmap scaleBitmap(Bitmap origin, int newWidth, int newHeight) {
        if (origin == null) {
            return null;
        }
        int height = origin.getHeight();
        int width = origin.getWidth();
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        Bitmap newBM = Bitmap.createBitmap(origin, 0, 0, width, height, matrix, false);
        return newBM;
    }


    /**
     * 绘制icon图片
     *
     * @param startAngle
     * @param bitmap
     * @param mCanvas
     */
    private void drawIcon(float startAngle, Bitmap bitmap, Canvas mCanvas) {
        // 设置图片的宽度为直径的1/8
        int imgWidth = rollerRadius / 4;
        // 确定绘制图片的位置
        int x = centerX;
        int y = (int) (centerY - rollerRadius / 1.8);
        //将位图进行缩放
        Bitmap mBitmap = scaleBitmap(bitmap, imgWidth, imgWidth);
        mCanvas.save();//保存当前画布状态
        mCanvas.rotate(startAngle + 120, centerX, centerY);//画布绕中心点旋转
        mCanvas.drawBitmap(mBitmap, x - imgWidth / 2, y - imgWidth / 2, null);//绘制位图
        mCanvas.restore();//恢复画图状态到保存前
    }

    /**
     * 绘制圆环
     *
     * @param mCanvas
     * @param mPaint
     */
    private void drawCircle(Canvas mCanvas, Paint mPaint) {
        mPaint.setAntiAlias(true);//抗锯齿
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(circleWith);
        mPaint.setStyle(Paint.Style.STROKE);
        mCanvas.drawCircle(centerX, centerY, circleRadius - circleWith / 2, mPaint);
    }

    /**
     * 绘制转盘中的扇形
     *
     * @param mCanvas
     * @param mPaint
     * @param i
     * @param tmpAngle
     * @param sweepAngle
     */
    private void drawRoller(Canvas mCanvas, Paint mPaint, int i, float tmpAngle, float sweepAngle) {
        // 绘制模块
        mPaint.setColor(luckyBeanList.get(i).getColor());
        mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true, mPaint);
    }
}

转盘内容实体类LuckyBean：

package com.lxh.custom.view.luckRoller;

import android.graphics.Bitmap;

/**
 * Created by lxh on 2017/3/29.
 * QQ-632671653
 */

public class LuckyBean {

    private int img;
    private String name;
    private int Color;
    private Bitmap bitmap;

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getColor() {
        return Color;
    }

    public void setColor(int color) {
        Color = color;
    }

    public Bitmap getBitmap() {
        return bitmap;
    }

    public void setBitmap(Bitmap bitmap) {
        this.bitmap = bitmap;
    }
}

继承点击抽奖图片和转盘，以及旋转实现的LuckRollerView：

package com.lxh.custom.view.luckRoller;

import android.content.Context;
import android.os.CountDownTimer;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import com.lxh.custom.R;
import java.util.List;

/**
 * Created by lxh on 2017/3/24.
 * QQ-632671653
 */

public class LuckRollerView extends RelativeLayout {

    /**
     * 转盘控件
     */
    private LuckyRoller luckyRoller;
    /**
     * 开始图片
     */
    private ImageView imageView;
    /**
     * 旋转角度
     */
    private int rotatiion = 0;

    /**
     * 是否循环标志
     */
    private boolean isRunning = false;
    /**
     * 结果回调监听
     */
    private OnLuckyRollerListenner onLuckyRollerListenner;
    /**
     * 是否已经开始
     */
    private boolean isStart = false;
    /**
     * 是否第一次开始
     */
    private boolean isFirst = true;
    /**
     * 速度控制
     */
    private int speed = 0,sleep = 4;

    /**
     * 转盘数据
     */
    public static List<LuckyBean> dataList;

    public LuckRollerView(Context context) {
        super(context);
    }

    public LuckRollerView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public LuckRollerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * 利用handler切换到UI线程进行转盘旋转
     */
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case 1:
                    rotatiion += speed;
                    luckyRoller.setRotation(rotatiion);
                    break;
            }
        }
    };

    /**
     * 任务线程
     */
    private Thread thread = new Thread(new Runnable() {
        @Override
        public void run() {
            while (isRunning) {
                if (isStart) {
                    handler.sendEmptyMessage(1);
                    try {
                        thread.sleep(sleep);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    });



    /**
     * 初始化控件
     * @param context
     */
    private void initView(Context context) {
        luckyRoller = new LuckyRoller(context);
        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        luckyRoller.setLayoutParams(layoutParams);
        imageView = new ImageView(context);
        LayoutParams imgLp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        imgLp.addRule(RelativeLayout.CENTER_IN_PARENT);
        imageView.setLayoutParams(imgLp);
        imageView.setImageResource(R.mipmap.start);
        imageView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isStart) {
                    pause();
                } else {
                    startOrResume();
                }
            }
        });
        addView(luckyRoller);
        addView(imageView);
    }

    /**
     * 根据旋转角度确定选中区域
     * @param rotatiion
     */
    public void calInExactArea(int rotatiion) {
        // 让指针从水平向右开始计算
        float rotate = rotatiion+90;
        int mItemCount = dataList.size();
        rotate %= 360.0;//相对于原位置的旋转角度
        for (int i = 0; i < mItemCount; i++) {
            // 每个的中奖范围
            float from = 360 - (i + 1) * (360 / mItemCount);
            float to = from + 360 - (i) * (360 / mItemCount);
            if ((rotate > from) && (rotate <= to)) {
                if (onLuckyRollerListenner!=null){
                    onLuckyRollerListenner.onFinish(dataList.get(i).getName());
                }
                return;
            }
        }
    }

    /**
     * 开始或者恢复旋转
     */
    private void startOrResume() {
        if (isFirst) {
            isRunning = true;
            isStart = true;
            isFirst = false;
            thread.start();
        } else {
            resume();
        }
        countDownTimer.start();
        stopViewTimer.start();
    }

    private void resume() {
        isStart = true;
    }

    /**
     * 暂停
     */
    private void pause() {
        isStart = false;
        speed = 0;
        imageView.setImageResource(R.mipmap.start);
        calInExactArea(rotatiion);
    }

    /**
     * 为控件设置数据
     * @param context
     * @param data
     */
    public void setData(Context context,List<LuckyBean> data){
        this.dataList = data;
        initView(context);
    }


    /**
     * 通过计时器来设定速度和最短旋转时间
     */
    private CountDownTimer countDownTimer = new CountDownTimer(sleep*1000,1000) {
        @Override
        public void onTick(long millisUntilFinished) {
            speed+=1;
            if (sleep>1)
            sleep-=1;
            imageView.setClickable(false);
            imageView.setImageResource(R.mipmap.stop2);
        }

        @Override
        public void onFinish() {
            imageView.setClickable(true);
            imageView.setImageResource(R.mipmap.stop);
        }
    };

    /**
     * 通过计时器来设定旋转最长时限
     */
    private CountDownTimer stopViewTimer = new CountDownTimer(10000,1000) {
        @Override
        public void onTick(long millisUntilFinished) {

        }

        @Override
        public void onFinish() {
            if (isStart){
                imageView.performClick();
            }
        }
    };

    /**
     * 中断线程，回收内存
     */
    public void destory(){
        thread.interrupt();
    }

    /**
     * 设置监听
     * @param onLuckyRollerListenner
     */
    public void setOnLuckyRollerListenner(OnLuckyRollerListenner onLuckyRollerListenner) {
        this.onLuckyRollerListenner = onLuckyRollerListenner;
    }

    public interface OnLuckyRollerListenner{
        void onFinish(String data);
    }

}

使用方式：
1.在xml中调用：

<com.lxh.custom.view.luckRoller.LuckRollerView
        android:id="@+id/luckRollerView"
        android:layout_width="500dp"
        android:layout_height="500dp"/>

2.在相应java类中进行初始化：

/**
     * 与文字对应的图片
     */
    private int[] mImgs = new int[]{R.mipmap.fanbingbing, R.mipmap.libb,
            R.mipmap.liuss, R.mipmap.lyf, R.mipmap.dlrb,R.mipmap.linzl};
    /**
     * 抽奖的文字
     */
    private String[] mStrs = new String[]{"范冰冰", "李冰冰", "刘诗诗", "刘亦菲",
            "迪丽热巴", "林志玲"};
    /**
     * 每个盘块的颜色
     */
    private int[] mColors = new int[]{0xFFFFC300, 0xFFF17E01, 0xFFFFC300,
            0xFFF17E01, 0xFFFFC300, 0xFFF17E01};

    private void initData(){
        for (int i = 0;i<mStrs.length;i++){
            LuckyBean luckyBean = new LuckyBean();
            luckyBean.setName(mStrs[i]);
            luckyBean.setColor(mColors[i]);
            luckyBean.setImg(mImgs[i]);
            luckyBeanList.add(luckyBean);
        }
    }


    private void initView() {
        initData();
        luckRollerView = (LuckRollerView) findViewById(R.id.luckRollerView);
        luckRollerView.setData(mContext, luckyBeanList);
        luckRollerView.setOnLuckyRollerListenner(new LuckRollerView.OnLuckyRollerListenner() {
            @Override
            public void onFinish(String data) {
                Toast.makeText(mContext, "恭喜你抽中了-" + data + "-", Toast.LENGTH_LONG).show();
            }
        });
    }

以上代码都有详细注释，因此就不在赘述。已将项目完整代码上传至github。有需要可自行下载。
github地址：https://github.com/lxh632671653/custom

这个控件已经写好很久了，因为私人原因未能及时发布博客，望各位大佬海涵。谢谢！技术交流请加QQ：632671653

赖旭辉
关注
专栏目录
【python-自定义抽奖大转盘】
zhen7460693的专栏
08-23 1098
可自定义大转盘内容，多种转盘内容一键加载
android自定义抽奖转盘
LZH1217的专栏
09-06 4704
自定义抽奖转盘，可以根据添加的数据自动生成抽奖的item选项，设置中奖的item（当前是以随机数设置，生成一个不大于抽奖item的数据，将该数据设置成中奖的选项）
Android自定义转盘抽奖轮盘demo
最新发布
02-20
Android转盘抽奖模块，实现了转盘转动，自定义转盘的控件，可以自定义背景样式，也可以实现一张背景图，可以自定义奖品字体大小，奖品图标，可以自定义转盘结束时间
《Android自定义控件》TurntableView，抽奖转盘
陈少华的博客
01-13 1835
转载请标明出处：https://blog.csdn.net/m0_38074457/article/details/86433483 ，本文出自【陈少华的博客】 一、效果图 二、实现步骤 三、代码实现 1、attrs.xml中添加自定义控件的属性 &lt;declare-styleable name="TurntableView"&gt; &lt;!--转盘的...
Android SurfaceView实战 打造抽奖转盘
modabobo
12-04 897
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/41722441，本文出自：【张鸿洋的博客】 1、概述 今天给大家带来SurfaceView的一个实战案例，话说自定义View也是各种写，一直没有写过SurfaceView，这个玩意是什么东西？什么时候用比较好呢？ 可以看到SurfaceView也是继承了View，但是我们并不需要去...
Android抽奖转盘的实现
chuanao8829的博客
05-28 397
最近需要实现一个抽奖的控件，我简单搜索了下，感觉要不很多细节地方没有处理，要么根本就不能用。索性想自己实现个，从千图网搜了下，挑选了个自己比较喜欢的出来，psd打开后效果如下： 最终实现效果如下： 点击Go按钮自动滚动 随手势滚动 实现...
Android 抽奖转盘的实现
热门推荐
Nipuream
08-19 2万+
序言最近需要实现一个抽奖的控件，我简单搜索了下，感觉要不很多细节地方没有处理，要么，根本就不能用。索性想自己实现个，从千图网搜了下，挑选了个自己比较喜欢的出来，psd打开后效果如下： 最终实现效果如下： 点击Go按钮自动滚动： 随手势滚动： 实现的效果还不错，因为是模拟器加录制，画面可能会有些卡顿，真机其实蛮顺畅的，下面简单的讲讲实现的步骤。实现 1,绘制。首先第
幸运大转盘（Android实现）
01-09
Android实现的幸运大转盘。点击go开始旋转，再次点击后转盘停止
Android-LuckView幸运大转盘转盘抽奖
08-13
总之，"Android-LuckView幸运大转盘转盘抽奖"是一个展示Android自定义控件能力的实例，通过学习和实践，开发者可以掌握更多关于Android UI设计、动画编程以及事件处理的知识，提高自己的开发技能。
android自定义大转盘,android 代码绘制转盘抽奖的实现
weixin_29762229的博客
05-26 1259
android 代码绘制转盘抽奖的实现先上图第一个是 整体的布局xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent">android:id="@+id/myview"android:layout_width="m...
Android- 幸运大转盘游戏.rar
07-30
【Android 幸运大转盘游戏】是一款基于Android平台开发的互动娱乐应用，它通常用于抽奖活动或游戏，用户可以通过旋转转盘来获取随机的奖品。在这个项目中，开发者可能利用了Android SDK中的各种组件和功能来实现游戏...
Android自定义View实现抽奖转盘
01-05
本文实例为大家分享了Android自定义View实现抽奖转盘的具体代码，供大家参考，具体内容如下 public class LuckCircle extends SurfaceView implements SurfaceHolder.Callback,Runnable { private SurfaceHolder mHolder; private Canvas mCanvas; //用于绘制的线程 private Thread mThread; //线程开关的控制 private boolean isRunning; private String[] mStr = new
android抽奖转盘
08-26
通过自定义surfaceview来编写的一个抽奖转盘
Android抽奖转盘.rar
12-12
项目是安卓抽奖转盘的实现demo
Android SurfaceView抽奖转盘
02-02
通过Android SurfaceView，自定义的抽奖大转盘项目，浅显易懂，非常好用
安卓_转盘—抽奖
10-09
安卓，转盘，抽奖转盘示例，可通过给定转盘中各个块的概率，控制指针的指向
Android 幸运大转盘源码-IT计算机-毕业设计.zip
04-05
"Android 幸运大转盘源码"就是一个这样的实例，它是一个完整的Android应用项目，适用于学习和研究。这个源码提供了实现一个互动式、游戏化的界面——幸运大转盘的完整流程。 首先，我们要理解Android应用的基本结构...
android自定义抽奖,Android 抽奖活动 (自定义view实现) 转盘
weixin_31931045的博客
05-25 1109
/*** function: 自定义抽奖view*/public class PieView extends View {private static final StringTAG = PieView.class.getSimpleName();private String[]mStrings =new String[]{"继续加油", "保时捷911", "尴尬差点中奖","一辆自行车", "...
android开发：自定义控件之--抽奖转盘
Jarry的博客
09-27 1348
看网上也有些例子，看着挺有意思。本人之前面试的时候也遇到面试官询问这样的问题，那时候我其实没有清晰的思路，就大体说了下图形绘制过程，需要画笔、画布，设置下各自属性，可以画圆、画弧、画图、画线等。闲话不多说了，直接看看怎么实现的。 效果图：1.自定义TurnTableView，继承自View. 初始化的地方，主要是设置了下画笔的属性等。 // 初始化数据 private void in
Android自定义View：抽奖转盘实现详解
"Android自定义View实现抽奖转盘的详细步骤和关键代码示例" 在Android应用开发中，有时需要创建独特的交互效果，比如抽奖转盘。本教程将介绍如何通过自定义View来实现这样一个功能。首先，我们需要创建一个名为`...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值