实现可点击的幸运大转盘

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

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

实现该功能的主要代码如下：
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客户端–彩票1000）