Android-气泡对话框（根据被点击View位置显示、可定制）

最新推荐文章于 2024-04-27 13:08:35 发布
最新推荐文章于 2024-04-27 13:08:35 发布
阅读量539 收藏 2
点赞数
文章标签： 移动开发 ui java
原文链接：https://juejin.im/post/5a333f0af265da431523f408
版权

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?

方法参考表

方法名参数描述
addContentViewView添加填充在气泡中的视图
setClickedViewView被点击的View（触发Dialog出现的View）
setPositionenum BubbleDialog.Position:LEFT, TOP, RIGHT, BOTTOMBubbleDialog相对于被点击的view的位置
calBarboolean是否计算状态栏的高度（如果布局没有全屏，则需要计算）
setOffsetXint如果您对dialog所展示的x轴位置不满，需要调整x轴方向偏移
setOffsetYint如果您对dialog所展示的y轴位置不满，需要调整y轴方向偏移
setBubbleLayoutBubbleLayout自定义dialog的气泡布局
setTransParentBackground-背景透明
softShowUp-当气泡dialog中有EditText时，软键盘弹出会遮挡EditText时，dialog随软键盘上移。
show-显示
autoPosition（已弃）boolean是否开启自动确定位置功能，开启后，“setPosition”功能失效
autoPositionenum
（Auto:AROUND，UP_AND_DOWN，LEFT_AND_RIGHT）		自动确定位置功能，显示在被点击View距离屏幕边缘的最大空间。开启后，“setPosition”功能失效。
AROUND：被点击View四周；
UP_AND_DOWN：被点击View上下显示；
LEFT_AND_RIGHT：被点击View左右显示；
setThroughEventboolean, boolean第一个参数isThroughEvent设置是否穿透Dialog手势交互。
第二个参数cancelable 点击空白是否能取消Dialog，只有当"isThroughEvent = false"时才有效
setRelativeOffsetint设置dialog相对与被点击View的偏移（负值：向被点击view的中心偏移；正值：向被点击view的外侧偏移），设置后会直接影响setOffsetX和setOffsetY方法。
setLayoutint，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)
        .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);
        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);
    }

    @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)
        .calBar(true);
}
mBubbleDialog.show();
复制代码

如何使用 HappyBubble-BubbleLayout?

在XML代码中设置属性值

属性参照表

属性值描述
lookAtleft, top, right, bottom箭头指向
lookLengthdimension箭头的长度
lookPositiondimension箭头相对于x或y轴的位置
lookWidthdimension箭头的宽度
bubbleColorcolor气泡的颜色
bubbleRadiusdimension气泡四角的圆弧
bubblePaddingdimension气泡边缘到内容的距离
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 下载

感谢您的使用、Star与建议！

License

   Copyright 2016 XuJiaji

   Licensed 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.0

   Unless required by applicable law or agreed to in writing, software
   distributed 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 and
   limitations under the License.
