自定义气泡菜单

最新推荐文章于 2025-01-14 10:38:27 发布

原创最新推荐文章于 2025-01-14 10:38:27 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种自定义Bubble组件的设计思路及实现细节，包括尖角、圆角等特性的灵活配置，通过不同方位的布局调整适应多样化的界面需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先占个坑，下次写，附上截图

这里写图片描述
效果图

正文

说起做这个组件的前言，我在还没做以前还以为是UI给一个图，里面放布局填充，图作为背景，后来发现越来越多类似长短不一，颜色不一的菜单，如果是图片的话，可就太折腾了

首先分解需求，会发现，刨除里面的子view布局不管，会发现有以下几点

尖角(三角形)
- 尖角的方位
- 尖角的高度
- 尖角的底边宽度
圆角方形
- 圆角radius
- 设置尖角以后，方块图形本身需要相对于整体布局的偏移量
首先是属性的抽取

对应上面的图1分别是

方位
尖角底边
尖角高度
背景色
边框线条色
边框圆角
尖角距离屏幕左边的margin值
方形内部的view距离方框的padding值
尖角位置(毕竟有可能是不定长度，但是居中或者居左，居右之类的)

再来看initOrientation方法

 private void initOrientation(int orientation) {
        int viewDistance = (int) (PADDING + mCornerPadding);
        switch (orientation) {
            case 1:
                mOrientation = BubbleOrientation.TOP;
                setPadding(viewDistance, (int) (mCornerPadding + mCornerLength), viewDistance, viewDistance);
                break;
            case 2:
                mOrientation = BubbleOrientation.RIGHT;
                setPadding((int) (mCornerPadding + mCornerLength), viewDistance, viewDistance, viewDistance);
                break;
            case 3:
                mOrientation = BubbleOrientation.LEFT;
                setPadding(viewDistance, viewDistance, (int) (mCornerPadding + mCornerLength), viewDistance);
                break;
            case 4:
                mOrientation = BubbleOrientation.BOTTOM;
                setPadding(viewDistance, viewDistance, viewDistance, (int) (mCornerPadding + mCornerLength));
                break;
            default:
                break;
        }
    }