Android 基于BottomSheetDialog 自定义底部弹出Dialog

已于 2023-08-17 16:27:40 修改
阅读量8.8k 收藏 22
点赞数 8
分类专栏： 自定义 View 文章标签： android java apache
于 2021-11-08 15:00:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x_sunmmer/article/details/121206972
版权


前言

BottomSheetDialog 是 Android 6.0 推出的新控件，即

Base class for Dialogs styled as a bottom sheet

基于Dialog样式的一个底部对话框

但原生控件可扩展性往往满足不了日常开发，于是自己基于它自定义一个Dialog，使用方便，可扩展性高，源码在文章最底部，不妨 Star 或 Fork


一、效果（图一 基础样式  图二 列表样式）

         

                                                          

                                                    


二、使用步骤


1.引入库

implementation 'androidx.recyclerview:recyclerview:1.1.0'


2.代码

 基础样式布局 bottom_dialog_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/top_corners_shape"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:paddingHorizontal="30dp"
    android:paddingVertical="25dp">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#2B2B2B"
        android:textSize="18dp"
        android:textStyle="bold"
        android:visibility="gone" />

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:textColor="#2B2B2B"
        android:textSize="24sp"
        android:textStyle="bold"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_leftBtn"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:layout_weight="1"
            android:background="@drawable/dialog_left_btn_shape"
            android:gravity="center"
            android:textColor="#2B2B2B"
            android:textSize="15dp"
            android:textStyle="bold"
            android:visibility="gone" />

        <TextView
            android:id="@+id/tv_rightBtn"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:layout_marginStart="14dp"
            android:layout_weight="1"
            android:background="@drawable/dialog_right_btn_shape"
            android:gravity="center"
            android:textColor="#2984FF"
            android:textSize="15sp"
            android:textStyle="bold"
            android:visibility="gone" />

    </LinearLayout>

</LinearLayout>

列表样式布局 btn_bottom_dialog_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/top_corners_shape"
    android:orientation="vertical"
    android:paddingHorizontal="15dp">

    <TextView
        android:id="@+id/tv_bottom_dialog_title"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center"
        android:textColor="#2B2B2B"
        android:textSize="15sp"
        android:textStyle="bold"
        android:visibility="gone" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#0d000000" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rcv_btn_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

选项列表 btns_item_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="45dp">

    <TextView
        android:id="@+id/tv_dialog_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#2B2B2B"
        android:textSize="15dp"
        android:textStyle="bold" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_alignParentBottom="true"
        android:background="#0d000000" />

</RelativeLayout>

列表样式实体类 DialogBtnData

public class DialogBtnData {

    private int id;
    private String title;

    public DialogBtnData() {
    }

    public DialogBtnData(int id, String title) {
        this.id = id;
        this.title = title;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }
}

列表适配器 BtnsBottomDialogAdapter

public class BtnsBottomDialogAdapter extends RecyclerView.Adapter<BtnsBottomDialogAdapter.VH> {
    private static final String TAG = "BtnsBottomDialogAdapter";

    private Context context;
    private List<DialogBtnData> btnList;
    private OnItemClickListener itemClickListener;

    public BtnsBottomDialogAdapter(Context context, List<DialogBtnData> btnList) {
        this.context = context;
        this.btnList = btnList;
    }

    @NonNull
    @Override
    public VH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.btns_item_layout, parent, false);
        return new VH(v);
    }

    @Override
    public void onBindViewHolder(@NonNull VH holder, int position) {
        DialogBtnData curData = btnList.get(position);
        if (curData == null || TextUtils.isEmpty(curData.getTitle())) {
            return;
        }
        holder.itemView.setOnClickListener(v -> {
            //item 点击事件
            Log.d(TAG, "onClick position:" + position + ", data:" + curData);
            if (itemClickListener != null) {
                itemClickListener.onItemClick(v, position);
            }
        });
        holder.titleTv.setText(curData.getTitle());
    }

    @Override
    public int getItemCount() {
        return btnList.size();
    }

    public void setOnItemClickListener(OnItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }

    public static class VH extends RecyclerView.ViewHolder {

        private TextView titleTv;

        public VH(@NonNull View view) {
            super(view);
            titleTv = view.findViewById(R.id.tv_dialog_btn);
        }
    }

    public interface OnItemClickListener {
        void onItemClick(View view, int position);
    }
}

