實戰演示 · 架構師之路

自定義View開發炫酷的UI 效果之圓形菜單，下圖是效果圖 ![](http://img.blog.csdn.net/20150126002822886) CircleMenuLayout.java的結構如下圖所示： ![](https://box.kancloud.cn/ec6e0efaa2865758fd9f020aeb5f868b_469x878.jpg) 代碼如下所示： ~~~ package com.wsc.circlemenudemo.ui; import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager; import android.widget.ImageView; import android.widget.TextView; import com.wsc.circlemenudemo.R; public class CircleMenuLayout extends ViewGroup { private int mRadius; /** * 該容器內child item的默認尺寸 */ private static final float RADIO_DEFAULT_CHILD_DIMENSION = 1 / 4f; /** * 菜單的中心child的默認尺寸 */ private float RADIO_DEFAULT_CENTERITEM_DIMENSION = 1 / 3f; /** * 該容器的內邊距,無視padding屬性，如需邊距請用該變量 */ private static final float RADIO_PADDING_LAYOUT = 1 / 12f; /** * 當每秒移動角度達到該值時，認為是快速移動 */ private static final int FLINGABLE_VALUE = 300; /** * 如果移動角度達到該值，則屏蔽點擊 */ private static final int NOCLICK_VALUE = 3; /** * 當每秒移動角度達到該值時，認為是快速移動 */ private int mFlingableValue = FLINGABLE_VALUE; /** * 該容器的內邊距,無視padding屬性，如需邊距請用該變量 */ private float mPadding; /** * 布局時的開始角度 */ private double mStartAngle = 0; /** * 菜單項的文本 */ private String[] mItemTexts; /** * 菜單項的圖標 */ private int[] mItemImgs; /** * 菜單的個數 */ private int mMenuItemCount; /** * 檢測按下到抬起時旋轉的角度 */ private float mTmpAngle; /** * 檢測按下到抬起時使用的時間 */ private long mDownTime; /** * 判斷是否正在自動滾動 */ private boolean isFling; 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); } setMeasuredDimension(resWidth, resHeight); // 獲得半徑 mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight()); // menu item數量 final int count = getChildCount(); // menu item尺寸 int childSize = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION); // 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.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的點擊事件接口 * * @author zhy * */ 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的位置 */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int layoutRadius = mRadius; // 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 = 360 / (getChildCount() - 1); // 遍歷去設置menuitem的位置 for (int i = 0; i < childCount; i++) { final View child = getChildAt(i); if (child.getId() == R.id.circle_menu_item_img){ continue; } if (child.getVisibility() == GONE) { continue; } mStartAngle %= 360; // 計算，中心點到menu item中心的距離 float tmp = layoutRadius / 2f - cWidth / 2 - mPadding; // 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.circle_menu_item_center); if (cView != null) { cView.setOnClickListener(new OnClickListener() { @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); } } /** * 記錄上一次的x，y坐標 */ private float mLastX; private float mLastY; /** * 自動滾動的Runnable */ private AutoFlingRunnable mFlingRunnable; @Override public boolean dispatchTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); // Log.e("TAG", "x = " + x + " , y = " + y); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mLastX = x; mLastY = y; mDownTime = System.currentTimeMillis(); mTmpAngle = 0; // 如果當前已經在快速滾動 if (isFling) { // 移除快速滾動的回調 removeCallbacks(mFlingRunnable); isFling = false; return true; } break; case MotionEvent.ACTION_MOVE: /** * 獲得開始的角度 */ float start = getAngle(mLastX, mLastY); /** * 獲得當前的角度 */ float end = getAngle(x, y); // Log.e("TAG", "start = " + start + " , end =" + end); // 如果是一、四象限，則直接end-start，角度值都是正值 if (getQuadrant(x, y) == 1 || getQuadrant(x, y) == 4) { mStartAngle += end - start; mTmpAngle += end - start; } else // 二、三象限，色角度值是付值 { mStartAngle += start - end; mTmpAngle += start - end; } // 重新布局 requestLayout(); mLastX = x; mLastY = y; break; case MotionEvent.ACTION_UP: // 計算，每秒移動的角度 float anglePerSecond = mTmpAngle * 1000 / (System.currentTimeMillis() - mDownTime); // Log.e("TAG", anglePrMillionSecond + " , mTmpAngel = " + // mTmpAngle); // 如果達到該值認為是快速移動 if (Math.abs(anglePerSecond) > mFlingableValue && !isFling) { // post一個任務，去自動滾動 post(mFlingRunnable = new AutoFlingRunnable(anglePerSecond)); return true; } // 如果當前旋轉角度超過NOCLICK_VALUE屏蔽點擊 if (Math.abs(mTmpAngle) > NOCLICK_VALUE) { return true; } break; } return super.dispatchTouchEvent(event); } /** * 主要為了action_down時，返回true */ @Override public boolean onTouchEvent(MotionEvent event) { return true; } /** * 根據觸摸的位置，計算角度 * * @param xTouch * @param yTouch * @return */ private float getAngle(float xTouch, float yTouch) { double x = xTouch - (mRadius / 2d); double y = yTouch - (mRadius / 2d); return (float) (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI); } /** * 根據當前位置計算象限 * * @param x * @param y * @return */ private int getQuadrant(float x, float y) { int tmpX = (int) (x - mRadius / 2); int tmpY = (int) (y - mRadius / 2); if (tmpX >= 0) { return tmpY >= 0 ? 4 : 1; } else { return tmpY >= 0 ? 3 : 2; } } /** * 設置菜單條目的圖標和文本 * * @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; } /** * 添加菜單項 */ 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.circle_menu_item_img); TextView tv = (TextView) view .findViewById(R.id.circle_menu_item_txt); 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); } } }); } if (tv != null) { tv.setVisibility(View.VISIBLE); tv.setText(mItemTexts[i]); } // 添加view到容器中 addView(view); } } /** * 如果每秒旋轉角度到達該值，則認為是自動滾動 * * @param mFlingableValue */ public void setFlingableValue(int mFlingableValue) { this.mFlingableValue = mFlingableValue; } /** * 設置內邊距的比例 * * @param mPadding */ public void setPadding(float mPadding) { this.mPadding = mPadding; } /** * 獲得默認該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); } /** * 自動滾動的任務 * * @author zhy * */ private class AutoFlingRunnable implements Runnable { private float angelPerSecond; public AutoFlingRunnable(float velocity) { this.angelPerSecond = velocity; } @Override public void run() { // 如果小于20,則停止 if ((int) Math.abs(angelPerSecond) < 20) { isFling = false; return; } isFling = true; // 不斷改變mStartAngle，讓其滾動，/30為了避免滾動太快 mStartAngle += (angelPerSecond / 30); // 逐漸減小這個值 angelPerSecond /= 1.0666F; postDelayed(this, 30); // 重新布局 requestLayout(); } } } ~~~ **CircleActivity.java** ~~~ package com.wsc.circlemenudemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Toast; import com.wsc.circlemenudemo.ui.CircleMenuLayout; public class CircleActivity extends AppCompatActivity { private CircleMenuLayout mCircleMenuLayout; private String[] mItemTexts = new String[] { "安全中心 ", "特色服務", "投資理財", "轉賬匯款", "我的賬戶", "信用卡" }; private int[] mItemImgs = new int[] { R.mipmap.home_mbank_1_normal, R.mipmap.home_mbank_2_normal, R.mipmap.home_mbank_3_normal, R.mipmap.home_mbank_4_normal, R.mipmap.home_mbank_5_normal, R.mipmap.home_mbank_6_normal }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_circle); mCircleMenuLayout = (CircleMenuLayout) findViewById(R.id.id_menulayout); mCircleMenuLayout.setMenuItemIconsAndTexts(mItemImgs, mItemTexts); mCircleMenuLayout.setOnMenuItemClickListener(new CircleMenuLayout.OnMenuItemClickListener() { @Override public void itemClick(View view, int pos) { Toast.makeText(CircleActivity.this, mItemTexts[pos], Toast.LENGTH_SHORT).show(); } @Override public void itemCenterClick(View view) { Toast.makeText(CircleActivity.this, "you can do something just like ccb ", Toast.LENGTH_SHORT).show(); } }); } } ~~~ 布局文件 **activity_circle.xml** ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/bg" android:orientation="horizontal" android:gravity="center_vertical" tools:context="com.wsc.circlemenudemo.CircleActivity"> <com.wsc.circlemenudemo.ui.CircleMenuLayout android:id="@+id/id_menulayout" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="100dp" android:background="@mipmap/circle_bg3"> <RelativeLayout android:id="@id/id_circle_menu_item_center" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="104.0dp" android:layout_height="104.0dp" android:layout_centerInParent="true" android:background="@mipmap/turnplate_center_unlogin" /> <ImageView android:layout_width="116.0dp" android:layout_height="116.0dp" android:layout_centerInParent="true" android:background="@mipmap/turnplate_mask_unlogin_normal" /> </RelativeLayout> </com.wsc.circlemenudemo.ui.CircleMenuLayout> </LinearLayout> ~~~ **circle_menu_item.xml** ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <ImageView android:id="@id/circle_menu_item_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone"/> <TextView android:id="@id/circle_menu_item_txt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone" android:text="@string/circle_menu_item_txt" android:textColor="@android:color/white" android:textSize="14sp"/> </LinearLayout> ~~~ #### **資源ID的命名規則** 在布局文件中，有些控件的ID是這樣定義`android:id="@+id/id_menulayout"`，但是有些確實這樣定義`android:id="@id/circle_menu_item_img"`，后者之所以這樣定義ID，是因為我們的自定義控件依賴于我們的id，所以這個id我不希望用戶自己去指定，而是提前定義些id，讓用戶去使用。除此之外，還需要定義這樣的id資源，在res/values下面去新建一個ids.xml文件： ~~~ <?xml version="1.0" encoding="utf-8"?> <resources> <item name="circle_menu_item_img" type="id"/> <item name="circle_menu_item_txt" type="id"/> <item name="id_circle_menu_item_center" type="id"/> </resources> ~~~ **Android中的組件需要用一個int類型的值來表示，這個值就是組件標簽中的id屬性值**。 id屬性只能接受資源類型的值，也就是必須以@開頭的值，例如，`@id/abc`、`@+id/xyz`等。 **如果在@后面使用“+”，表示當修改完某個布局文件并保存后，系統會自動在R.java文件中生成相應的int類型變量**。變量名就是“/”后面的值，例如，@+id/xyz會在R.java文件中生成 `int xyz = value`，其中value是一個十六進制的數。如果xyz在R.java中已經存在同名的變量，就不再生成新的變量，而該組件會使用這個已存在的變量的值。 **既然組件的id屬性是一個資源id就可以，那么自然可以設置任何已經存在的資源id值**，例如，@drawable/icon、@string/ok、@+string/you等。也可以**設置android系統中已存在的資源id**，例如`@id/android:list`，那么，這個android是什么意思呢，實際上，**這個android就是系統的R類（在R.java文件中）所在的package。 ** 我們可以在**Java代碼編輯區輸入android.R.id.，就會列出相應的資源id**，例如，**也可以設置id屬性值**是`@id/android:message`。 ~~~ <ListView android:id="@+id/android:message" android:layout_width="wrap_content" android:layout_height="wrap_content"/> ~~~ 還有另外一種方法查看系統中定義的id，進入`<android sdk安裝目錄>\platforms\android-16\data\res\values`目錄，找到**ids.xml**文件，打開后，內容如下： ~~~ <?xml version="1.0" encoding="utf-8"?> <resources> <item type="id" name="background" /> <item type="id" name="checkbox" /> <item type="id" name="content" /> <item type="id" name="empty" /> <item type="id" name="hint" /> <item type="id" name="icon" /> <item type="id" name="icon1" /> <item type="id" name="icon2" /> <item type="id" name="input" /> <item type="id" name="left_icon" /> <item type="id" name="list" /> <item type="id" name="menu" /> <item type="id" name="message" /> <item type="id" name="primary" /> <item type="id" name="progress" /> <item type="id" name="right_icon" /> <item type="id" name="summary" /> <item type="id" name="selectedIcon" /> <item type="id" name="tabcontent" /> <item type="id" name="tabhost" /> <item type="id" name="tabs" /> <item type="id" name="text1" /> <item type="id" name="text2" /> <item type="id" name="title" /> <item type="id" name="title_container" /> <item type="id" name="toggle" /> <item type="id" name="secondaryProgress" /> <item type="id" name="lock_screen" /> <item type="id" name="edit" /> <item type="id" name="widget_frame" /> <item type="id" name="button1" /> <item type="id" name="button2" /> <item type="id" name="button3" /> <item type="id" name="extractArea" /> <item type="id" name="candidatesArea" /> <item type="id" name="inputArea" /> <item type="id" name="inputExtractEditText" /> <item type="id" name="selectAll" /> <item type="id" name="cut" /> <item type="id" name="copy" /> <item type="id" name="paste" /> <item type="id" name="copyUrl" /> <item type="id" name="selectTextMode" /> <item type="id" name="switchInputMethod" /> <item type="id" name="keyboardView" /> <item type="id" name="closeButton" /> <item type="id" name="startSelectingText" /> <item type="id" name="stopSelectingText" /> <item type="id" name="addToDictionary" /> <item type="id" name="accountPreferences" /> <item type="id" name="smallIcon" /> <item type="id" name="custom" /> <item type="id" name="home" /> <item type="id" name="fillInIntent" /> <item type="id" name="rowTypeId" /> <item type="id" name="up" /> <item type="id" name="action_menu_divider" /> <item type="id" name="icon_menu_presenter" /> <item type="id" name="list_menu_presenter" /> <item type="id" name="action_menu_presenter" /> <item type="id" name="overflow_menu_presenter" /> <item type="id" name="popup_submenu_presenter" /> </resources> ~~~ **若在ids.xml中定義了ID，則在layout中可如下定義`@id/price_edit`，否則`@+id/price_edit`** 簡單來講： 1. @+id 新增一個資源id 2. ＠id和android：id，引用現有的資源id 參考文章： [Android 打造炫目的圓形菜單秒秒鐘高仿建行圓形菜單](http://blog.csdn.net/lmj623565791/article/details/43131133) [Adapter模式實戰-重構鴻洋的Android建行圓形菜單](http://blog.csdn.net/bboyfeiyu/article/details/50836594) [源碼下載地址](https://github.com/hongyangAndroid/Android-CircleMenu)