ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

BottomDialogs进阶教程:如何用setCustomView向Bottom Sheet嵌入表单与列表视图

BottomDialogs进阶教程:如何用setCustomView向Bottom Sheet嵌入表单与列表视图 BottomDialogs进阶教程如何用setCustomView向Bottom Sheet嵌入表单与列表视图【免费下载链接】BottomDialogsAn Android library that shows a customizable Material-based bottom sheet. API 11 required.项目地址: https://gitcode.com/gh_mirrors/bo/BottomDialogsAndroid 底部弹窗Bottom Sheet进阶指南来了BottomDialogs是一个 Material 风格的 Android 底部弹窗库支持 API 11除了标题、文字和按钮它还提供了setCustomView()方法让你把表单、列表等任意自定义视图嵌入 Bottom Sheet。本教程带你从集成到实战一步到位掌握这个核心能力。一、为什么新手该学 Bottom Sheet相比居中的 Dialog底部弹窗Bottom Sheet在移动端的优势很明显✅拇指友好操作按钮集中在屏幕下方单手即可触达✅上下文不断裂用户视线几乎不离开当前页面✅场景通用筛选、多选、快捷表单、操作确认都能装下而 BottomDialogs 的价值在于几行代码就能拿到一个动画流畅、可定制的 Material 底部弹窗核心实现在 library/src/main/java/com/github/javiersantos/bottomdialogs/BottomDialog.java。二、5分钟集成 BottomDialogs在仓库根目录README.md中可以看到完整的依赖声明核心就两步在工程的build.gradle中添加仓库源再在模块build.gradle中引入com.github.javiersantos:BottomDialogs依赖。集成后一个最基础的底部弹窗长这样new BottomDialog.Builder(this) .setTitle(Awesome!) .setContent(欢迎体验 BottomDialogs) .show();弹窗默认从底部滑入、点击外部可关闭show()、dismiss()等方法一应俱全。下面开始进阶部分。三、setCustomView把自定义视图放进 Bottom Sheet先理解弹窗的骨架。在库的布局文件 library/src/main/res/layout/library_bottom_dialog.xml 中结构从上到下依次是图标 标题正文内容自定义视图容器bottomDialog_custom_view一个 FrameLayout左/右两个操作按钮setCustomView()的作用就是把你准备好的 View 塞进第 3 个容器。源码中它有两个重载版本见BottomDialog.Builder第 301 行与第 310 行起setCustomView(View customView)直接放入视图内边距为 0setCustomView(View customView, left, top, right, bottom)额外指定四个方向的内边距单位 dp库内部会调用UtilsLibrary.dpToPixels()自动换算像素 注意没有传资源 ID的重载需要你先 inflate 出 View 再传入。快速上手嵌入一个表单视图假设你要做一个意见反馈弹窗只需把表单布局例如bottomdialog_form.xml包含几个 EditText加进 Bottom SheetView formView LayoutInflater.from(this) .inflate(R.layout.bottomdialog_form, null); new BottomDialog.Builder(this) .setTitle(填写反馈) .setContent(请留下您的宝贵意见) .setCustomView(formView, 0, 20, 0, 0) // 顶部留 20dp 间距 .setPositiveText(提交) .setNegativeText(取消) .autoDismiss(false) // 关键关闭自动消失 .onPositive(new BottomDialog.ButtonCallback() { Override public void onClick(BottomDialog dialog) { // 校验表单内容通过后手动关闭 dialog.dismiss(); } }) .show();这里有两个进阶要点autoDismiss(false)默认点击按钮会自动关闭弹窗但表单场景必须在校验/提交成功后再关闭所以要关掉自动消失在回调里手动dialog.dismiss()内边距重载传(0, 20, 0, 0)让表单与正文文字拉开距离视觉更透气想参考现成写法可以看 Demo 中的sampleCustomView()方法app/src/main/java/com/github/javiersantos/bottomdialogs/demo/MainActivity.java它配合示例布局 app/src/main/res/layout/bottomdialog_layout.xml 演示了最简用法。四、进阶场景嵌入列表视图RecyclerView底部弹窗嵌入列表是筛选、多选等高频需求但有一个新手常踩的坑⚠️ 自定义视图容器是wrap_content的 FrameLayout若列表也用wrap_content高度可能塌陷或撑满屏幕。务必给 RecyclerView 设置一个明确高度如200dp。推荐布局骨架LinearLayout android:layout_widthmatch_parent android:layout_height200dp android:orientationvertical android.support.v7.widget.RecyclerView android:idid/list android:layout_widthmatch_parent android:layout_heightmatch_parent / /LinearLayout使用方式与表单完全一致View listView LayoutInflater.from(this) .inflate(R.layout.bottomdialog_list, null); // 记得在此处为 listView 内部的 RecyclerView 设置 Adapter new BottomDialog.Builder(this) .setTitle(选择分类) .setCustomView(listView) .show();五、实用技巧与常见坑位技巧说明强制操作.setCancelable(false)禁止点击外部关闭适合必须选择的场景美化控件通过getTitleTextView()、getPositiveBackground()等 getter 拿到具体控件直接改颜色、字体复用注意一个 View 同一时间只能挂在父容器一处展示多个弹窗时建议每次重新 inflate库虽会自动移除旧父容器BottomDialog.java第 102 行附近但重建最稳妥线程要求show()、dismiss()标注了UiThread请务必在主线程调用六、写在最后掌握setCustomView()之后你的 Bottom Sheet 就不再只是文字 按钮而是能承载表单、列表、图表的完整交互面板。建议按本教程顺序动手先跑通基础弹窗 → 再嵌入表单 → 最后挑战列表场景。核心资料索引库入口类library/src/main/java/com/github/javiersantos/bottomdialogs/BottomDialog.java弹窗布局library/src/main/res/layout/library_bottom_dialog.xml演示工程app/src/main/java/com/github/javiersantos/bottomdialogs/demo/如需获取完整源码可克隆仓库git clone https://gitcode.com/gh_mirrors/bo/BottomDialogs打开其中的 Demo 模块即可对照本教程验证每一步效果。【免费下载链接】BottomDialogsAn Android library that shows a customizable Material-based bottom sheet. API 11 required.项目地址: https://gitcode.com/gh_mirrors/bo/BottomDialogs创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表