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; /** * 根据传入的参数，分别获取测量模式和测量值ֵ */ 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自定义view制作抽奖转盘Android自定义View实现抽奖转盘Android自定义View实现QQ运动积分转盘抽奖功能Android使用surfaceView自定义抽奖大转盘Android中利用SurfaceView制作抽奖转盘的全流程攻略基于Android实现转盘按钮代码Android实现抽奖转盘实例代码

大转盘 Android