溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Android實現(xiàn)可點擊的幸運大轉盤

發(fā)布時間:2020-10-15 12:14:36 來源:腳本之家 閱讀:188 作者:lijiao 欄目:移動開發(fā)

之前的項目有一個幸運大轉盤的功能,在網上找了很久,都沒有合適的方法。

Android實現(xiàn)可點擊的幸運大轉盤

Android實現(xiàn)可點擊的幸運大轉盤

這是效果圖,實現(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是字符串數組,由于文字已經在切圖中給出,此處可忽略。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI