devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

《Android自定义控件》TurntableView，抽奖转盘_android tableview

作者：盐析白兔 | 2024-03-22 08:37:55

赞

踩

android tableview

转载请标明出处：https://blog.csdn.net/m0_38074457/article/details/86433483 ，本文出自【陈少华的博客】

一、效果图

效果图

二、实现步骤

三、代码实现

1、attrs.xml中添加自定义控件的属性

  1.  <declare-styleable name="TurntableView">
  2.         <!--转盘的item数量-->
  3.         <attr name="pannum" format="integer" />
  4.         <!--转盘的item的文本-->
  5.         <attr name="names" format="reference" />
  6.         <!--转盘的本地图像地址-->
  7.         <attr name="icons" format="reference" />
  8.         <!--转盘背景的颜色-->
  9.         <attr name="colors" format="reference" />
  10.         <!--控件宽占屏幕宽的比例-->
  11.         <attr name="percentage" format="float" />
  12.     </declare-styleable>

2、控件的构造方法

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

initView方法中初始化控件的值

  1. /**
  2.      * 初始化view
  3.      *
  4.      * @param context
  5.      * @param attrs
  6.      */
  7.     private void initView(Context context, AttributeSet attrs) {
  8.         //手势识别对象
  9.         mDetector = new GestureDetectorCompat(context, new TurntableGestureListener());
  10.         //抗锯齿
  11.         mPaint.setAntiAlias(true);
  12.  
  13.         mScreenHeight = getResources().getDisplayMetrics().heightPixels;
  14.         mScreenWidth = getResources().getDisplayMetrics().widthPixels;
  15.  
  16.         TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TurntableView);
  17.         if (array != null) {
  18.             mPanNum = array.getInteger(R.styleable.TurntableView_pannum, 8);
  19.             int colorsId = array.getResourceId(R.styleable.TurntableView_colors, R.array.colors);
  20.             int namesArray = array.getResourceId(R.styleable.TurntableView_names, R.array.names);
  21.             int iconsArray = array.getResourceId(R.styleable.TurntableView_icons, R.array.icons);
  22.             mPercentage = array.getFloat(R.styleable.TurntableView_percentage, (float) 0.75);
  23.             int[] colors = context.getResources().getIntArray(colorsId);
  24.             String[] namesStrs = context.getResources().getStringArray(namesArray);
  25.             String[] iconsStrs = context.getResources().getStringArray(iconsArray);
  26.  
  27.             for (int i = 0; i < colors.length; i++) {
  28.                 mColors.add(colors[i]);
  29.             }
  30.  
  31.             for (int i = 0; i < namesStrs.length; i++) {
  32.                 mNamesStrs.add(namesStrs[i]);
  33.             }
  34.             List<Integer> iconLists = new ArrayList<>();
  35.             for (int i = 0; i < iconsStrs.length; i++) {
  36.                 iconLists.add(context.getResources().getIdentifier(iconsStrs[i], "mipmap", context.getPackageName()));
  37.             }
  38.             for (int i = 0; i < iconLists.size(); i++) {
  39.                 Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), iconLists.get(i));
  40.                 mBitmaps.add(bitmap);
  41.             }
  42.             array.recycle();
  43.         }
  44.     }

3、onMeasure和onSizeChanged控制控件和转盘的大小

  1.     @Override
  2.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  3.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  4.         //控制view的宽为屏幕宽的mPercentage
  5.         int viewWid = (int) ((float) mScreenWidth * mPercentage);
  6.         setMeasuredDimension(viewWid, viewWid);
  7.     }
  8.  
  9.     @Override
  10.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  11.         super.onSizeChanged(w, h, oldw, oldh);
  12.         mWid = w;
  13.         mHei = h;
  14.  
  15.         //让转盘的宽为view的宽，半径为view的宽的一半
  16.         mCenterX = mWid / 2;
  17.         mCenterY = mCenterX;
  18.         mRadius = mWid / 2;
  19.  
  20.         mOffsetAngle = (float) 360 / (float) mPanNum;
  21.     }

