Material-Dialogs 底部弹窗(Bottom Sheets)使用指南

Material-Dialogs 底部弹窗(Bottom Sheets)使用指南

material-dialogs material-dialogs: 是一个基于 Android Material Design 的 UI 库，适用于 Android 和 Web 应用。它提供了一套美观的对话框组件，可以帮助开发者快速构建应用。特点包括 Material Design、易于使用、支持多种主题等。 项目地址: https://gitcode.com/gh_mirrors/ma/material-dialogs

概述

Material-Dialogs 是一个遵循 Material Design 规范的对话框库，其中底部弹窗(Bottom Sheets)是它的重要功能之一。底部弹窗是一种从屏幕底部向上滑出的交互组件，非常适合展示辅助内容或提供多个操作选项。

基础配置

添加依赖

首先需要在项目中添加底部弹窗模块的依赖：

dependencies {
    implementation 'com.afollestad.material-dialogs:bottomsheets:3.2.1'
}

基本使用

创建一个底部弹窗非常简单：

MaterialDialog(this, BottomSheet()).show {
    title(text = "标题")
    message(text = "这是底部弹窗的内容")
    positiveButton(text = "确定")
    negativeButton(text = "取消")
}

核心功能详解

布局模式

Material-Dialogs 提供两种布局模式：

1. MATCH_PARENT(默认模式)

   • 弹窗可以扩展至填满整个屏幕高度
   • 打开时默认显示为"窥视高度"(peek height)

2. WRAP_CONTENT模式

   • 弹窗高度受内容限制，不会超过内容本身高度
   • 如果内容高度超过屏幕，建议使用ScrollView包裹

设置方式：

MaterialDialog(this, BottomSheet(WRAP_CONTENT)).show {
    // 内容配置
}

窥视高度(Peek Height)

窥视高度是底部弹窗未完全展开时的默认显示高度，是介于完全展开和完全隐藏之间的状态。

特性：

• 默认值为屏幕高度的60%
• 可动态调整，调整过程带有动画效果
• 在WRAP_CONTENT模式下，最大不超过弹窗内容高度

设置方法：

val dialog = MaterialDialog(this, BottomSheet()).show {
    setPeekHeight(res = R.dimen.my_peek_height) // 使用资源文件定义
    // 或
    setPeekHeight(400) // 直接指定像素值
}

// 后续仍可动态调整
dialog.setPeekHeight(500)

网格项目展示

底部弹窗常用于展示网格布局的项目选择，Material-Dialogs提供了便捷的实现：

val items = listOf(
    BasicGridItem(R.drawable.ic_home, "首页"),
    BasicGridItem(R.drawable.ic_search, "搜索"),
    BasicGridItem(R.drawable.ic_settings, "设置")
)

MaterialDialog(this, BottomSheet()).show {
    gridItems(items) { _, index, item ->
        // 处理项目点击事件
        showToast("选择了: ${item.title}")
    }
}

高级配置选项：

• customGridWidth: 自定义网格宽度
• disabledIndices: 禁用特定索引的项目
• waitForPositiveButton: 是否等待确认按钮点击

自定义网格项目

如需自定义项目类型，只需实现GridItem接口：

class CustomGridItem(
    override val title: String,
    val customData: String
) : GridItem {
    override fun populateIcon(view: ImageView) {
        // 自定义图标加载逻辑
    }
}

样式定制

圆角半径

底部弹窗通常需要更明显的圆角效果，可以通过两种方式设置：

1. 全局主题设置(影响所有对话框)：

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="md_corner_radius">16dp</item>
</style>

2. 单例设置：

MaterialDialog(this, BottomSheet()).show {
    cornerRadius(16f) // 直接设置数值
    // 或
    cornerRadius(res = R.dimen.custom_corner_radius) // 使用资源文件
}

最佳实践建议

1. 对于内容较少的弹窗，建议使用WRAP_CONTENT模式
2. 内容较多时使用MATCH_PARENT模式并配合适当的peek height
3. 网格项目展示适合不超过6个选项的场景
4. 圆角半径建议在8dp-16dp之间，符合Material Design规范
5. 动态调整peek height时注意动画流畅性

通过合理使用这些功能，可以创建出既美观又实用的底部弹窗交互体验。

material-dialogs material-dialogs: 是一个基于 Android Material Design 的 UI 库，适用于 Android 和 Web 应用。它提供了一套美观的对话框组件，可以帮助开发者快速构建应用。特点包括 Material Design、易于使用、支持多种主题等。 项目地址: https://gitcode.com/gh_mirrors/ma/material-dialogs