Android气泡对话框HappyBubble根据被点击View位置显示定制

HappyBubble

Github: https://github.com/xujiaji/HappyBubble

Android气泡对话框HappyBubble根据被点击View位置显示定制休闲娱乐

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

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

更新1.1.9: 修复初始位置偏移；新增通过x，y坐标显示HappyDialog1.1.8: 修复当设置透明背景时，状态栏笔墨颜色可能变白色问题1.1.7: 修复位置问题，修复autoPosition无效问题，修复横屏模式问题。
#13#11#101.1.6:新增方向优先级:issues/91.1.5:修复:issues/81.1.4：①新增方法setLayout(int width, int height, int margin)，width（设置气泡的宽）、height（设置气泡的高）、margin（设置间隔屏幕边缘的间距,只有当设置width或height为MATCH_PARENT才有效）。
②autoPosition(true)方法准备弃用（现在还可以用），利用新方法autoPosition(Auto),如果两个都利用了会直接用autoPosition(Auto)。
请参考下方“方法参考表”。
③感谢@wolf8088521供应建议#41.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边缘无法取消哪些app利用了它？

玩清单

如何开始？

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

implementation 'com.github.xujiaji:happy-bubble:1.1.9'如何利用 HappyBubble-BubbleDialog？

方法参考表

最大略的实现

大略实现

多笔墨

new BubbleDialog(this) .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null)) .setClickedView(mButton) .show();向下偏移8dp

向下偏移的

new BubbleDialog(this) .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null)) .setClickedView(mButton4) .setPosition(mPosition) .setOffsetY(8) .show();当想要输入框随软键盘上移时

键盘出来的

new BubbleDialog(this) .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view, null)) .setClickedView(mButton12) .setPosition(mPosition) .softShowUp() .show();自定义 BubbleLayout

自定义气泡样式

BubbleLayout bl = new BubbleLayout(this);bl.setBubbleColor(Color.YELLOW);bl.setShadowColor(Color.RED);bl.setLookLength(Util.dpToPx(this, 18));bl.setLookWidth(Util.dpToPx(this, 24));bl.setBubbleRadius(Util.dpToPx(this, 3));new BubbleDialog(this) .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view5, null)) .setClickedView(mButton8) .setPosition(mPosition) .setBubbleLayout(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"> <Button android:id="@+id/button13" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button1" /> <Button android:id="@+id/button14" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button2" /> <Button android: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); 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); } @Override public void onClick(View v) { if (mListener != null) { mListener.onClick(((Button)v).getText().toString()); } } private static class ViewHolder { Button btn13, btn14, btn15; public ViewHolder(View rootView) { btn13 = rootView.findViewById(R.id.button13); btn14 = rootView.findViewById(R.id.button14); btn15 = rootView.findViewById(R.id.button15); } } public void setClickListener(OnClickCustomButtonListener l) { this.mListener = l; } public interface OnClickCustomButtonListener { void onClick(String str); }}

3、显示

CustomOperateDialog codDialog = new CustomOperateDialog(this) .setPosition(mPosition) .setClickedView(mButton10);codDialog.setClickListener(new CustomOperateDialog.OnClickCustomButtonListener(){ @Override public void onClick(String str) { mButton10.setText("点击了：" + str); }});codDialog.show();查看关于BappyDialog的利用代码

TestDialogActivity 代码

写法建议

根据@hm该朋友在文章中反馈的多次点击后位置不对的问题，是由于多次对BappyDialog进行了设置导致，以是建议下方写法。
(当然如果对重复调用setClickedView()方法设置不同的被点击的控件来更新位置有须要，是须要写在表面的。
)

if(mBubbleDialog == null){ mBubbleDialog = new BubbleDialog(this) .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null)) .setClickedView(mButton4) .setPosition(mPosition) .setOffsetY(8);}mBubbleDialog.show();如何利用 HappyBubble-BubbleLayout？在XML代码中设置属性值

属性参照表

属性值描述lookAtleft, top, right, bottom箭头指向lookLengthdimension箭头的长度lookPositiondimension箭头相对付x或y轴的位置lookWidthdimension箭头的宽度bubbleColorcolor气泡的颜色bubbleRadiusdimension气泡四角的圆弧bubblePaddingdimension气泡边缘到BubbleLayout边缘的间隔shadowRadiusdimension阴影的扩散大小shadowXdimension阴影在x轴方向的偏移shadowYdimension阴影在y轴方向的偏移shadowColorcolor阴影的颜色

xml 例子

<com.xujiaji.happybubble.BubbleLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/bubbleLayout" android:layout_width="match_parent" android:layout_height="200dp" android:layout_margin="16dp" app:lookAt="left" app:lookLength="16dp" app:lookPosition="20dp" app:lookWidth="16dp" />在java代码中定义属性值

BubbleLayout 通过“set属性名”方法和invalidate方法来更新BubbleLayout。

mBubbleLayout.setLook(BubbleLayout.Look.LEFT);

MainActivity 代码

气泡布局详情

demo 下载

https://github.com/xujiaji/HappyBubble/releases/tag/demoApk

License

Copyright 2016 XuJiajiLicensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License.You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS,WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions andlimitations under the License.本文作者:xujiaji版权声明:Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)本文链接:https://blog.xujiaji.com/post/happy-bubble/