如何使用Firebase实时数据库在Android中创建动态卧式RecyclerView？

HorizontalRecyclerView 在许多应用中都可以看到。通常用于显示大多数应用程序和网站中的类别。这种RecyclerView类型通常出现在许多电子商务应用程序中，以指示应用程序中的类别。正如我们已经在Amazon Shopping App中看到的那样。因此，在本文中，我们将介绍如何使用Firebase Firestore在Android中创建动态卧式回收视图。但是在本文中，我们将使用Firebase实时数据库显示RecyclerView的项目。

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

我们将构建一个简单的应用程序，其中将显示水平的Recycler View，其中将显示计算机科学中使用的不同语言，例如C++。因此，我们将在Horizontal RecyclerView中展示这一惊人的计算机技术。下面给出了一个示例GIF，以使我们对本文中要做的事情有一个了解。注意，我们将使用Java语言实现该项目。

分步实施

步骤1：创建一个新项目

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

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

请参阅将Firebase添加到Android App。您可以从此处阅读关于Firebase实时数据库。

步骤3：使用AndroidManifest.xml文件

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

 

步骤4：使用activity_main.xml文件

导航到应用程序> res>布局> activity_main.xml，然后将以下代码添加到该文件中。以下是activity_main.xml文件的代码。

步骤5：现在，我们将为RecyclerView项目创建一个布局文件。

导航到应用程序> res>布局>右键单击它，然后单击New> Layout Resource File并为该文件命名。创建该文件后，将以下代码添加到其中。在这里，我们给了名字content.xml并在其中添加了以下代码。

步骤6：现在，我们将创建一个新的Java类来存储我们的数据

为了从Firebase Firestore数据库读取数据，我们必须创建一个Object类，并且将在该类内部读取数据。要创建对象类，请导航至应用程序> Java >应用程序的包名称>右键单击它，然后单击新建> Java类，然后为该类命名。在这里，我们将名称命名为CardModel ，并将以下代码添加到其中。

Java

public class CardModel {
      
    // variables for storing 
    // our image and name.
    private String name;
    private String imgUrl;
  
    public CardModel() {
        // empty constructor
        // required for firebase.
    }
  
    // constructor for our object class.
    public CardModel(String name, String imgUrl) {
        this.name = name;
        this.imgUrl = imgUrl;
    }
  
    // getter and setter methods
    public String getName() {
        return name;
    }
  
    public void setName(String name) {
        this.name = name;
    }
  
    public String getImgUrl() {
        return imgUrl;
    }
  
    public void setImgUrl(String imgUrl) {
        this.imgUrl = imgUrl;
    }
}

步骤7：现在，我们将朝着创建Adapter类的方向发展

要创建新的Adapter类，请导航至应用程序> Java >应用程序的包名称>右键单击它，然后单击New> Java类，并将您的Java类命名为AdapterCard ，并向其添加以下代码。在代码内部添加了注释，以更详细地了解代码。

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import com.squareup.picasso.Picasso;
  
import java.util.ArrayList;
  
public class AdapterCard extends RecyclerView.Adapter {
    private ArrayList dataModalArrayList;
    private Context context;
  
    // constructor class for our Adapter
    public AdapterCard(ArrayList dataModalArrayList, Context context) {
        this.dataModalArrayList = dataModalArrayList;
        this.context = context;
    }
  
    @NonNull
    @Override
    public AdapterCard.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // passing our layout file for displaying our card item
        return new AdapterCard.ViewHolder(LayoutInflater.from(context).inflate(R.layout.content, parent, false));
    }
  
    @Override
    public void onBindViewHolder(@NonNull AdapterCard.ViewHolder holder, int position) {
        // setting data to our views in Recycler view items.
        final CardModel modal = dataModalArrayList.get(position);
        holder.courseNameTV.setText(modal.getName());
  
        // we are using Picasso to load images
        // from URL inside our image view.
        Picasso.with(holder.courseIV.getContext()).load(modal.getImgUrl()).into(holder.courseIV);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // setting on click listener
                // for our items of recycler items.
                Toast.makeText(context, "Clicked item is " + modal.getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }
  
    @Override
    public int getItemCount() {
        // returning the size of array list.
        return dataModalArrayList.size();
    }
  
    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our
        // views of recycler items.
        private TextView courseNameTV;
        private ImageView courseIV;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing the views of recycler views.
            courseNameTV = itemView.findViewById(R.id.idTVtext);
            courseIV = itemView.findViewById(R.id.idIVimage);
        }
    }
}

步骤8：使用MainActivity。 Java文件

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

Java

import android.os.Bundle;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
  
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
  
    private RecyclerView courseRV;
    private ArrayList dataModalArrayList;
    private AdapterCard dataRVAdapter;
    private DatabaseReference db;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initializing our variables.
        courseRV = findViewById(R.id.idRVItems);
  
        // initializing our variable for firebase
        // firestore and getting its instance.
        db = FirebaseDatabase.getInstance().getReference();
  
        // creating our new array list
        dataModalArrayList = new ArrayList<>();
        courseRV.setHasFixedSize(true);
  
        // adding horizontal layout manager for our recycler view.
        courseRV.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
  
        // adding our array list to our recycler view adapter class.
        dataRVAdapter = new AdapterCard(dataModalArrayList, this);
  
        // setting adapter to our recycler view.
        courseRV.setAdapter(dataRVAdapter);
  
        loadrecyclerViewData();
    }
  
    private void loadrecyclerViewData() {
        DatabaseReference reference = FirebaseDatabase.getInstance().getReference("topics");
        reference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
                dataModalArrayList.clear();
                for (DataSnapshot dataSnapshot1 : dataSnapshot.getChildren()) {
                    CardModel modelCourses1 = dataSnapshot1.getValue(CardModel.class);
                    dataModalArrayList.add(modelCourses1);
                    dataRVAdapter = new AdapterCard(dataModalArrayList, MainActivity.this);
                    courseRV.setAdapter(dataRVAdapter);
                }
            }
  
            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
  
            }
        });
    }
}

在这里，我们将展示如何将数据添加到Firebase

转到firebase控制台>打开您的项目，然后单击左侧面板中的“实时数据库”。

步骤1：首先，我们将创建一个名称主题节点

第2步：然后我们将名称和图像链接添加到数据库中的item节点

步骤3：在这里我们可以看到我们已经添加了所有项目

现在运行该应用程序，然后查看下面的代码输出。

输出：