项目需求讨论- 自定义圆形排版的ViewGroup来构成动态弹框菜单

青蛙要fly

发布于 2018-08-29 14:59:31

5160

发布于 2018-08-29 14:59:31

文章被收录于专栏：青蛙要fly的专栏

大家好，又到了新的一次需求分析，这次我们的需求是：在不同的条件的前提下，点击一个菜单按钮，出来不同的菜单。

比如：下面是一系列的公司列表（当然也可以是不同的地区，不同的城市，等等），然后当你选择好某个之后，我们点击菜单按钮，这时候出来不同的菜单

然后我们出来的菜单是：

公司1

公司2

公司3

公司四

然后大家说了。这不是很简单的事么。做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();
}复制代码

如果哪里错了。或者有好的改进，希望大家多指出，谢谢。

附上DEMO:CirclerMenuDialog

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017年08月04日，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度