Android|Android 弧形菜单设计

1.开发环境 Android Studio 3.0
【Android|Android 弧形菜单设计】Gradle版本:4.3
开发测试手机分辨率:720 * 1280
2.功能描述 弧形菜单布局使用常规布局模式也可以实现,但在手机分辨率众多,机型繁杂的情况下,这种自定义形状的菜单设计就需要自己精细雕琢。弧形菜单设计在网上文章非常多,本人结合自己设计经验,简单描述该功能重点实现部分,同时大多数文章只是在讲述如果实现自定义布局,而对于如何结合控件缩放实现此功能的文章基本上很难找到。
3.软件界面 Android|Android 弧形菜单设计
文章图片
image Android|Android 弧形菜单设计
文章图片
image 自定义弧形菜单,继承ViewGroup,实现onMeasure和onLayout方法,同时为自定义控件添加菜单响应事件。
4.核心代码

protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec); int measureWidth = measureWidth(widthMeasureSpec); int measureHeight = measureHeight(heightMeasureSpec); // 计算自定义的ViewGroup中所有子控件的大小measureChildren(widthMeasureSpec, heightMeasureSpec); // 设置自定义的控件MyViewGroup的大小setMeasuredDimension(measureWidth, measureHeight); }有一点非常重要: l,t,r,b均指ViewGroup在软件屏幕中的位置,而childView.layout是以窗口所在区域为坐标体系的。protected void onLayout(boolean changed,int l,int t,int r,int b) {final int childCount = getChildCount(); //计算容器宽度和高度及内圈与外圈半径int viewWidth= r - l; int viewHeight = b - t; int cx = (r + l)/2; int cy = (t + b)/2; int mRadius0 =0; int mRadius1 =0; mRadius0 = viewHeight/2 -20; //中间背景圆半径mRadius1 = mRadius0 + (viewWidth/2 - mRadius0)/2; //图标所在圆半径int iIconSize = mRadius0*2/3; //图标大小int mIntervalHeight =10; //图标之间间隔高度if ( (5 * iIconSize +120) > viewWidth){iIconSize = (viewWidth -120)/5; mRadius0 =3 * iIconSize/2; }mIntervalHeight = (viewHeight -2 * mRadius0)/4; mRadius1 = mRadius0 + (viewWidth/2 - mRadius0)/2; //确定摆放方向及int mLeft =0; // 遍历子Viewfor (int i =0; i < childCount; i++) {View childView = getChildAt(i); // 获得子View的高度int childViewHeight = childView.getMeasuredHeight(); // 获得子View的宽度int childViewWidth = childView.getMeasuredWidth(); if ( i ==0){RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams( mRadius0*2 , mRadius0*2); childView.setLayoutParams(params); childView.layout(cx - mRadius0, cy - mRadius0, cx + mRadius0, cy + mRadius0); }else if ( i ==1 || i==3 || i==4 || i==6){RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams( iIconSize , iIconSize); childView.setLayoutParams(params); //计算图标所在X位置int y0 = mIntervalHeight + iIconSize/2; int x0 = (int)(viewWidth/2 - Math.sqrt( mRadius1 * mRadius1 - (viewHeight/2 - y0) * (viewHeight/2 - y0))); if ( i==3){y0 = viewHeight - y0; }else if ( i==4){x0 = viewWidth - x0; }else if ( i ==6){x0 = viewWidth - x0; y0 = viewHeight - y0; }int x = x0 - iIconSize/2; int y = y0 - iIconSize/2; childView.layout(x, y, x + iIconSize, y + iIconSize); }else if ( i ==2 || i==5 ){RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams( iIconSize , iIconSize); childView.setLayoutParams(params); //计算图标所在X位置int y0 = viewHeight/2; int x0 = viewWidth/2 - mRadius1; if ( i ==5){x0 = viewWidth - x0; }int x = x0 - iIconSize/2; int y = y0 - iIconSize/2; childView.layout(x, y, x + iIconSize, y + iIconSize); }else if ( i ==7){RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams( iIconSize , iIconSize); childView.setLayoutParams(params); //计算图标所在X位置int y0 = viewHeight/2; int x0 = viewWidth/2; int x = x0 - iIconSize/2; int y = y0 - iIconSize/2; childView.layout(x, y, x + iIconSize, y + iIconSize); }}}

5.总结
布局容器中,每个图标位置和大小都需要考虑到,进行精确计算。

关键词: 弧形菜单,图标大小自适应变化,onMeasure,onLayout,自定义布局,自定义菜单设计
本文章提出解决此类问题的大概基本思路,若有源码需求请联系:wjqxjtu@163.com

    推荐阅读