写点什么

Android- 气泡对话框(根据被点击 View 位置显示、可定制,移动端开发

用户头像
Android架构
关注
发布于: 2021 年 11 月 05 日

](


) | [



](https://bintray.com/xujiaji/maven/happy-bubble/1.1.4) |


[Go Github](


)


气泡布局的形状可以改变,如四角弧度、气泡颜色、箭头大小和阴影。


气泡 Dialog 可以根据被点击的 view 的位置来确定自己展示的位置。

更新

  • 1.1.4:

  • ①新增方法setLayout(int width, int height, int margin),width(设置气泡的宽)、height(设置气泡的高)、margin(设置距离屏幕边缘的间距,只有当设置 width 或 height 为 MATCH_PARENT 才有效)。

  • autoPosition(true)方法准备弃用(现在还可以用),使用新方法autoPosition(Auto),如果两个都使用了会直接用autoPosition(Auto)。请参考下方“方法参考表”。

  • ③感谢[@wolf8088521](


)提供建议[#4](


)


  • 1.1.3:

  • ①通过重新调用 setClickedView 可以直接更新当前 dialog 的所在位置。

  • ②新添加 setRelativeOffset(int)方法,设置 dialog 相对与被点击 View 的偏移(负值:向被点击 view 的中心偏移;正值:向被点击 view 的外侧偏移)

  • 测试页面SetClickedViewTestActivity.java



  • 1.1.2:修复默认值没有适配屏幕

  • 1.1.1:修复大小变化后,没有对应变化位置的问题;修复接触顶部偏位问题;

  • 1.1.0

  • ①Dialog 交互事件传递到 Activity 达到不在不关闭 Dialog 的情况下做其他 Activity 的操作。

  • ②添加自动根据被点击 View 距离屏幕边缘的距离确定 Dialog 的位置。

  • ③新增“autoPosition”和“setThroughEvent”方法,请参考“BubbleDialog 方法参考表”



  • 1.0.3:继续优化了点击在气泡之外才会被 dismiss;修复了 Dialog 周围会有部分点击无法 dismiss;

  • 1.0.2:修复点击 dialog 边缘无法取消

如何开始?

在你模块中的 build.gradle 添加上 HappyBubble 依赖


compile 'com.github.xujiaji:happy-bubble:1.1.4'

如何使用 HappyBubble-BubbleDialog?

方法参考表



AROUND:被点击 View 四周;


UP_AND_DOWN:被点击 View 上下显示;


LEFT_AND_RIGHT:被点击 View 左右显示; || setThroughEvent | boolean, boolean | 第一个参数 isThroughEvent 设置是否穿透 Dialog 手势交互。


第二个参数 cancelable 点击空白是否能取消 Dialog,只有当"isThroughEvent = false"时才有效 || setRelativeOffset | int | 设置 dialog 相对与被点击 View 的偏移(负值:向被点击 view 的中心偏移;正值:向被点击 view 的外侧偏移),设置后会直接影响 setOffsetX 和 setOffsetY 方法。 || setLayout | int,int,int | 设置气泡的宽高和距离屏幕边缘的距离


第一个参数:width(设置气泡的宽);


第二个参数:height(设置气泡的高);


第三个参数:margin(设置距离屏幕边缘的间距,只有当设置 width 或 height 为 MATCH_PARENT 才有效)。


宽高单位为 px 或 MATCH_PARENT |

最简单的实现



|



|


需要提供:Context、填充的 View、被点击的 View。

如果最外层布局没有全屏时,您需要计算状态栏的高度,否则会多向下偏移一个状态栏的高度。


new BubbleDialog(this).addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null)).setClickedView(mButton).calBar(true).show();

向下偏移 8dp


new BubbleDialog(this).addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null)).setClickedView(mButton4).setPosition(mPosition).setOffsetY(8).calBar(true).show();

当想要输入框随软键盘上移时


new BubbleDialog(this).addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view, null)).setClickedView(mButton12).setPosition(mPosition).calBar(true).softShowUp().show();

自定义 BubbleLayout.


BubbleLayout bl = new BubbleLayout(this);bl.setBubbleColor(Color.BLUE);bl.setShadowColor(Color.RED);bl.setLookLength(Util.dpToPx(this, 54));bl.setLookWidth(Util.dpToPx(this, 48));new BubbleDialog(this).addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view5, null)).setClickedView(mButton8).setPosition(mPosition).calBar(true).setBubble


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


Layout(bl).show();

自定义 BubbleDialog,可交互的 BubbleDialog.


1、布局


<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="160dp"android:layout_height="match_parent"android:orientation="vertical">


<Buttonandroid:id="@+id/button13"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button1" />


<Buttonandroid:id="@+id/button14"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button2" />


<Buttonandroid:id="@+id/button15"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button3" />


</LinearLayout>


2、自定义 BubbleDialog


/**


  • 自定义可操作性 dialog

  • Created by JiajiXu on 17-12-11.*/


public class CustomOperateDialog extends BubbleDialog implements View.OnClickListener {private ViewHolder mViewHolder;private OnClickCustomButtonListener mListener;


public CustomOperateDialog(Context context) {super(context);calBar(true);setTransParentBackground();setPosition(Position.TOP);View rootView = LayoutInflater.from(context).inflate(R.layout.dialog_view4, null);mViewHolder = new ViewHolder(rootView);addContentView(rootView);mViewHolder.btn13.setOnClickListener(this);mViewHolder.btn14.setOnClickListener(this);mViewHolder.btn15.setOnClickListener(this);

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Android-气泡对话框(根据被点击View位置显示、可定制,移动端开发