全屏底部抽屉式面板

Material Design 的魔法！

底部面板是表示任何类型的与用户相关信息或放置选项以从用户获取快速操作（例如打开相机、分享和图库等）的好方法。

但今天我们将学习如何制作一个美丽的底部面板，通过点击按钮可以打开像全屏一样的底部面板。激动人心吗？

让我们开始吧！

我们要构建的是：

让我们创建一个新项目并在 gradle.build 中添加以下依赖项。

在本教程中，我使用了数据绑定，因此请确保已在 build.gradle 中添加了数据绑定依赖项。

dataBinding{
    enabled true
}

要创建此底部面板，我们首先需要一个布局，该布局将弹出底部面板。

底部面板布局

在布局目录中创建一个布局资源文件并粘贴以下代码：

现在你有了一个布局，是时候制作一个底部面板适配器了。

BottomSheet.java 继承自 BottomSheetDialogFragment，因此它有一些覆盖函数，例如 onCreateDialog()。

<a class="af qg" href="https://developer.android.com/reference/android/support/v7/app/AppCompatDialogFragment.html#onCreateDialog(android.os.Bundle)" rel="noopener ugc nofollow" target="_blank">onCreateDialog</a>(<a class="af qg" href="https://developer.android.com/reference/android/os/Bundle.html" rel="noopener ugc nofollow" target="_blank">Bundle</a> savedInstanceState): 用于构建自己的自定义对话框容器的覆盖方法。

我们需要添加底部面板行为，以便根据底部面板的行为隐藏和显示应用程序栏。我们有一个 BottomSheetBehavior 类来实现这一点。

根据文档，底部面板可以定义为：

用于使其作为底部面板工作的 CoordinatorLayout 的子视图的交互行为插件。

底部面板有一些常量。

BottomSheetBehavior 有一个嵌套类 BottomSheetCallback，它将帮助我们实现所需的结果，即根据底部面板的状态隐藏或显示应用程序栏。

在这个嵌套类中，有两个抽象方法。

<a class="af qg" href="https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior.BottomSheetCallback.html#onSlide(android.view.View,%20float)" rel="noopener ugc nofollow" target="_blank">onSlide</a>(<a class="af qg" href="https://developer.android.com/reference/android/view/View.html" rel="noopener ugc nofollow" target="_blank">View</a> bottomSheet, float slideOffset)：当底部面板被拖动时调用。
<a class="af qg" href="https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior.BottomSheetCallback.html#onStateChanged(android.view.View,%20int)" rel="noopener ugc nofollow" target="_blank">onStateChanged</a>(<a class="af qg" href="https://developer.android.com/reference/android/view/View.html" rel="noopener ugc nofollow" target="_blank">View</a> bottomSheet, int newState)：当底部面板的状态更改时调用。

因此，这些是在帮助我们实现目标的相对方法。

现在，我们的底部面板已准备好在按钮单击时弹出。让我们返回到我们的 MainActivity.java。在你的 Java 类中添加以下代码行。

你的 activity_main.xml 应如下所示：

现在，让我们运行应用程序并看看这个魔法。

关注CodixLab获取更多技术知识。

发现本文有用吗？可以关注我Mustufa Ansari在Medium上。以下是我最受欢迎的文章。