底部滑出的Dialog

最新推荐文章于 2022-11-14 03:09:46 发布
最新推荐文章于 2022-11-14 03:09:46 发布
阅读量1k 收藏 4
点赞数 2
分类专栏： dialog Android Dialog 文章标签： 底部滑出的Dialog
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuqingsen1/article/details/83302338
版权

推荐：

日常工作中，自己定义了 Dialog 的工具类，以便使用，下面从底部滑出的 Dialog，效果图如下：

下面主要讲的是：

  • 自定义 Dialog 工具类
  • 自定义布局文件
  • 自定义 Dialog 显示风格
  • 显示/关闭 Dialog（使用自定义 dialog）

1.自定义 Dialog 工具类

定义一个名字为 DialogUtil 的工具类，代码如下：

import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

/**
 * author: wu
 * date: on 2018/7/5.
 * describe:dialog工具类
 */

public class DialogUtil {
    private Dialog dialog;
    private View inflate;

    public void showBottomDialog(Context context) {
        //自定义dialog显示布局
        inflate = LayoutInflater.from(context).inflate(R.layout.dialog_bottom, null);
        //自定义dialog显示风格
        dialog = new Dialog(context, R.style.DialogBottom);
        //弹窗点击周围空白处弹出层自动消失弹窗消失(false时为点击周围空白处弹出层不自动消失)
        dialog.setCanceledOnTouchOutside(true);
        //将布局设置给Dialog
        dialog.setContentView(inflate);
        //获取当前Activity所在的窗体
        Window window = dialog.getWindow();
        WindowManager.LayoutParams wlp = window.getAttributes();
        wlp.gravity = Gravity.BOTTOM;
        wlp.width = WindowManager.LayoutParams.MATCH_PARENT;
        window.setAttributes(wlp);
        dialog.show();
    }

    //关闭dialog时调用
    public void close() {
        if (dialog != null) {
            dialog.dismiss();
            dialog = null;
        }
    }
}

2.自定义布局文件

定义一个名字为 dialog_bottom 的布局文件，代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="分享到"
        android:textColor="#FF999999"
        android:textSize="12sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">


        <LinearLayout
            android:id="@+id/ll_weixin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_launcher_background" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="微信好友"
                android:textColor="#FF666666"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_friend"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_launcher_background" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="朋友圈"
                android:textColor="#FF666666"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_qq"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_launcher_background" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="QQ好友"
                android:textColor="#FF666666"
                android:textSize="12sp" />
        </LinearLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="20dp"
        android:background="#FFEEEEEE" />

    <TextView
        android:id="@+id/tv_cancel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:paddingBottom="13dp"
        android:paddingTop="13dp"
        android:text="取消分享"
        android:textColor="#000000"
        android:textSize="16sp" />
</LinearLayout>

3.自定义 Dialog 显示风格

在 styles 文件中自定义一个名字为 DialogBottom 的风格，代码如下：

<!--位于底部dialog的风格-->
    <style name="DialogBottom" parent="@android:style/Theme.Dialog">
        <!-- 背景透明 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <!-- 浮于Activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 边框 -->
        <item name="android:windowFrame">@null</item>
        <!-- Dialog以外的区域模糊效果 -->
        <item name="android:backgroundDimEnabled">true</item>
        <!-- 无标题 -->
        <item name="android:windowNoTitle">true</item>
        <!-- 半透明 -->
        <item name="android:windowIsTranslucent">true</item>
        <!--点击dialog以外区域关闭弹窗-->
        <item name="android:windowCloseOnTouchOutside">true</item>

        <!-- Dialog进入及退出动画 -->
        <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item>
    </style>

    <!-- ActionSheet进出动画 -->
    <style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/action_dialog_in</item>
        <item name="android:windowExitAnimation">@anim/action_dialog_out</item>
    </style>

在 anim 文件包下面自定义名字为 action_dialog_in 的底部滑入动画和名字为 action_dialog_out 的底部滑出动画，代码分别为：

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="100%"
    android:toYDelta="0" />
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="0"
    android:toYDelta="100%" />

4.显示/关闭 Dialog

在 Activity 中添加如下代码即可：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final DialogUtil dialogUtil = new DialogUtil();
        //延迟一秒显示位于底部的dialog
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                dialogUtil.showBottomDialog(MainActivity.this);
            }
        }, 1000);

        //关闭dialog时调用
//        dialogUtil.close();
    }
}

推荐：

