项目需求讨论- 自定义圆形排版的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。

1. 自定义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中心点的距离复制代码

那咱们再外加上着三个属性：

1. mAngleOffset：角度偏移值，就用在本来的子View的中心角度(90/2)处，变成了(90/2 + mAngleOffset),这样View 就等于转过来了必定的角度。
2. mAngleRange：总的角度，咱们上面默认是360度，因此每一个子View 所占的角度范围是(360/4 = 90 ),若是设置了这个值，咱们就是(mAngleRange/4)。
3. 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();
}复制代码

---

若是哪里错了。或者有好的改进，但愿你们多指出，谢谢。

附上DEMO:CirclerMenuDialog