4、onDraw来绘制转盘

  1.     @Override
  2.     protected void onDraw(Canvas canvas) {
  3.         super.onDraw(canvas);
  4.         //画圆的背景颜色
  5.         drawBackground(canvas);
  6.         //画图片
  7.         drawImage(canvas);
  8.         //画文本
  9.         drawText(canvas);
  10.     }
  1.  /**
  2.      * 画圆的整体背景
  3.      *
  4.      * @param canvas
  5.      */
  6.     private void drawBackground(Canvas canvas) {
  7.         mPaint.setStyle(Paint.Style.FILL);
  8.         RectF rectF = new RectF(0, 0, mWid, mHei);
  9.  
  10.         float angle = mCurrentAngle;
  11.         for (int i = 0; i < mPanNum; i++) {
  12.             int yushu = i % mColors.size();
  13.             mPaint.setColor(mColors.get(yushu));
  14.             canvas.drawArc(rectF, angle, mOffsetAngle, true, mPaint);
  15.             angle = angle + mOffsetAngle;
  16.         }
  17.     }
  18.  
  19.     /**
  20.      * 画图像
  21.      *
  22.      * @param canvas
  23.      */
  24.     private void drawImage(Canvas canvas) {
  25.         //绘制图片开始的角度位置
  26.         float radian = mCurrentAngle + mOffsetAngle / (float) 2;
  27.         //使图像的宽度的一半为半径的1/7
  28.         float imageOffset = (float) mRadius / (float) 7;
  29.         for (int i = 0; i < mBitmaps.size(); i++) {
  30.             //计算图片中心位置的坐标
  31.             //Math.toRadians  是为了提高计算精度
  32.             float x = (float) (mCenterX + (float) mRadius * (float) 0.6 * Math.cos(Math.toRadians(radian)));
  33.             float y = (float) (mCenterY + (float) mRadius * (float) 0.6 * Math.sin(Math.toRadians(radian)));
  34.  
  35.             RectF rectF = new RectF(x - imageOffset, y - imageOffset, x + imageOffset, y + imageOffset);
  36.             canvas.drawBitmap(mBitmaps.get(i), null, rectF, mPaint);
  37.             radian = radian + mOffsetAngle;
  38.         }
  39.     }
  40.  
  41.     /**
  42.      * 画文本
  43.      *
  44.      * @param canvas
  45.      */
  46.     private void drawText(Canvas canvas) {
  47.         mPaint.setColor(Color.WHITE);
  48.         mPaint.setTextAlign(Paint.Align.CENTER);
  49.         mPaint.setTextSize(30);
  50.         RectF rectF = new RectF(0, 0, mWid, mHei);
  51.  
  52.         //计算text文本的高度
  53.         Paint.FontMetrics fm = mPaint.getFontMetrics();
  54.         float textHeight = fm.bottom - fm.top;
  55.  
  56.         float startAngle = mCurrentAngle;
  57.         for (int i = 0; i < mNamesStrs.size(); i++) {
  58.             //使文本根据，每个item的圆弧路径绘制
  59.             Path path = new Path();
  60.             path.addArc(rectF, startAngle, mOffsetAngle);
  61.             canvas.drawTextOnPath(mNamesStrs.get(i), path, 0, textHeight + 10, mPaint);
  62.             startAngle = startAngle + mOffsetAngle;
  63.         }
  64.     }

