自定义View——幸运转盘

最新推荐文章于 2023-03-20 15:57:52 发布

---月亮☽

最新推荐文章于 2023-03-20 15:57:52 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

分类专栏：个人文章标签：自定义View——幸运转盘

本文链接：https://blog.youkuaiyun.com/qq_43589991/article/details/84672158

个人专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了一种自定义转盘View的实现方法，通过继承View并利用Canvas绘制圆形、扇形及文字，实现了带有多种奖品选项的转盘游戏界面。文章提供了完整的代码示例，包括如何设置画笔样式、绘制元素以及实现转盘旋转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，第一步创建一个Class 继承View

public class zhuanpan extends View implements View.OnClickListener {
    private Paint mPaint;
    private int mWidth;
    private Context mcontext;
    private String[] contents = new String[]{"iPhoneX", "送购物券", "送家电", "马尔代夫三日游", "演唱会门票", "写真照","30G流量","腾讯会员"};
    public int[] colors = new int[]{Color.parseColor("#8EE5EE"), Color.parseColor("#FFD700"), Color.parseColor("#FFD39B"), Color.parseColor("#FF8247"), Color.parseColor("#FF34B3"), Color.parseColor("#F0E68C"),Color.parseColor("#FFD39B"), Color.parseColor("#FF8247")};
    private int start;
    private boolean first = true;

    public zhuanpan(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint=new Paint();
        mcontext=context;
        setOnClickListener(this);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //设置线条颜色
        mPaint.setColor(Color.BLUE);
        //设置字体大小
        mPaint.setTextSize(30);
        //设置空心
        mPaint.setStyle(Paint.Style.STROKE);
        //设置局齿轮
        mPaint.setAntiAlias(true);
        //设置空心线条的粗细
        mPaint.setStrokeWidth(4);
        //设置圆
        canvas.drawCircle(mWidth/2,mWidth/2,300,mPaint);


        //画扇形
        RectF rectF=new RectF(0,0,mWidth,mWidth);
        //设置实心
        mPaint.setStyle(Paint.Style.FILL);
        //填充颜色
        for(int i=0;i<colors.length;i++)
        {
            mPaint.setColor(colors[i]);
            int jd=i*45;
            canvas.drawArc(rectF,jd,45,true,mPaint);
        }


        mPaint.setColor(Color.BLACK);
        mPaint.setTextSize(35);
        for(int i=0;i<contents.length;i++)
        {
            int jd=i*45;
            Path path=new Path();
            path.addArc(rectF,jd,45);
            canvas.drawTextOnPath(contents[i],path,60,60,mPaint);
        }

      /*  canvas.drawLine(0,200,300,mWidth/2,mPaint);*/




    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(600,600);
        mWidth=getMeasuredWidth();
    }

    @Override
    public void onClick(View v) {
        Random random = new Random();
        int i = random.nextInt(3600);
        int j = random.nextInt(6666);

        RotateAnimation rotate = null;
        if (first){

            rotate=new RotateAnimation(0,i,mWidth/2,mWidth/2);
            start = i;
            first = false;
        }else {
            rotate=new RotateAnimation(start,i,mWidth/2,mWidth/2);
            int i1 = i % 360;
            start = i1;
        }


        //保留最后的位置 不回到原位
        rotate.setFillAfter(true);
        rotate.setDuration(j);
        rotate.setRepeatMode(0);
        rotate.setInterpolator(new LinearInterpolator());
        startAnimation(rotate)；
    }
}

2，第二步在activity_main.xml中引入

<com.example.zhuanpan.zhuanpan
    android:id="@+id/zp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"/>

可以在activity_main.xml这里自己添加一个指针图片

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerInParent="true"
    android:layout_marginTop="125dp"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:src="@drawable/abc" />

效果图
在这里插入图片描述