如何使用Firebase Firestore在Android中创建动态底表对话框？

底部对话框是著名的Material UI组件之一，用于在其中显示数据或通知。我们可以在“底部工作表”对话框中显示任何类型的数据或任何UI组件。在本文中，我们将看一下使用Firebase Firestore在Android中实现动态Bottom Sheet Dialog的方法。

我们将在本文中构建什么?

我们将构建一个简单的应用程序，在其中显示一个简单的底部工作表对话框，并从Firebase动态显示该底部工作表中的数据。下面给出了一个示例GIF，以了解我们将在本文中做些什么。注意，我们将使用Java语言实现该项目。

分步实施

步骤1：创建一个新项目

要在Android Studio中创建新项目，请参阅如何在Android Studio中创建/启动新项目。请注意，选择Java作为编程语言。

第2步：将您的应用连接到Firebase

创建新项目后。导航到顶部栏上的“工具”选项。在里面单击Firebase。单击Firebase后，您可以在屏幕快照中看到下面提到的右列。

在该列内，导航到Firebase Cloud Firestore。单击该选项，您将在“将应用程序连接到Firebase”和“将Cloud Firestore添加到您的应用程序”中看到两个选项。单击立即连接选项，您的应用程序将连接到Firebase。之后，单击第二个选项，现在您的应用已连接到Firebase。将您的应用程序连接到Firebase后，您将看到以下屏幕。

之后，确认已将Firebase Firestore数据库的依赖项添加到我们的Gradle文件中。导航到该文件内的app> Gradle脚本。检查是否添加了以下依赖项。如果您的build.gradle文件中不存在以下依赖项。在“依赖项”部分中添加以下依赖项。

implementation ‘com.google.firebase:firebase-firestore:22.0.1’

implementation ‘com.squareup.picasso:picasso:2.71828’

添加此依赖项后，同步您的项目，现在我们可以创建我们的应用程序了。如果您想了解有关将您的应用程序连接到Firebase的更多信息。请参阅本文以详细了解如何将Firebase添加到Android App。

步骤3：使用AndroidManifest.xml文件

要将数据添加到Firebase，我们必须授予访问Internet的权限。要添加这些权限，请导航至应用程序> AndroidManifest.xml 。在该文件内，向其添加以下权限。

步骤4：使用activity_main.xml文件

由于我们没有在activity_main.xml中显示任何UI。因此，我们没有在activity_main.xml中添加任何UI组件，因为我们正在自定义布局文件中显示数据。

步骤5：为“底页对话框”创建新的布局文件

当我们在底部工作表对话框中显示一个图像和文本时。因此，我们将为“底表对话框”构建自定义布局。要创建一个新的布局文件，请在底部的四个对话框中进行选择。导航到应用程序> res>布局>右键单击它>单击New>布局资源文件，并将其命名为bottom_sheet_layout，然后向其添加以下代码。

第6步：在我们的styles.xml文件中添加一个Bottom Sheet样式

导航到app> res> values> themes.xml文件，并将以下代码添加到资源文件中。

XML格式

步骤7：使用MainActivity。 Java文件

转到MainActivity。 Java文件并参考以下代码。下面是MainActivity的代码。 Java文件。在代码内部添加了注释，以更详细地了解代码。

Java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.android.material.bottomsheet.BottomSheetDialog;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.squareup.picasso.Picasso;
  
public class MainActivity extends AppCompatActivity {
  
    // creating a variable for our firebase
    // firestore and relative layout of bottom sheet.
    FirebaseFirestore db;
    RelativeLayout bottomSheetRL;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our variables.
        db = FirebaseFirestore.getInstance();
        bottomSheetRL = findViewById(R.id.idRLBottomSheet);
          
        // calling method to
        // display bottom sheet.
        displayBottomSheet();
    }
  
    private void displayBottomSheet() {
          
        // creating a variable for our bottom sheet dialog.
        final BottomSheetDialog bottomSheetTeachersDialog = new BottomSheetDialog(MainActivity.this, R.style.BottomSheetDialogTheme);
          
        // passing a layout file for our bottom sheet dialog.
        View layout = LayoutInflater.from(MainActivity.this).inflate(R.layout.bottom_sheet_layout, bottomSheetRL);
          
        // passing our layout file to our bottom sheet dialog.
        bottomSheetTeachersDialog.setContentView(layout);
          
        // below line is to set our bottom sheet dialog as cancelable.
        bottomSheetTeachersDialog.setCancelable(false);
          
        // below line is to set our bottom sheet cancelable.
        bottomSheetTeachersDialog.setCanceledOnTouchOutside(true);
          
        // below line is to display our bottom sheet dialog.
        bottomSheetTeachersDialog.show();
          
        // initializing our text views and image views.
        ImageView imageIV = layout.findViewById(R.id.idIVimage);
        TextView textOneTV = layout.findViewById(R.id.idTVtext);
        TextView textTwoTV = layout.findViewById(R.id.idTVtextTwo);
          
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("BottomSheetDIalog").document("Data");
          
        // adding snapshot listener to our document reference.
        documentReference.addSnapshotListener(new EventListener() {
            @Override
            public void onEvent(@Nullable DocumentSnapshot value, @Nullable FirebaseFirestoreException error) {
                // inside the on event method.
                if (error != null) {
                    // this method is called when error is not null 
                    // and we gt any error
                    // in this cas we are displaying an error message.
                    Toast.makeText(MainActivity.this, "Error found is " + error, Toast.LENGTH_SHORT).show();
                    return;
                }
                if (value != null && value.exists()) {
                    // if the value from firestore is not null then we are
                    // getting our data and setting that data to our text view.
                    // after getting the value from firebase firestore
                    // we are setting it to our text view and image view.
                    textOneTV.setText(value.getData().get("textOne").toString());
                    Picasso.get().load(value.getData().get("Image").toString()).into(imageIV);
                    textTwoTV.setText(value.getData().get("textTwo").toString());
                }
            }
        });
    }
}

步骤8：将数据添加到Android中的Firebase Firestore控制台

添加此代码后，请转到此链接以打开Firebase。单击此链接后，您将看到以下页面，并且在此页面上，单击右上角的“转到控制台”选项。

单击此屏幕后，您将看到下面的屏幕，其中包含您选择的项目的所有项目。

在该屏幕内，单击左侧窗口中的n Firebase Firestore数据库。

单击创建数据库选项后，您将看到以下屏幕。

在此屏幕内，我们必须选择“以测试模式启动”选项。我们正在使用测试模式，因为我们未在应用内设置身份验证。因此，我们选择在测试模式下启动。选择测试模式后，单击下一步选项，您将看到以下屏幕。

在此屏幕内，我们只需单击“启用”按钮即可启用我们的Firebase Firestore数据库。完成此过程后，我们必须将数据添加到Android中的Firebase Firestore。用于添加新数据。单击“开始收集选项”，然后将收集名称指定为“ BottomSheetDIalog ”，然后单击“下一步”，然后将“文档ID名称”指定为“数据”。在“字段”部分内部，创建三个字段，分别为“ textOne ”，“ textTwo ”和“ Image ”，并将值传递给它。向其中添加值后，单击“保存”，然后运行您的应用程序。

输出：

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处，前往由我们的专家精心策划的指南，以使您立即做好行业准备！