您好,登錄后才能下訂單哦!
之前的項目有一個幸運大轉盤的功能,在網上找了很久,都沒有合適的方法。
這是效果圖,實現(xiàn)目標:十二星座的圖片可點擊切換選中效果,根據選擇不同的星座,實現(xiàn)不同的 方法。之前網上的都是帶有指針的,或者可點擊改變效果,但是并不知道選擇的到底是哪個,即虛擬選擇。
實現(xiàn)該功能的主要代碼如下:
1、自定義一個布局,存放圖片,實現(xiàn)圓形布局。
/** * * * 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 * :區(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) { // 如果是第一次進來,將之前默認選中的item改變?yōu)樵瓉淼念伾? // 如果選中的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, 是三個圖片數組,分別是初始化時默認的選中狀態(tài)的圖片數組(有一個被選中)、全部未選中的圖片數組、選中后的圖片數組(不同于默認的圖片數組),String[] str是字符串數組,由于文字已經在切圖中給出,此處可忽略。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。