Android实现可点击的幸运大转盘

发布时间:2019-08-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Android实现可点击的幸运大转盘脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

之前的项目有一个幸运大转盘的功能,在网上找了很久,都没有合适的方法。

Android实现可点击的幸运大转盘

Android实现可点击的幸运大转盘

这是效果图,实现目标:十二星座的图片可点击切换选中效果,根据选择不同的星座,实现不同的 方法。之前网上的都是带有指针的,或者可点击改变效果,但是并不知道选择的到底是哪个,即虚拟选择。

实现该功能的主要代码如下:

1、自定义一个布局,存放图片,实现形布局。

 /**  *  *  * CircleMenuLayout.java  *  * @author wuxiaosu  *  */ public class CircleMenuLayout extends ViewGroup {   /**    * 布局的径    */   PRivate int mRadius;   /**    * 该容器内child ITem的默认尺寸    */   private static final float RADIO_DEFAULT_CHILD_DIMENSION = 1f;   /**    * 菜单的中心child的默认尺寸    */   private float RADIO_DEFAULT_centerITEM_DIMENSION = 1 / 3f;   /**    * 该容器的内边距,无视padding属性,如需边距请用该变量    */   private static final float RADIO_PADDING_LAYOUT = 1 / 12f;   /**    * 该容器的内边距,无视padding属性,如需边距请用该变量    */   private float mPadding;   /**    * 布局时的开始角度    */   private double mStartAngle = 0;   /**    * 菜单项的文本    */   private String[] mItemTexts;   /**    * 菜单项的图标    */   private int[] mItemimgs;    /**    * 菜单的个数    */   private int mMenuItemCount;    private int mMenuIteMLayoutId = R.layout.circle_menu_item;    public CircleMenuLayout(Context context, AttributeSet attrs) {     suPEr(context, attrs);     // 无视padding     setPadding(0, 0, 0, 0);   }    /**    * 设置布局的高,并策略menu item宽高    */   @override   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {     /**      * 整个圆盘布局 的宽高      */     int resWidth = 0;     int resHeight = 0;      /**      * 根据传入的参数,分别获取测量模式和测量值&#1461;      */     int width = MeasureSpec.getSize(widthMeasureSpec);     int widthMode = MeasureSpec.getMode(widthMeasureSpec);      int height = MeasureSpec.getSize(heightMeasureSpec);     int heightMode = MeasureSpec.getMode(heightMeasureSpec);      /**      * 如果宽或者高的测量模式非精确值ֵ      */     if (widthMode != MeasureSpec.EXACTLY         || heightMode != MeasureSpec.EXACTLY) {       // 主要设置为背景图的高度       resWidth = getSuggestedMinimumWidth();       // 如果未设置背景图片,则设置为屏幕宽高的默认值ֵ       resWidth = resWidth == 0 ? getDefaultWidth() : resWidth;        resHeight = getSuggestedMinimumHeight();       // 如果未设置背景图片,则设置为屏幕宽高的默认值ֵ       resHeight = resHeight == 0 ? getDefaultWidth() : resHeight;     } else {       // 如果都设置为精确值,则直接取小值;       resWidth = resHeight = Math.min(width, height);     }      LOG.e("TAG", "resWidth = " + resWidth + ", resHeight = " + resHeight);      setMeasuredDimension(resWidth, resHeight);      // 获得半径     mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight());      // menu item数量     final int count = getChildCount();     // menu item尺寸     int childSize = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);     Log.e("TAG", "childSize = " + childSize);     // menu item测量模式     int childMode = MeasureSpec.EXACTLY;      // 迭代测量     for (int i = 0; i < count; i++) {       final View child = getChildAt(i);        if (child.getVisibility() == GONE) {         continue;       }        // 计算menu item的尺寸;以及和设置好的模式,去对item进行测量       int makeMeasureSpec = -1;        if (child.getId() == R.id.id_circle_menu_item_center) {         makeMeasureSpec = MeasureSpec.makeMeasureSpec(             (int) (mRadius * RADIO_DEFAULT_CENTERITEM_DIMENSION),             childMode);       } else {         makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize,             childMode);       }       child.measure(makeMeasureSpec, makeMeasureSpec);     }      mPadding = RADIO_PADDING_LAYOUT * mRadius;    }    /**    * MenuItem的点击事件接口    *     *     */   public interface OnMenuItemClickListener {     void itemClick(View view, int pos);      void itemCenterClick(View view);   }    /**    * MenuItem的点击事件接口    */   private OnMenuItemClickListener mOnMenuItemClickListener;    /**    * 设置MenuItem的点击事件接口    *     * @param mOnMenuItemClickListener    */   public void setOnMenuItemClickListener(       OnMenuItemClickListener mOnMenuItemClickListener) {     this.mOnMenuItemClickListener = mOnMenuItemClickListener;   }    /**    * 设置menu item的位置    */   @SupPressLint("NewApi")   @Override   protected void onLayout(boolean changed, int l, int t, int r, int b) {     int layoutRadius = mRadius;     Log.e("TAG", "layoutRadius = " + layoutRadius);      // Laying out the child views     final int childCount = getChildCount();      int left, top;     // menu item 的尺寸     int cWidth = (int) (layoutRadius * RADIO_DEFAULT_CHILD_DIMENSION);      // 根据menu item的个数,计算角度     float angleDelay = 0;     if ((getChildCount() - 1) != 0) {       angleDelay = 360 / (getChildCount() - 1);     }     angleDelay = 30f;     Log.e("TAG", "单个角度 angleDelay = " + angleDelay);      // 遍历去设置menuitem的位置     for (int i = 0; i < childCount; i++) {       final View child = getChildAt(i);        if (child.getId() == R.id.id_circle_menu_item_center)         continue;        if (child.getVisibility() == GONE) {         continue;       }        mStartAngle %= 360;        // 计算,中心点到menu item中心的距离--即图片中心位置到圆心的距离       float tmp = layoutRadius / 2f - cWidth / 2 - mPadding;       // 根据屏幕密度计算,基数为60(暂定60)       tmp = LuckyUtil.getDensity() * 57;       Log.e("TAG", "tmp = " + tmp);        // tmp cosa 即menu item中心点的横坐标       left = layoutRadius           / 2           + (int) Math.round(tmp               * Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f               * cWidth);       // tmp sina 即menu item的纵坐标       top = layoutRadius           / 2           + (int) Math.round(tmp               * Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f               * cWidth);        child.layout(left, top, left + cWidth, top + cWidth);       // 叠加尺寸       mStartAngle += angleDelay;     }      // 找到中心的view,如果存在设置onclick事件     View cView = findViewById(R.id.id_circle_menu_item_center);     if (cView != null) {       cView.setOnClickListener(new OnClickListener() {         @SuppressLint("DrawAllocation")         @Override         public void onClick(View v) {            if (mOnMenuItemClickListener != null) {             mOnMenuItemClickListener.itemCenterClick(v);           }         }       });       // 设置center item位置       int cl = layoutRadius / 2 - cView.getMeasuredWidth() / 2;       int cr = cl + cView.getMeasuredWidth();       cView.layout(cl, cl, cr, cr);     }    }    /**    * 主要为了action_down时,返回true    */   @Override   public boolean onTouchEvent(MotionEvent event) {     return true;   }    /**    * 设置菜单条目的图标和文本    *     * @param resIds    */   public void setMenuItemIconsAndTexts(int[] resIds, String[] texts) {     mItemImgs = resIds;     mItemTexts = texts;      // 参数检查     if (resIds == null && texts == null) {       throw new IllegalargumentException("菜单项文本和图片至少设置其一");     }      // 初始化mMenuCount     mMenuItemCount = resIds == null ? texts.length : resIds.length;      if (resIds != null && texts != null) {       mMenuItemCount = Math.min(resIds.length, texts.length);     }      addMenuItems();    }    /**    * 设置MenuItem的布局文件,必须在setMenuItemIconsAndTexts之前调用    *     * @param mMenuItemLayoutId    */   public void setMenuItemLayoutId(int mMenuItemLayoutId) {     this.mMenuItemLayoutId = mMenuItemLayoutId;   }    /**    * 添加菜单项    */   @SuppressLint("NewApi")   private void addMenuItems() {     LayoutInflater mInflater = LayoutInflater.From(getContext());      /**      * 根据用户设置的参数,初始化view      */     for (int i = 0; i < mMenuItemCount; i++) {       final int j = i;       View view = mInflater.inflate(mMenuItemLayoutId, this, false);       ImageView iv = (ImageView) view           .findViewById(R.id.id_circle_menu_item_image);        if (iv != null) {         iv.setVisibility(View.VISIBLE);         iv.setImageResource(mItemImgs[i]);         iv.setOnClickListener(new OnClickListener() {           @Override           public void onClick(View v) {              if (mOnMenuItemClickListener != null) {               mOnMenuItemClickListener.itemClick(v, j);             }           }         });       }        // 设置角度       view.setRotation(90 + i * (360 / (mMenuItemCount)));        Log.e("TAG", "旋转角度 = " + (i * (360 / mMenuItemCount)));        // 添加view到容器中       addView(view);     }   }    /**    * 获得默认该layout的尺寸    *     * @return    */   private int getDefaultWidth() {     WindowManager wm = (WindowManager) getContext().getSystemService(         Context.WINDOW_SERVICE);     DisplayMetrics outMetrics = new DisplayMetrics();     wm.getDefaultDisplay().getMetrics(outMetrics);     return Math.min(outMetrics.widthPixels, outMetrics.heightPixels);   }  }  

(该自定义布局参考了网上一个建行demo的布局,具体的忘记了,请见谅。)

2、XMl布局

  <com.zhcl.yqwan.lucky.rotation.circle.CircleMenuLayout             andROId:id="@+id/id_menulayout"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="center"             android:background="@drawable/ratote_bg_two" >              <RelativeLayout               android:id="@+id/id_circle_menu_item_center"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:visibility="gone" >             </RelativeLayout>           </com.zhcl.yqwan.lucky.rotation.circle.CircleMenuLayout>  

该处主要是自定义控件使用位置的布局。

3、activity中调用

 /**    * 设置属性或者星座的图片,并绘制图形    *     * @param def    * @param img    * @param selectedImg    * @param str    * @param type    *      :区分星座和生肖,1--星座,2--生肖。    */   private void setRotateSelectedImg(final int[] def, final int[] img,       final int[] selectedImg, String[] str, final int type) {     mCircleMenuLayout.setMenuItemIconsAndTexts(def, str);      mCircleMenuLayout         .setOnMenuItemClickListener(new OnMenuItemClickListener() {            @Override           public void itemClick(View view, int pos) {             // 如果是第一次进来,将之前默认选中的item改变为原来的颜色             // 如果选中的index和默认的index不同,则将默认的设置为原来的颜色             // Toast.makeText(LotteryRotationActivity.this,             // "pos = " + pos, Toast.LENGTH_SHORT).show();              // 选中的index             selectedIndex = pos;              if (pos != 0 && type == 1) {               img[0] = mConstellationImgs[0];             } else if (pos != 0 && type == 2) {               img[0] = mAnimalImgs[0];             }              mCircleMenuLayout.removeAllViews();             // mCircleMenuLayout = (CircleMenuLayout)             // findViewById(R.id.id_menulayout);             // 替换选中的图片             replaceImg = img[pos];             img[pos] = selectedImg[pos];             // 设置图片             mCircleMenuLayout.setMenuItemIconsAndTexts(img,                 mItemTexts);             // 还原图片,方便下一次点击替换             img[pos] = replaceImg;           }            @Override           public void itemCenterClick(View view) {            }         });    }   // 星座:最开始默认选择一个     setRotateSelectedImg(mConstellationImgsDefult, mConstellationImgs,         mConstellationImgsSelected, mAnimalStr, 1);

这里定义了一个setRotateSelectedImg的方法,方便使用,其中final int[] def, final int[] img,final int[] selectedImg, 是三个图片数组,分别是初始化时默认的选中状态的图片数组(有一个被选中)、全部未选中的图片数组、选中后的图片数组(不同于默认的图片数组),String[] str是字符串数组,由于文字已经在切图中给出,此处可忽略。

android教程
脚本网站
android studio

脚本宝典总结

以上是脚本宝典为你收集整理的Android实现可点击的幸运大转盘全部内容,希望文章能够帮你解决Android实现可点击的幸运大转盘所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。