Android實(shí)現(xiàn)可點(diǎn)擊的幸運(yùn)大轉(zhuǎn)盤
之前的項(xiàng)目有一個(gè)幸運(yùn)大轉(zhuǎn)盤的功能，在網(wǎng)上找了很久，都沒有合適的方法。
成都創(chuàng)新互聯(lián)公司從2013年開始，先為崇信等服務(wù)建站，崇信等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為崇信企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
這是效果圖，實(shí)現(xiàn)目標(biāo)：十二星座的圖片可點(diǎn)擊切換選中效果，根據(jù)選擇不同的星座，實(shí)現(xiàn)不同的 方法。之前網(wǎng)上的都是帶有指針的，或者可點(diǎn)擊改變效果，但是并不知道選擇的到底是哪個(gè)，即虛擬選擇。
實(shí)現(xiàn)該功能的主要代碼如下：
1、自定義一個(gè)布局，存放圖片，實(shí)現(xiàn)圓形布局。
/**
*
*
* CircleMenuLayout.java
*
* @author wuxiaosu
*
*/
public class CircleMenuLayout extends ViewGroup {
/**
* 布局的半徑
*/
private int mRadius;
/**
* 該容器內(nèi)child item的默認(rèn)尺寸
*/
private static final float RADIO_DEFAULT_CHILD_DIMENSION = 1f;
/**
* 菜單的中心child的默認(rèn)尺寸
*/
private float RADIO_DEFAULT_CENTERITEM_DIMENSION = 1 / 3f;
/**
* 該容器的內(nèi)邊距,無視padding屬性，如需邊距請用該變量
*/
private static final float RADIO_PADDING_LAYOUT = 1 / 12f;
/**
* 該容器的內(nèi)邊距,無視padding屬性，如需邊距請用該變量
*/
private float mPadding;
/**
* 布局時(shí)的開始角度
*/
private double mStartAngle = 0;
/**
* 菜單項(xiàng)的文本
*/
private String[] mItemTexts;
/**
* 菜單項(xiàng)的圖標(biāo)
*/
private int[] mItemImgs;
/**
* 菜單的個(gè)數(shù)
*/
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);
}
/**
* 設(shè)置布局的寬高，并策略menu item寬高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
/**
* 整個(gè)圓盤布局 的寬高
*/
int resWidth = 0;
int resHeight = 0;
/**
* 根據(jù)傳入的參數(shù)，分別獲取測量模式和測量值ֵ
*/
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) {
// 主要設(shè)置為背景圖的高度
resWidth = getSuggestedMinimumWidth();
// 如果未設(shè)置背景圖片，則設(shè)置為屏幕寬高的默認(rèn)值ֵ
resWidth = resWidth == 0 ? getDefaultWidth() : resWidth;
resHeight = getSuggestedMinimumHeight();
// 如果未設(shè)置背景圖片，則設(shè)置為屏幕寬高的默認(rèn)值ֵ
resHeight = resHeight == 0 ? getDefaultWidth() : resHeight;
} else {
// 如果都設(shè)置為精確值，則直接取小值；
resWidth = resHeight = Math.min(width, height);
}
Log.e("TAG", "resWidth = " + resWidth + ", resHeight = " + resHeight);
setMeasuredDimension(resWidth, resHeight);
// 獲得半徑
mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight());
// menu item數(shù)量
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;
}
// 計(jì)算menu item的尺寸；以及和設(shè)置好的模式，去對item進(jìn)行測量
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的點(diǎn)擊事件接口
*
*
*/
public interface OnMenuItemClickListener {
void itemClick(View view, int pos);
void itemCenterClick(View view);
}
/**
* MenuItem的點(diǎn)擊事件接口
*/
private OnMenuItemClickListener mOnMenuItemClickListener;
/**
* 設(shè)置MenuItem的點(diǎn)擊事件接口
*
* @param mOnMenuItemClickListener
*/
public void setOnMenuItemClickListener(
OnMenuItemClickListener mOnMenuItemClickListener) {
this.mOnMenuItemClickListener = mOnMenuItemClickListener;
}
/**
* 設(shè)置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);
// 根據(jù)menu item的個(gè)數(shù)，計(jì)算角度
float angleDelay = 0;
if ((getChildCount() - 1) != 0) {
angleDelay = 360 / (getChildCount() - 1);
}
angleDelay = 30f;
Log.e("TAG", "單個(gè)角度 angleDelay = " + angleDelay);
// 遍歷去設(shè)置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;
// 計(jì)算，中心點(diǎn)到menu item中心的距離--即圖片中心位置到圓心的距離
float tmp = layoutRadius / 2f - cWidth / 2 - mPadding;
// 根據(jù)屏幕密度計(jì)算，基數(shù)為60(暫定60)
tmp = LuckyUtil.getDensity() * 57;
Log.e("TAG", "tmp = " + tmp);
// tmp cosa 即menu item中心點(diǎn)的橫坐標(biāo)
left = layoutRadius
/ 2
+ (int) Math.round(tmp
* Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f
* cWidth);
// tmp sina 即menu item的縱坐標(biāo)
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，如果存在設(shè)置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);
}
}
});
// 設(shè)置center item位置
int cl = layoutRadius / 2 - cView.getMeasuredWidth() / 2;
int cr = cl + cView.getMeasuredWidth();
cView.layout(cl, cl, cr, cr);
}
}
/**
* 主要為了action_down時(shí)，返回true
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
return true;
}
/**
* 設(shè)置菜單條目的圖標(biāo)和文本
*
* @param resIds
*/
public void setMenuItemIconsAndTexts(int[] resIds, String[] texts) {
mItemImgs = resIds;
mItemTexts = texts;
// 參數(shù)檢查
if (resIds == null && texts == null) {
throw new IllegalArgumentException("菜單項(xiàng)文本和圖片至少設(shè)置其一");
}
// 初始化mMenuCount
mMenuItemCount = resIds == null ? texts.length : resIds.length;
if (resIds != null && texts != null) {
mMenuItemCount = Math.min(resIds.length, texts.length);
}
addMenuItems();
}
/**
* 設(shè)置MenuItem的布局文件，必須在setMenuItemIconsAndTexts之前調(diào)用
*
* @param mMenuItemLayoutId
*/
public void setMenuItemLayoutId(int mMenuItemLayoutId) {
this.mMenuItemLayoutId = mMenuItemLayoutId;
}
/**
* 添加菜單項(xiàng)
*/
@SuppressLint("NewApi")
private void addMenuItems() {
LayoutInflater mInflater = LayoutInflater.from(getContext());
/**
* 根據(jù)用戶設(shè)置的參數(shù)，初始化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);
}
}
});
}
// 設(shè)置角度
view.setRotation(90 + i * (360 / (mMenuItemCount)));
Log.e("TAG", "旋轉(zhuǎn)角度 = " + (i * (360 / mMenuItemCount)));
// 添加view到容器中
addView(view);
}
}
/**
* 獲得默認(rèn)該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);
}
}
（該自定義布局參考了網(wǎng)上一個(gè)建行demo的布局，具體的忘記了，請見諒。）
2、xml布局
該處主要是自定義控件使用位置的布局。
3、activity中調(diào)用
/**
* 設(shè)置屬性或者星座的圖片，并繪制圖形
*
* @param def
* @param img
* @param selectedImg
* @param str
* @param type
* :區(qū)分星座和生肖，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) {
// 如果是第一次進(jìn)來，將之前默認(rèn)選中的item改變?yōu)樵瓉淼念伾? // 如果選中的index和默認(rèn)的index不同，則將默認(rèn)的設(shè)置為原來的顏色
// 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];
// 設(shè)置圖片
mCircleMenuLayout.setMenuItemIconsAndTexts(img,
mItemTexts);
// 還原圖片，方便下一次點(diǎn)擊替換
img[pos] = replaceImg;
}
@Override
public void itemCenterClick(View view) {
}
});
}
// 星座:最開始默認(rèn)選擇一個(gè)
setRotateSelectedImg(mConstellationImgsDefult, mConstellationImgs,
mConstellationImgsSelected, mAnimalStr, 1);這里定義了一個(gè)setRotateSelectedImg的方法，方便使用，其中final int[] def, final int[] img,final int[] selectedImg, 是三個(gè)圖片數(shù)組，分別是初始化時(shí)默認(rèn)的選中狀態(tài)的圖片數(shù)組（有一個(gè)被選中）、全部未選中的圖片數(shù)組、選中后的圖片數(shù)組（不同于默認(rèn)的圖片數(shù)組），String[] str是字符串?dāng)?shù)組，由于文字已經(jīng)在切圖中給出，此處可忽略。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
名稱欄目：Android實(shí)現(xiàn)可點(diǎn)擊的幸運(yùn)大轉(zhuǎn)盤
網(wǎng)頁地址：http://m.jiaotiyi.com/article/pdopgp.html