自定义 BottomDialog （此处有一个坑，当我在平板上运用的时候 横屏下 Dialog 会显示不全。需要手动上拉下，很是头痛 ，但问题不大，最后还是完美解决，代码中有记录）

/**
 * 自定义底部弹出dialog
 */
public class BottomDialog implements View.OnClickListener, BtnsBottomDialogAdapter.OnItemClickListener {
    private static final String TAG = "BottomDialog";

    private Context context;
    private BottomSheetDialog dialog;
    private TextView titleTv;
    private TextView contentTv;
    private TextView leftBtnTv;
    private TextView rightBtnTv;

    private OnBtnClickListener listener;
    private RecyclerView recyclerView;
    private BtnsBottomDialogAdapter adapter;
    private BtnsBottomDialogAdapter.OnItemClickListener listener1;

    /**
     * 基本样式
     *
     * @param context
     */
    public BottomDialog(Context context) {
        this.context = context;
        dialog = new BottomSheetDialog(context, R.style.BottomSheetEdit);
        View view = LayoutInflater.from(context).inflate(R.layout.bottom_dialog_layout, null);
        dialog.setContentView(view);
        // 将BottomSheetDialog背景设为透明
        FrameLayout bottom = dialog.findViewById(R.id.design_bottom_sheet);
        if (bottom != null) {
            bottom.setBackgroundResource(android.R.color.transparent);
            //解决BottomSheetDialog底部弹出框 横屏显示不全的问题
            BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottom);
            /**
             * 控制展开跟收缩
             *
             * STATE_EXPANDED 展开状态
             * STATE_COLLAPSED 收缩状态
             * STATE_DRAGGING 正在拖动状态
             * STATE_HIDDEN 隐藏状态
             */
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }

        titleTv = view.findViewById(R.id.tv_title);
        contentTv = view.findViewById(R.id.tv_content);
        leftBtnTv = view.findViewById(R.id.tv_leftBtn);
        rightBtnTv = view.findViewById(R.id.tv_rightBtn);
        leftBtnTv.setOnClickListener(this);
        rightBtnTv.setOnClickListener(this);
    }

    /**
     * 列表样式
     *
     * @param context
     * @param btnList
     */
    public BottomDialog(Context context, List<DialogBtnData> btnList) {
        dialog = new BottomSheetDialog(context, R.style.BottomSheetEdit);
        View view = LayoutInflater.from(context).inflate(R.layout.btn_bottom_dialog_layout, null);
        dialog.setContentView(view);
        // 将BottomSheetDialog背景设为透明
        FrameLayout bottom = dialog.findViewById(R.id.design_bottom_sheet);
        if (bottom != null) {
            bottom.setBackgroundResource(android.R.color.transparent);
            //解决BottomSheetDialog底部弹出框 横屏显示不全的问题
            BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottom);
            /**
             * 控制展开跟收缩
             *
             * STATE_EXPANDED 展开状态
             * STATE_COLLAPSED 收缩状态
             * STATE_DRAGGING 正在拖动状态
             * STATE_HIDDEN 隐藏状态
             */
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }


        recyclerView = view.findViewById(R.id.rcv_btn_list);
        recyclerView.setLayoutManager(new LinearLayoutManager(context));
        adapter = new BtnsBottomDialogAdapter(context, btnList);
        adapter.setOnItemClickListener(this);
        recyclerView.setAdapter(adapter);
        titleTv = view.findViewById(R.id.tv_bottom_dialog_title);
    }

    public void show() {
        dialog.show();
    }

    public void dismiss() {
        dialog.dismiss();
    }

    public BottomDialog setDismissListener(DialogInterface.OnDismissListener dismissListener) {
        dialog.setOnDismissListener(dismissListener);
        return this;
    }

    public BottomDialog setTitle(String title) {
        if (!TextUtils.isEmpty(title)) {
            titleTv.setVisibility(View.VISIBLE);
            titleTv.setText(title);
        }
        return this;
    }

    public BottomDialog setContent(String content) {
        if (!TextUtils.isEmpty(content)) {
            contentTv.setVisibility(View.VISIBLE);
            contentTv.setText(content);
        }
        return this;
    }

    public BottomDialog setLeftBtn(String btn) {
        if (!TextUtils.isEmpty(btn)) {
            leftBtnTv.setVisibility(View.VISIBLE);
            leftBtnTv.setText(btn);
        }
        return this;
    }

    public BottomDialog setRightBtn(String btn) {
        if (!TextUtils.isEmpty(btn)) {
            rightBtnTv.setVisibility(View.VISIBLE);
            rightBtnTv.setText(btn);
        }
        return this;
    }

    public BottomDialog setOnBtnClickListener(OnBtnClickListener listener) {
        this.listener = listener;
        return this;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_leftBtn:
                dismiss();
                if (listener != null) {
                    listener.onLeftBtnClick(v);
                }
                break;
            case R.id.tv_rightBtn:
                dismiss();
                if (listener != null) {
                    listener.onRightBtnClick(v);
                }
                break;
            default:
                break;
        }
    }

    public void setOnItemClickListener(BtnsBottomDialogAdapter.OnItemClickListener itemClickListener) {
        this.listener1 = itemClickListener;
    }

    @Override
    public void onItemClick(View view, int position) {
        dismiss();
        if (listener != null) {
            listener1.onItemClick(view, position);
        }
    }

    public interface OnBtnClickListener {
        void onLeftBtnClick(View view);

        void onRightBtnClick(View view);
    }

}

 最后终于要应用了

  //普通底部弹出窗
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String text = false ? "您当前可升级更新到V" + 1.1 : "您当前已是最新版本";
                BottomDialog dialog = new BottomDialog(MainActivity.this);
                dialog.setTitle("检查更新").setContent(text).setLeftBtn("取消");
                if (false) {
                    dialog.setRightBtn("点此下载最新版");
                }
                //自定义Dialog按钮监听
                dialog.setOnBtnClickListener(new BottomDialog.OnBtnClickListener() {
                    @Override
                    public void onLeftBtnClick(View view) {
                    }

                    @Override
                    public void onRightBtnClick(View view) {
                    }
                }).show();

            }
        });
        //列表底部弹出窗
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                List<DialogBtnData> btnList = new ArrayList<>();
                btnList.add(new DialogBtnData(1, "保存"));
                btnList.add(new DialogBtnData(2, "取消"));
                BottomDialog dialog = new BottomDialog(MainActivity.this, btnList);

                dialog.setOnItemClickListener(new BtnsBottomDialogAdapter.OnItemClickListener() {
                    @Override
                    public void onItemClick(View view, int pos) {
                        new Thread(new Runnable() {
                            @Override
                            public void run() {
                            }
                        }).start();
                    }
                });
                dialog.show();
            }
        });