吴庆森
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
从屏幕底部滑出Dialog
好读书的程序员的博客
03-18 1131
概览： 1. 首先需要定义两个滑进滑出的动画。 2. 定义Dialog的主题。 3. 触发dialog。 正文： 1. 首先需要定义两个滑进滑出的动画。 滑进的动画slide_in_up.xml <translate xmlns:android="http://schemas.android.com/apk/res/android" android:du
Android 仿苹果底部弹出Dialog
08-31
在Android开发中，为了提供与iOS类似的用户体验，开发者有时会想要实现类似苹果设备底部弹出的对话框（Dialog）。...遵循以上步骤，开发者可以创建出与苹果设备相似的底部弹出Dialog，提升Android应用的用户体验。
jQuery底部滑出信息.zip
07-04
jQuery底部滑出信息是一款页面拖动到底部自动滑出相关的信息。
自定义底部滑出的dialog
u011506413的博客
03-18 438
目的：实现一个自定义dialog，用于退出，从底部滑入和滑出 要解决的问题： 1.dialog的位置要修改到底部； 2.dialog有默认的padding，要去这些padding，让dialog于屏幕同宽；（这个无法通过设置Gravity.width办到） 3.dialog的滑入和滑出动画；（style中有enter和exit Animation属性） 解决方案： 示例：写一个Logo
Android 基于BottomSheetDialog 自定义底部弹出Dialog
X_sunmmer的博客
11-08 8419
前言 BottomSheetDialog 是 Android 6.0 推出的新控件，即 Base class for Dialogs styled as a bottom sheet 基于Dialog样式的一个底部对话框 但原生控件可扩展性往往满足不了日常开发，于是自己基于它自定义一个Dialog，使用方便，可扩展性高 一、效果 二、使用步骤 1.引入库 implementation 'androidx.recyclerview:recyclerview:1.1.0' 2.代码
Android实现从底部弹出的Dialog
weixin_44827506的博客
10-25 560
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="...
仿ios底部弹dialog
09-08
在iOS系统设计中，底部弹出对话框（通常被称为Action Sheet）是一种常见的交互方式，用于向用户展示一组可选操作，通常与按钮点击或者特定事件触发相关联。这种设计风格简洁明了，易于用户理解和操作。现在我们来...
自定义底部弹出Dialog
10-13
通常，这样的Dialog会从屏幕底部滑出，并提供一到多个操作选项。以下我们将详细探讨如何在Android中实现自定义底部弹出Dialog。 首先，我们创建一个自定义Dialog布局文件。在`res/layout`目录下，创建一个XML文件，...
底部弹出dialog
07-02
在Android应用开发中，"底部弹出Dialog"是一种常见的用户界面设计模式，它通常用于显示临时的通知、选项或请求用户的确认。这种对话框通常从屏幕底部向上滑动出现，给人以现代、直观的交互体验。在本文中，我们将...
android 全屏弹出dialog,底部弹入，底部弹出+弹出dialog输入法
09-29
实现全屏弹出Dialog的关键在于设置Dialog的主题和布局。我们可以创建一个新的主题，例如在`styles.xml`文件中定义： ```xml <style name="FullScreenDialogTheme" parent="Theme.AppCompat.Light.Dialog"> ...
自定义Dialog以动画方式从底部弹出
04-27
通过dialog解析自定义的布局文件，点击触发后以动画方式从底部弹出，类似点击分享底部弹出微信，qq等内容
从底部滑出动画引发的关于View的一点理解
firesmog的博客
03-16 1291
简要介绍这篇博文主要是自己在借鉴一个从底部滑出布局的属性动画过程中，遇到了一点小疑惑，从而去查阅了一点相关资料，总结一下对window、Activity、DecorView、ViewRoot关系的理解，同时也非常感谢点击文章给我带来的帮助。也是借鉴了一篇关于做从底部滑出的动画的博文的demo，这里自己将给出一点自己的理解注释。关于View的一点解析这里给出的解析实际是留给自己看的，供自己学习，怕以后
Android之底部弹窗对话框
有所尝试，有所作为！
07-04 3846
Android之底部弹窗对话框说到底部弹窗突然想到几年前做运动轨迹时轨迹记录可以从底部弹窗选择相对时间的轨迹，那时候用的popwindow。老规矩先上效果图核心代码 final Dialog dialog = new Dialog(this, R.style.BottomDialogStyle); View view = View.inflate(this, R.layout.view_bo...
Android|使用BottomSheetDialog和RecyclerView实现底部弹出评论区功能
纸鱼PaperFish的博客
11-14 2075
Android中使用BottomSheetDialog和RecyclerView实现底部弹出评论区功能
安卓使用Dialog实现底部弹窗效果
lst_shuo的博客
03-16 415
实现底部对话框的原理就是修改对话框的内容布局contentView的参数，使它的宽度刚好等于屏幕的宽度，并且设置对话框所在Window的gravity属性为bottom。需要注意的是，上面代码中contentView.getLayoutParams()需要在setContentView方法后调用，否则获取到的LayoutParams为null，当然也可以自己new一个LayoutParams设置给...
Android开源库-BottomDialog两种样式弹框
Tobey_r1的博客
08-23 719
网上这种底部弹窗一大堆，写这个开源library主要还是自己后面项目集成使用方便。
DialogUtils 弹框的工具类
代码神器
05-02 1702
package com.mylibrary.utils; import android.app.Dialog; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.support.v4.content.ContextCompat; import android
Kotlin SheetBottomDialog 实现底部支付弹窗 (圆角矩形，展开状态等避坑指南）
qq_37685768的博客
05-26 1374
1.啥都别扯，先看效果： 2.扯扯原因 谷歌在2021年底宣布韩国谷歌商店应用支持多种支付方式，但前提是得满足一些开发规范，并且要求使用SheetBottom来开发支付弹出框，我也是第一次接触这玩意儿，所以就开始怼啊，怼完发现还真比自定义的底部弹出Dialog好使。就想分享下这几天的开发过程以及踩的坑，希望能够帮到你。 3.细细分说 继续解决标题中问题的童鞋： 圆角矩形实现：3.2+3.3 展开状态：3.4（直接搜behavior） 3.1 SheetBottom依赖 只要在App级build.gradl
自定义 DialogFragment 实现底部弹出 dialog
Zackratos的博客
06-13 7144
前端时间公司做的项目要求和 iOS 版本的 UI 风格保持高度的一致，虽然我个人及其排斥这种仿 iOS 的 UI，然而人在屋檐下，不得不出卖自己的节操。其中就有一个底部弹出 dialog 的效果，宽度还是全屏的，就项这个样子（其实这张图就是我最终实现的效果）： 于是乎百度 google 了一番，居然没有找到用 DialogFragment 实现的类似的效果，网上大多实现类
dialog从底部滑动弹出
最新发布
06-13
如果你想要实现一个从底部滑动弹出的对话框，可以尝试以下步骤： 1. 创建一个 `QDialog` 对象，并将其固定在底部位置，例如设置其 `Qt::BottomDockWidgetArea` 属性为 `true`。可以使用 `QWidget::setGeometry()` 函数进行设置。 2. 在对话框的构造函数中，将其隐藏，例如使用 `QDialog::hide()` 函数。 3. 在需要弹出对话框的时候，使用 `QPropertyAnimation` 类创建一个动画对象，并在其中设置对话框的位置和大小属性。例如，可以设置对话框的位置从底部移动到屏幕中心，同时设置对话框的大小从 0 变为适当的大小。 4. 在动画结束后，使用 `QDialog::exec()` 函数让对话框显示，并等待其关闭。 以下是一个示例代码，可以实现一个从底部滑动弹出的对话框： ```cpp #include <QDialog> #include <QPropertyAnimation> class SlidingDialog : public QDialog { public: SlidingDialog(QWidget *parent = nullptr) : QDialog(parent) { // 设置对话框的初始位置和大小 setGeometry(parent->geometry().left(), parent->geometry().bottom() - 50, parent->geometry().width(), 0); // 将对话框设为 BottomDockWidgetArea 类型 setAttribute(Qt::WA_ShowWithoutActivating); setWindowFlags(Qt::FramelessWindowHint | Qt::BottomDockWidgetArea); // 隐藏对话框 hide(); } void showAnimated() { // 创建动画对象，设置对话框的位置和大小属性 QPropertyAnimation *animation = new QPropertyAnimation(this, "geometry"); animation->setDuration(500); animation->setStartValue(geometry()); animation->setEndValue(QRect((parentWidget()->width() - width()) / 2, (parentWidget()->height() - height()) / 2, width(), height())); // 显示对话框 show(); // 开始动画 animation->start(QAbstractAnimation::DeleteWhenStopped); // 等待对话框关闭 exec(); } }; ``` 使用时，可以在需要弹出对话框的地方创建一个 `SlidingDialog` 对象，并调用其 `showAnimated()` 函数即可： ```cpp void MainWindow::on_btnOpenDialog_clicked() { // 创建一个 SlidingDialog 对象，并调用其 showAnimated() 函数 SlidingDialog *dialog = new SlidingDialog(this); dialog->setFixedSize(200, 100); dialog->showAnimated(); } ``` 需要注意的是，该示例中的对话框是固定在底部位置的，如果需要弹出在其他位置，则需要对代码进行适当修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值