复制代码
weixin_34365635
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android-BubbleLayout弹出提示气泡
08-12
BubbleLayout 弹出提示气泡
Android-随意变化的气泡布局Dialog根据点击View的位置定位它的位置Dialog可定制方向等
08-12
随意变化的气泡布局，Dialog根据点击View的位置定位它的位置，Dialog可定制方向等！(Bubble layout changes freely,Dialog click on the location of View positioning its location,Dialog can be customized ...
Android 项目代码混淆
2401_84132628的博客
04-27 734
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021BAT 面试真题解析，我把大厂面试中常被问到的技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。还有 高级架构技术进阶脑图 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。Android 基础知识点Java 基础知识点Android 源码相关分析常见的一些原理性问题。
安卓气泡弹窗
lgz0921的博客
02-14 2636
先画好自己的气泡布局 pop_window_view.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:backgroun
Android Q之气泡弹窗
热门推荐
徐福记456
05-11 3万+
在Android Q中，用户可以借助气泡，轻松地在设备上任何位置进行多任务处理。气泡内置于“通知”系统中，它会浮动在其他应用的上层，并会跟随用户的移动而移动到屏幕的任何位置，用于取代SYSTEM_ALERT_WINDOW。气泡可以展开显示应用功能和信息，并在不使用时折叠起来。当设备处于已锁定状态或始终保持活动状态，气泡会像通知那样显示。气泡弹窗效果如下图： 一、气泡配置信息 气泡是一种可...
Android仿iphone-气泡短信-DEMO.zip
07-10
1. **Android UI设计**：这个DEMO涉及到Android用户界面（UI）的设计，尤其是对话框或者消息流界面的定制。在Android中，我们可以使用`LinearLayout`, `RelativeLayout`, `ConstraintLayout`等布局管理器来构建界面...
Android 仿iphone 气泡短信 DEMO-IT计算机-毕业设计.zip
04-05
2. **对话框与通知**：在Android中，实现短信功能可能需要创建对话框用于输入和显示消息，以及通知来提醒用户新消息的到来。这会涉及AlertDialog和NotificationManager的使用。 3. **数据持久化**：为了存储和检索...
ChatUI-master 仿微信对话框ui
01-19
ChatUI-master是一个专门为Android平台设计的用户界面（UI）项目，其主要目标是仿照微信的对话框界面，提供一个类似的功能和视觉体验。在移动应用开发中，UI设计至关重要，因为它直接影响到用户的使用体验和应用程序...
Android 仿iPhoneQQ气泡聊天样式源码.rar
06-06
"Android 仿iPhoneQQ气泡聊天样式源码"是一个专为Android开发者提供的资源，它允许开发者实现类似iPhone QQ的聊天界面，即带有独特气泡样式的对话框。这种样式通常具有高辨识度，能够提升用户体验，使其感到亲切和...
Android Q之气泡弹窗的实现示例
08-19
主要介绍了Android Q之气泡弹窗的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
BubbleDialog:关于带有气泡效果的对话框
03-22
BubbleDialog:关于带有气泡效果的对话框
Android studio实现点击按钮弹出气泡
03-02
该资源使用Android Studio进行开发，实现在手机中点击按钮弹出气泡，并且可以对气泡内的控件进行触控以及触发相应的触控事件
安卓BadgeView气泡飞出进入动画，跟随手指移动
11-17
安卓BadgeView气泡飞出进入动画，跟随手指移动.松开手后自动飞出屏幕。BadgeView可自定义。动画可以自定义。BadgeView
用Dialog实现的主动弹出式气泡
03-23
用Dialog实现的类似popWindow弹出窗口式的气泡，这个是可以主动弹出的~~
android 开发 短信 气泡,Android Q之气泡弹窗的实现示例
weixin_42372731的博客
05-26 251
// 创建气泡intentIntent target = new Intent(mContext, BubbleActivity.class);PendingIntent bubbleIntent =PendingIntent.getActivity(mContext, 0, target, 0 /* flags */);// 创建气泡元数据Notification.BubbleMetadata ...
Android R 通知新特性—人与对话（气泡窗）
weixin_40637496的博客
03-10 5475
Android R 通知新特性—人与对话（气泡窗） google在之前的版本就提出了一个“people and conversations”的概念，目的是在手机界面中增加交流类UI的比重，因为毕竟用户使用手机，有很大一部分行为都是基于社交去进行，社交是人与社会沟通的基础.
Android 实现气泡布局/弹窗，可控制气泡尖角方向及偏移量
qq_31706281的博客
08-26 777
Android 自定义布局实现气泡弹窗，可控制气泡尖角方向及偏移量。 效果图 实现 首先自定义一个气泡布局。 /** * 气泡布局 */ public class BubbleRelativeLayout extends RelativeLayout { /** * 气泡尖角方向 */ public enum BubbleLeg
python tkinter 实现聊天气泡对话框
最新发布
05-27
Python Tkinter是一种GUI编程库，可以用于创建各种用户界面，包括聊天气泡对话框。实现聊天气泡对话框的方法如下： 1. 导入Tkinter模块 ```python import tkinter as tk ``` 2. 创建主窗口 ```python root = tk....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值