5、添加手势控制

  1.  @Override
  2.     public boolean onTouchEvent(MotionEvent event) {
  3.         return mDetector.onTouchEvent(event);
  4.     }
  1. private class TurntableGestureListener extends GestureDetector.SimpleOnGestureListener {
  2.  
  3.         @Override
  4.         public boolean onDown(MotionEvent e) {
  5.             //如果正在抽奖，则不可以手势滑动
  6.             if (isDrawingLottery) {
  7.                 return false;
  8.             }
  9.             if (mOnFlingAnimator != null) {
  10.                 mOnFlingAnimator.cancel();
  11.             }
  12.             mStartX = e.getX();
  13.             mStartY = e.getY();
  14.             return true;
  15.         }
  16.  
  17.         @Override
  18.         public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
  19.             LoggerUtil.i(TAG, "onScroll");
  20.             float e2X = e2.getX();
  21.             float e2Y = e2.getY();
  22.  
  23.             float xStart = mStartX - mCenterX;
  24.             float yStart = mCenterY - mStartY;
  25.             double distancestart = Math.sqrt(xStart * xStart + yStart * yStart);
  26.             //计算移动点到圆心的距离
  27.             float xMove = e2X - mCenterX;
  28.             float yMove = mCenterY - e2Y;
  29.             double distanceMove = Math.sqrt(xMove * xMove + yMove * yMove);
  30.             double distanceMoveDz = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
  31.  
  32.             double cosValue = (distancestart * distancestart + distanceMove * distanceMove - distanceMoveDz * distanceMoveDz) / (2 * distancestart * distanceMove);
  33.             //多指触控的时候会造成cosValue 大于1，这里控制一下
  34.             if (cosValue > 1) {
  35.                 LoggerUtil.i(TAG + "大于1", cosValue);
  36.                 cosValue = 1;
  37.             } else if (cosValue < -1) {
  38.                 LoggerUtil.i(TAG + "小于1", cosValue);
  39.                 cosValue = -1;
  40.             }
  41.             double acos = Math.acos(cosValue);
  42.             double changeAngleDz = Math.toDegrees(acos);
  43.  
  44.             //大于0 顺时针，小于0 逆时针
  45.             float value = (mStartX - mCenterX) * (e2Y - mCenterY) - (mStartY - mCenterY) * (e2X - mCenterX);
  46.             if (value >= 0) {
  47.                 mCurrentAngle = (float) (mCurrentAngle + changeAngleDz);
  48.                 isClockwise = true;
  49.             } else {
  50.                 mCurrentAngle = (float) (mCurrentAngle - changeAngleDz);
  51.                 isClockwise = false;
  52.             }
  53.             setRotate(mCurrentAngle);
  54.  
  55.             mStartX = e2X;
  56.             mStartY = e2Y;
  57.             return true;
  58.         }
  59.  
  60.         @Override
  61.         public boolean onFling(MotionEvent e1, final MotionEvent e2, final float velocityX, final float velocityY) {
  62.             float e2X = e2.getX();
  63.             float e2Y = e2.getY();
  64.  
  65.             float dx = velocityX * (float) 0.005;
  66.             float dy = velocityY * (float) 0.005;
  67.             float xStart = mStartX - mCenterX;
  68.             float yStart = mCenterY - mStartY;
  69.             double distancestart = Math.sqrt(xStart * xStart + yStart * yStart);
  70.             //计算移动点到圆心的距离
  71.             float xMove = e2X - mCenterX;
  72.             float yMove = mCenterY - e2Y;
  73.             double distanceMove = Math.sqrt(xMove * xMove + yMove * yMove);
  74.             double distanceMoveDz = Math.sqrt(dx * dx + dy * dy);
  75.  
  76.             double cosValue = (distancestart * distancestart + distanceMove * distanceMove - distanceMoveDz * distanceMoveDz) / (2 * distancestart * distanceMove);
  77.             //多指触控的时候会造成cosValue 大于1，这里控制一下
  78.             if (cosValue > 1) {
  79.                 cosValue = 1;
  80.             } else if (cosValue < -1) {
  81.                 cosValue = -1;
  82.             }
  83.             double acos = Math.acos(cosValue);
  84.             double changeAngleDz = Math.toDegrees(acos);
  85.  
  86.             if (isClockwise) {
  87.  
  88.             } else {
  89.                 //逆时针
  90.                 changeAngleDz = changeAngleDz * -1;
  91.             }
  92.  
  93.             mOnFlingAnimator = ValueAnimator.ofFloat((float) changeAngleDz, 0);
  94.             mOnFlingAnimator.setDuration(1000);
  95.             mOnFlingAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  96.                 @Override
  97.                 public void onAnimationUpdate(ValueAnimator animation) {
  98.                     float animatedX = (float) animation.getAnimatedValue();
  99.                     mCurrentAngle = mCurrentAngle + animatedX;
  100.                     setRotate(mCurrentAngle);
  101.                 }
  102.             });
  103.  
  104.             mOnFlingAnimator.start();
  105.             return true;
  106.         }
  107.     }

onScroll方法中计算手指滑动时候转盘转动的角度原理：

三、项目中如何引用

步骤1.将JitPack存储库添加到构建文件中

项目的根build.gradle中添加以下代码：

  1. allprojects {
  2. 	repositories {
  3. 		...
  4. 		maven { url 'https://jitpack.io' }
  5. 	}
  6. }

步骤2.build.gradle添加依赖项

  1. dependencies {
  2.         implementation 'com.github.hnsycsxhzcsh:TurntableView:v1.1'
  3. }

步骤3. 布局中引用控件（控件需要放在一个父布局中，父布局中放一个图片按钮）

  1. <RelativeLayout
  2.         android:layout_width="match_parent"
  3.         android:layout_height="wrap_content">
  4.  
  5.         <com.turntableview.TurntableView
  6.             android:id="@+id/turntable"
  7.             android:layout_width="match_parent"
  8.             android:layout_height="wrap_content"
  9.             android:layout_centerInParent="true" />
  10.  
  11.         <ImageView
  12.             android:id="@+id/iv_node"
  13.             android:layout_width="wrap_content"
  14.             android:layout_height="wrap_content"
  15.             android:layout_centerInParent="true"
  16.             android:background="@mipmap/node" />
  17.  
  18.     </RelativeLayout>

步骤4. activity中添加监听

  1.  mIvGo.setOnClickListener(new View.OnClickListener() {
  2.         @Override
  3.         public void onClick(View v) {
  4.             mTurntable.startRotate(new ITurntableListener() {
  5.                 @Override
  6.                 public void onStart() {
  7.                     Toast.makeText(MainActivity.this, "开始抽奖", Toast.LENGTH_SHORT).show();
  8.                 }
  9.  
  10.                 @Override
  11.                 public void onEnd(int position, String name) {
  12.                     mTvResult.setText("抽奖结束抽中第" + (position + 1) + "位置的奖品:" + name);
  13.                 }
  14.             });
  15.         }
  16.     });

备注：

可以在github上下载我的项目：https://github.com/hnsycsxhzcsh/TurntableView，如果我的博客对你有帮助的话，欢迎博客点赞支持，并在github右上角star支持！

 

 

 

 

 

 

 

 

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/286631?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号