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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯Bugly的专栏

iOS 视图,动画渲染机制探究

终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,...

391120
来自专栏非著名程序员

Android 自定义删除 View

目标:实现一个点击删除的Item ---- 效果图如下:我知道作为研发肯定会吐槽这个删除的设计,但是我还是要上图,不然我们岂不是不明真相的吃瓜群众… ----...

21190
来自专栏逸鹏说道

html5网页中用video标签无法播放MP4视频的解决方法

今天一位朋友Q我说:为什么我录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像?当时我也很好奇MP...

99860
来自专栏deepcc

ios中iframe的scroll滚动事件替代方法

15920
来自专栏IMWeb前端团队

移动端重构实战系列3——各种等分

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

1.2K70
来自专栏腾讯Bugly的专栏

通往全栈工程师的捷径 —— React

首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React...

375100
来自专栏阮一峰的网络日志

一些颜色工具网站

网址:http://www.digitdesigns.com/colrPick/framePic.htm

29610
来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

35780
来自专栏腾讯社交用户体验设计

H5动画开发快车道 - AnimateCC与createjs开发实践

92330
来自专栏deepcc

ios中iframe的scroll滚动事件替代方法

64890

扫码关注云+社区

领取腾讯云代金券