项目需求讨论- 自定义圆形排版的ViewGroup来构成动态弹框菜单
项目需求讨论- 自定义圆形排版的ViewGroup来构成动态弹框菜单
大家好，又到了新的一次需求分析，这次我们的需求是：在不同的条件的前提下，点击一个菜单按钮，出来不同的菜单。
比如：下面是一系列的公司列表（当然也可以是不同的地区，不同的城市，等等），然后当你选择好某个之后，我们点击菜单按钮，这时候出来不同的菜单
然后我们出来的菜单是：
公司1
公司2
公司3
公司四
5
6
7
然后大家说了。这不是很简单的事么。做4个布局，分别作为这四个公司的菜单，然后选择哪个公司，就弹出哪个公司的菜单。 少年,Too Young Too Simple,比如我们一共有10项中的业务，某个A公司有我们的三个功能，然后你前段界面写死，B公司有五项功能，然后你这时候写了二个界面，这时候，突然A公司说我升级了。我也要跟B公司一样有五项功能，然后你又去改界面？ 一共有A，B，C...W 公司，难道你就去写A-W个布局？？（同理，如果是城市划分，比如在不同的城市可能支持的功能业务不同，出现不同的菜单。大城市覆盖的功能更全，小城市功能更少）
所以这里我们公司的数量，公司相对于的功能，功能名字，功能图片名字，都是后台传到前端，我们只需要准备一个界面，然后在不同情况下，去显示不同的菜单功能即可。
比如后台传给我们：
{
"companys": [
{
"公司1": [
{
"name": "吃饭",
"iconName": "icon_xxx",
"typeId": "1"
}
]
}
]
}复制代码这样我们就很大程序前段就自由了。那我们的难点就变成了： 既然我们是动态的显示这个菜单，拿到这些数据后怎么来呈现呢 很多人应该做这么个界面会觉得简单，但是如果是一个根据数量自动排好的菜单界面就有点不知所措了。所以这里我们的难点就变成了。如果给了我们N个数据，我们要在这个弹框中显示出N个，那我们的问题也就变成了：能否提供一个自定义的ViewGroup，然后我传入几个View对象，可以按照一定的规则帮我自动排布，这样我们拿到N个数据后，只需要新建相应的View对象，然后添加到这个ViewGroup就行了。
答案当然是能提供。（这波B装的太累了。喘口气。）
既然我们要做的是一个自动按照上面图片显示排布规则的ViewGroup，系统肯定是没有自带的。所以我们就需要自定义一个ViewGroup。
- 自定义ViewGroup的第一步：继承ViewGroup：
public class CircleLayout extends ViewGroup {
private float mAngleOffset;
private float mAngleRange;
private int mInnerRadius;
public CircleLayout(Context context) {
super(context);
}
public CircleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleLayout, 0, 0);
try {
mAngleOffset = a.getFloat(R.styleable.CircleLayout_angleOffset, -90f);
mAngleRange = a.getFloat(R.styleable.CircleLayout_angleRange, 360f);
mInnerRadius = a.getDimensionPixelSize(R.styleable.CircleLayout_innerRadius, 80);
} catch (Exception e) {
e.printStackTrace();
} finally {
a.recycle();
}
}
}复制代码说明下三个参数：
private float mAngleOffset;//摆放子View的角度偏移值
private float mAngleRange;//子VIew可以摆放的角度范围，比如最多是360度
private int mInnerRadius;//子View距离这个ViewGroup中心点的距离复制代码2.实现onMeasure方法：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int count = getChildCount();
int maxHeight = 0;
int maxWidth = 0;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() != GONE) {
measureChild(child, widthMeasureSpec, heightMeasureSpec);
maxWidth = Math.max(maxWidth, child.getMeasuredWidth());
maxHeight = Math.max(maxHeight, child.getMeasuredHeight());
}
}
maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight());
maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());
int width = resolveSize(maxWidth, widthMeasureSpec);
int height = resolveSize(maxHeight, heightMeasureSpec);
if(MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.AT_MOST && MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST){
setMeasuredDimension(1000, 1000);
}else if(MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.AT_MOST){
setMeasuredDimension(1000, height);
}else if(MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST){
setMeasuredDimension(width, 1000);
}else{
setMeasuredDimension(width, height);
}
}复制代码3.实现onLayout方法： 这个很重要，我重点也是讲解这个onLayout方法，因为如果你继承ViewGroup，会提示你一定要实现这个方法。而且我们也知道了我们最主要的点就在于怎么根据传进来的子View的个数来进行相应的摆放。所以我们直接来看onLayout的具体实现。
onLayout方法：
我们假设我们的自定义ViewGroup是占满整个屏幕的，都是match_parent。然后就如下图所示：
这时候如果我们想摆四个子View（四个的分析起来简单点），这时候的界面应该是：
这时候大家肯定想，这有什么规则吗，完全没想法啊。。哈哈不要急，看我一步操作，你马上懂：
我们移动画布，等价我们让坐标系移动了中间，这时候你是不是恍然大悟，我们只需要按照角度来不就可以了吗。
我们继续往下看：
好的。我们可以看到每个子View分到的角度应该是(360 / 4 = 90),而这个子View的中心点又是子View分到的角度的一半：（90/2）。而且这些子View 的中心离原点的距离，都是这个我画的圆形的半径。好了所以现在我们就知道了。
我们假设是宽比高小，我们的圆形的半径就是宽（也就是说圆形的半径取得是(宽和高中的偏小的值)）子View的摆放位置的中心点就是这个圆形的
半径R（在此处也就是viewGroup.Width/2），而这个子View的top值就是(半径R*sin(相应的角度) - 子View高度/2),子View的left值就是(半径R*cos(相应的角度) - 子View宽度/2)，子View的bottom值就是(半径R*sin(相应角度) + 子View高度/2),子View的right值就是(半径R*cos(相应角度) + 子View宽度/2)，
还记不记得我们前面有自定义三个属性，就是：
private float mAngleOffset;//摆放子View的角度偏移值
private float mAngleRange;//子VIew可以摆放的角度范围，比如最多是360度
private int mInnerRadius;//子View距离这个ViewGroup中心点的距离复制代码那我们再外加上着三个属性：
- mAngleOffset：角度偏移值，就用在原本的子View的中心角度(90/2)处，变成了(90/2 + mAngleOffset),这样View 就等于转过来了一定的角度。
- mAngleRange：总的角度，我们上面默认是360度，所以每个子View 所占的角度范围是(360/4 = 90 ),如果设置了这个值，我们就是(mAngleRange/4)。
- mInnerRadius：距离中心的距离，我们本来半径是
(viewGroup.Width /2),现在变为((viewGroup.Width - mInnerRadius) / 2),也就是说离坐标系的中间的的距离更近了。子View之间也就更近了。
千万别忘了。我们前面的讨论的前提都是坐标系已经移动到了这个屏幕的中间，所以我们最后要子View的X ,Y 都重新加上相应的偏移值，也就是 (x+ width/2),(y + height /2 )，还有就是如果子View的数量是1的话，直接就放在了中心地方，也就是 width/2 和height /2处。
最终的代码：
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int childs = getChildCount();
final int width = getWidth();
final int height = getHeight();
final float minDimen = width > height ? height : width;
final float radius = (minDimen - mInnerRadius) / 2f;
float startAngle = mAngleOffset;
for (int i = 0; i < childs; i++) {
final View child = getChildAt(i);
final LayoutParams lp = child.getLayoutParams();
final float angle = mAngleRange / childs;
final float centerAngle = startAngle + angle / 2f;
int x;
int y;
if (childs > 1) {
x = (int) (radius * Math.cos(Math.toRadians(centerAngle))) + width / 2;
y = (int) (radius * Math.sin(Math.toRadians(centerAngle))) + height / 2;
} else {
x = width / 2;
y = height / 2;
}
final int halfChildWidth = child.getMeasuredWidth() / 2;
final int halfChildHeight = child.getMeasuredHeight() / 2;
final int left = lp.width != LayoutParams.MATCH_PARENT ? x - halfChildWidth : 0;
final int top = lp.height != LayoutParams.MATCH_PARENT ? y - halfChildHeight : 0;
final int right = lp.width != LayoutParams.MATCH_PARENT ? x + halfChildWidth : width;
final int bottom = lp.height != LayoutParams.MATCH_PARENT ? y + halfChildHeight : height;
child.layout(left, top, right, bottom);
startAngle += angle;
}
invalidate();
}复制代码