自定义View练习圆形菜单

自定义View练习 - 圆形菜单

来源

自定义view实战笔记–CircleMenu

关键代码都在这篇博客中有说明.

效果图

主要实现类

CircleMenuLayout.java

自定义ViewGroup的重点是测量和布局

&＃64;Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int measureWidth;int measureHeight;//获得测量大小和模式int size &＃61; MeasureSpec.getSize(widthMeasureSpec);int mode &＃61; MeasureSpec.getMode(widthMeasureSpec);if (mode &＃61;&＃61; MeasureSpec.EXACTLY) { //精确模式measureWidth &＃61; measureHeight &＃61; Math.min(size, getDefaultWidth());} else { //wrap_content模式//获得指定的背景大小,背景有多大,控件就有多大int suggestedMinimumWidth &＃61; getSuggestedMinimumWidth();//如果suggestedMinimumWidth为0, 则没有背景if (suggestedMinimumWidth &＃61;&＃61; 0) { //如果没有背景,则设置为默认宽度measureWidth &＃61; measureHeight &＃61; getDefaultWidth();} else { //如果有背景,则设置为背景宽和默认宽度的最小值measureWidth &＃61; measureHeight &＃61; Math.min(suggestedMinimumWidth, getDefaultWidth());}}setMeasuredDimension(measureWidth, measureHeight);//直径为测量的宽度diameter &＃61; measureWidth;//测量子Viewfor (int i &＃61; 0; i //默认系统是通过onMeasure给予MeasureSpec参数的,而对于inflate进来的子视图是没有MeasureSpec参数的//因此,我们需要自己设计MeasureSpec,传递给子视图int makeMeasureSpec &＃61; MeasureSpec.makeMeasureSpec(diameter / 3, MeasureSpec.EXACTLY);childView.measure(makeMeasureSpec, makeMeasureSpec);}}/*** 获得屏幕宽高中的较小值*/public int getDefaultWidth() {DisplayMetrics displayMetrics &＃61; getResources().getDisplayMetrics();int widthPixels &＃61; displayMetrics.widthPixels;int heightPixels &＃61; displayMetrics.heightPixels;return Math.min(widthPixels, heightPixels);}

&＃64;Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {for (int i &＃61; 0; i int childWidth &＃61; childView.getMeasuredWidth();int left &＃61; (int) (radius &＃43; distance * Math.cos(Math.toRadians(startAngle)) - childWidth / 2);int top &＃61; (int) (radius &＃43; distance * Math.sin(Math.toRadians(startAngle)) - childWidth / 2);int right &＃61; left &＃43; childWidth;int bottom &＃61; top &＃43; childWidth;childView.layout(left, top, right, bottom);startAngle &＃43;&＃61; 360 / getChildCount();}}

触摸控件,让子View伴随着滚动. 这里需要重写onTouchEvent.

private float lastX;private float lastY;&＃64;Overridepublic boolean onTouchEvent(MotionEvent event) {float x &＃61; event.getX();float y &＃61; event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:lastX &＃61; x;lastY &＃61; y;break;case MotionEvent.ACTION_MOVE:float start &＃61; CircleUtil.getAngle(lastX, lastY, diameter); //开始角度float end &＃61; CircleUtil.getAngle(x, y, diameter); //结束角度float angle; //旋转的角度//todo 这里有很大的疑问? 为什么这个角度是负数?//判断点击的点所处的象限,如果是1,4象限,角度值是正数,否则是负数if (CircleUtil.getQuadrant(x, y, diameter) &＃61;&＃61; 1 || CircleUtil.getQuadrant(x, y, diameter) &＃61;&＃61; 4) {angle &＃61; end - start;} else {angle &＃61; start - end;}startAngle &＃43;&＃61; angle;requestLayout();//重新布局lastX &＃61; x;lastY &＃61; y;break;case MotionEvent.ACTION_UP:break;}return true;}

其中使用了工具类CircleUtils

public class CircleUtil {/*** 根据触摸的位置&＃xff0c;计算角度** &＃64;param xTouch* &＃64;param yTouch* &＃64;param d 直径* &＃64;return*/public static float getAngle(float xTouch, float yTouch,int d) {double x &＃61; xTouch - (d / 2f);double y &＃61; yTouch - (d / 2f);//hypot:通过直角边,求斜边return (float) (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI);}/*** 根据当前位置计算象限** &＃64;param x* &＃64;param y* &＃64;param d 直径* &＃64;return*/public static int getQuadrant(float x, float y,int d) {int tmpX &＃61; (int) (x - d / 2);int tmpY &＃61; (int) (y - d / 2);if (tmpX >&＃61; 0) {return tmpY >&＃61; 0 ? 4 : 1;} else {return tmpY >&＃61; 0 ? 3 : 2;}}
}

学到的知识

1. 在自定义ViewGroup中不仅要测量自己的宽高, 还需要测量子View的大小.
2. 重写onLayout主要是对子View坐标的计算. 通过规律获得坐标值.
3. onTouchEvent返回true, 表示当前控件消费了touch事件.

遗留的问题

1. 在onTouchEvent中为什么在第一和第四象限计算角度会是正数,而其他象限是负数? 我通过打印日志看到, end角度在 -90度 ~0和0~ 90度 之间变化. 这个规律不是很清楚.

github地址: https://github.com/cizkey/CustomPractice/tree/master/CircleMenu