总结

切记 遇到问题不要慌不要慌，实在没思路就去看源码，尤其自定义的控件，问题千奇百怪，要细心排查。就像这个横屏dialog显示不全的问题，源码上是这样的

@Override

protected void onStart() {

super.onStart();

   if (behavior != null && behavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {

    behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
  }

}

 如果对你有所帮助的话，不妨 点赞收藏
 如果你有什么疑问的话，不妨 评论私信
 青山不改，绿水长流 ，有缘江湖再见 ~

源码地址：BottomSheetDialog

约翰先森不喝酒
关注
专栏目录
android 全屏弹出dialog,底部弹入，底部弹出+弹出dialog输入法
09-29
android 全屏弹出dialog,底部弹入，底部弹出+弹出dialog输入法，实现了从底部弹出的输入法。自动适配手机屏幕
android底部弹出Dialog
08-13
最简单的底部弹出适应分辨率不同的手机，宽全屏，高自定义的Dialog。而且里面也有获取版本号信息等小部分代码。与Dialog代码分开写，不影响Dialog的代码阅读性。
Android---底部弹窗之BottomSheetDialog
hc982918683的博客
04-12 725
通过LayoutInflater拿到底部弹窗布局后，通过setContentView()把布局加载到BottomSheetDialog中。把bottom_sheet_layout.xml的整个背景设置为shape_bottom_sheet_dialog.xml这个shape。写一个shape，在Drawable下创建一shape_bottom_sheet_dialog.xml，里面设置圆角的样式。在new BottomSheetDialog()的第二个参数，传入这个style.
【Android】BottomSheet基本用法总结（BottomSheetDialog,BottomSheetDialogFragment）
最新发布
Patrick_yuxuan的博客
09-22 1533
是一种位于屏幕底部的面板，用于显示附加内容或选项。提供了从屏幕底部向上滑动显示内容的交互方式。这种设计模式在 Material Design 中被广泛推荐，因为它可以提供一种优雅且不干扰主屏幕内容的方式来展示额外信息或操作。具体实现主要包含：BottomSheetBeahvior 、BottomSheetDialog、BottomSheetDialogFragment。
Dialog
paomian2的博客
05-22 418
1.Dialog添加暗影。添加以下风格 <style name="car_dialog_style" parent="@android:style/Theme.Holo.DialogWhenLarge" > <item name="android:windowFrame">@null</item> <item name="android:windowIsFloa
Android 底部弹出的dialog
qq_17461333的博客
09-18 458
/*底部弹出框dialog * */ 如图： //代码 private void showListDialog() { listDialog = new Dialog(getActivity(), R.style.ActionSheetDialogStyle); View view = View.inflate(getActivity(), R.layout.fo...
Android实现从底部弹出的Dialog示例(一)
08-31
在Android开发中，创建自定义Dialog是常见的需求，尤其当需要从屏幕底部弹出一个对话框时，可以提供更好的用户体验。本文将详细介绍如何在Android中实现这样一个底部弹出的Dialog。 首先，我们需要创建Dialog的布局...
Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)
08-19
在Android开发中，为了提供类似抖音应用中的交互体验，开发者经常需要实现底部弹出对话框效果。本示例将详细讲解如何使用`BottomSheetDialogFragment`来模仿抖音评论底部弹出对话框。`BottomSheetDialogFragment`是...
Android BottomSheetDialog实现底部对话框的示例
08-27
Android BottomSheetDialog 是 Android 6.0 新引入的一种对话框样式，用于实现底部弹出式对话框。它继承自 AppCompatDialogBase，提供了一个基于 Dialog 样式的底部对话框。使用 BottomSheetDialog 可以轻松实现各种...
安卓底部弹出列表的Dialog(RecyclerViewDialog)，支持上下滑动列表
06-05
综上所述，实现“安卓底部弹出列表的Dialog(RecyclerViewDialog)”涉及到多个关键的Android开发技术，包括RecyclerView的使用、自定义Dialog、数据绑定以及触摸事件处理等。掌握这些知识点对于构建高效、用户友好的...
安卓两种底部弹出窗dialog实现方式
10-22
安卓两种底部弹出窗dialog实现方式,一种是列表弹窗实现,2是灵活底部弹窗,传入布局以及控件id
自定义Dialog以动画方式从底部弹出
04-27
通过dialog解析自定义的布局文件，点击触发后以动画方式从底部弹出，类似点击分享底部弹出微信，qq等内容
Android屏幕底部弹出对话框
09-21
Android 底部弹出对话框，点击对话框按钮，实现回调，回传给activity，你点击了哪个按钮，dialog是工具类，可以直接拿过来使用。
自定义底部弹出Dialog
10-13
自定义底部弹出Dialog
Android实现从底部弹出Dialog(和PopWindow实现的效果一样)
君羊
06-29 2万+
上菜,不,上图: 相信上图的效果,大家在android 设备中经常碰到.有时候进行分享操作的时候—–要求从从底部自下而上弹出.上图中的效果既可以通过自定义Dialog实现也可以通过自定义PopWindow来实现.关于popWindow的实现方式,大家可参照本人的另一篇博文Android自定义popWindow教程....
android官方底部dialog,底部弹出Dialog
weixin_29771573的博客
05-25 250
设置样式@nulltruetruetrue@android:color/transparent@android:color/transparenttrue0.6true@style/AnimationActivity@anim/dialog_enter@anim/dialog_exitxmlns:android="http://schemas.android.com/apk/res/android...
底部弹出Dialog
wyc7556342的博客
07-06 149
设置样式 </style> <style name="Theme_dialog" parent="@android:style/Theme.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:windowIsFloating">true</item> <item ...
Android 实现屏幕底部弹出Dialog
热门推荐
zhao_doubi的博客
09-08 2万+
Android 实现屏幕底部弹出Dialog 封装使用(本文作为开发中记录使用,请轻喷)日常开发中经常用到Dialog实现用户交互界面每次都要重写一个很麻烦(产品经理一言不合就要求弹窗)效果图 这个效果要的算是比较常见的了 package cn.touna.collection.view;import android.app.Dialog; import android.content.Conte
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值