📌  相关文章
📜  如何使用Firebase Firestore在Android中显示动态AlertDialog?

📅  最后修改于: 2021-05-13 18:15:39             🧑  作者: Mango

Dynamic AlertDialog用于许多不同的应用程序中,这些应用程序用于显示从对话框到用户的不同消息。这种对话框还用于向用户宣传许多促销标语。这种类型的警报对话框通常是动态的,并且会显示图像和文本,这些图像和文本的行为是动态的,并在一定时间间隔后发生更改。在本文中,我们将研究Android中动态警报对话框的实现。

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

我们将在Android中构建一个简单的警报对话框。在该AlertDialog中,我们将显示Firebase中的图像和文本。警报对话框中的数据可以根据我们的要求进行更改。下面给出了一个示例GIF,以了解我们将在本文中做些什么。注意,我们将使用Java语言实现该项目。

使用Firebase Firestore示例GIF在Android中显示动态AlertDialog

分步实施

步骤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文件中不存在以下依赖项。在“依赖项”部分中添加以下依赖项。

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

步骤3:使用AndroidManifest.xml文件

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

XML



XML


  
    
    
  
    
    
      


Java
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
  
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 {
  
    // initializing th variable for firebase firestore.
    FirebaseFirestore db = FirebaseFirestore.getInstance();
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // creating a variable for our alert dialog builder.
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
          
        // creating a layout inflater variable.
        LayoutInflater inflater = getLayoutInflater();
          
        // below line is for inflating a custom pop up layout.
        View dialoglayout = inflater.inflate(R.layout.custom_pop_up_layout, null);
          
        // initializing the textview and imageview from our dialog box.
        TextView notificationTV = dialoglayout.findViewById(R.id.idTVNotification);
        ImageView notificationIV = dialoglayout.findViewById(R.id.idIVNotification);
  
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("MyData").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.
                    notificationTV.setText(value.getData().get("NotificationMessage").toString());
                    Picasso.get().load(value.getData().get("NotificationImage").toString()).into(notificationIV);
                }
            }
        });
          
        // after setting the text to our text view.
        // we are displaying our alert dialog.
        builder.setView(dialoglayout);
        builder.show();
    }
}


步骤4:使用activity_main.xml文件

因为我们没有在activity_main.xml文件中显示任何UI,所以我们也没有在activity_main.xml中添加任何UI组件,因为我们在自定义布局文件中显示数据。

步骤5:为我们的警报对话框创建一个新的布局文件

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

XML格式



  
    
    
  
    
    
      

步骤6:使用MainActivity。 Java文件

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

Java

import android.app.AlertDialog;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
  
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 {
  
    // initializing th variable for firebase firestore.
    FirebaseFirestore db = FirebaseFirestore.getInstance();
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // creating a variable for our alert dialog builder.
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
          
        // creating a layout inflater variable.
        LayoutInflater inflater = getLayoutInflater();
          
        // below line is for inflating a custom pop up layout.
        View dialoglayout = inflater.inflate(R.layout.custom_pop_up_layout, null);
          
        // initializing the textview and imageview from our dialog box.
        TextView notificationTV = dialoglayout.findViewById(R.id.idTVNotification);
        ImageView notificationIV = dialoglayout.findViewById(R.id.idIVNotification);
  
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("MyData").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.
                    notificationTV.setText(value.getData().get("NotificationMessage").toString());
                    Picasso.get().load(value.getData().get("NotificationImage").toString()).into(notificationIV);
                }
            }
        });
          
        // after setting the text to our text view.
        // we are displaying our alert dialog.
        builder.setView(dialoglayout);
        builder.show();
    }
}

第7步:将数据添加到Android中的Firebase Firestore控制台

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

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

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

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

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

在此屏幕内,我们只需单击“启用”按钮即可启用我们的Firebase Firestore数据库。完成此过程后,我们只需运行我们的应用程序并在Firebase Console中添加数据。要添加数据,请单击“开始收集”选项,然后将收集名称添加为“ MyData ”。添加后,我们必须将我们的文档ID添加为“数据”。在字段部分内,我们必须将字段名称添加为“ NotificationImage ”,以便在通知中显示我们的图像,并输入相应的值(图像的URL)。并创建另一个文件,并将该字段命名为“ NotificationMessage ”,以在我们的通知中显示该消息。另外,输入它的相应值。最后单击“保存”按钮。

添加数据后,屏幕将如下所示。您可以编辑和删除这些文件。

现在运行该应用程序,并在下面查看该应用程序的输出:

输出:

想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处,前往由我们的专家精心策划的指南,以使您立即做好行业准备!