Android 弹出菜单(类iOS UIMenuController) 气泡菜单

PopupMenuView是一个类似iOS的UIMenuController的控件,显示效果如下:

项目地址: https://github.com/kareluo/PopupMenuView

Android 弹出菜单(类iOS UIMenuController) 气泡菜单_第1张图片

PopupMenuView

用过iOS系统的应该都知道,iOS系统中有一个控件是弹出菜单,就是QQ和微信聊天界面中长按消息那个控件。如下:

Android 弹出菜单(类iOS UIMenuController) 气泡菜单_第2张图片

UIMenuController

Android 实现

分析来看,可以通过PopupWindow来实现,ContentView为一个LinearLayout包含许多TextView,嗯,不过其样式实现起来就不那么容易了,像是一个气泡一样,那么如何画一个气泡呢?
可以把气泡分为两个部分:一部分是一个圆角矩形,另一部分是一个小三角形。如下:

Android 弹出菜单(类iOS UIMenuController) 气泡菜单_第3张图片

圆角矩形加三角形

这个很好画,Canvas对象里有很多绘画的方法,但是我们需要将这个组合图形当做一个整体绘制出去,最好的方式是先构造成一个Path,一个简单的气泡组合:

Path triangle = new Path();
triangle.lineTo(32, 0);
triangle.lineTo(16, 16);
triangle.close();

Path path = new Path();
path.addRoundRect(new RectF(0, 0, 100, 32), 16, 16, Path.Direction.CW);
path.addPath(triangle, 16, 32);

气泡和控件如何结合在一起呢?Paint可以设置很多绘制模式,如DST_IN,SRC_IN等。

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

Android 弹出菜单(类iOS UIMenuController) 气泡菜单_第4张图片

[email protected]

Canvas绘制图案时是分层的,如DST_IN的功能就是绘制上一层和本层的交集部分的上一层内容,这样一来将控件与气泡图案分层绘制,并设置绘制模式,这样就会绘制出气泡样式的控件来,不仅限制于气泡,任何样式都可以实现。也不会影响控件的点击效果,如点击变色等。这也是PopupMenuView的核心实现。

项目地址: https://github.com/kareluo/PopupMenuView



作者:kareluo
链接:https://www.jianshu.com/p/df158dfcc5b7
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(android,UI)