Android 如何从Firebase实时读取多张图片并实现点击跳转URL

1. 调整Firebase Realtime Database存储结构 #

首先把原来单张图片的存储改成列表结构，根节点下新增images节点，每个子项存图片资源链接和跳转目标链接，结构示例：

{
  "images": [
    {
      "imageUrl": "你的第一张图片资源链接",
      "targetUrl": "点击第一张图片要跳转的链接"
    },
    {
      "imageUrl": "你的第二张图片资源链接",
      "targetUrl": "点击第二张图片要跳转的链接"
    }
    // 可继续添加更多图片项
  ]
}

请确保Firebase Realtime Database的读写规则允许当前用户读取images节点

2. 添加依赖和权限 #

2.1 新增RecyclerView依赖 #

在模块级build.gradle的dependencies块中添加RecyclerView依赖：

implementation "androidx.recyclerview:recyclerview:1.3.2"

2.2 声明网络权限 #

在AndroidManifest.xml的根节点下添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

3. 修改布局文件 #

3.1 改造主布局activity_main.xml #

替换原来的单个ImageView为RecyclerView，用来展示图片列表：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/imageRv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp" />

</LinearLayout>

3.2 新建图片列表项布局item_image.xml #

在res/layout目录下新建列表项布局，每个项对应一张展示的图片：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/itemIv"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginBottom="16dp"
        android:scaleType="centerCrop"/>

</LinearLayout>

4. 新建图片数据实体类 #

新建ImageItem.java用来存储每张图片的资源链接和跳转链接：

public class ImageItem {
    private String imageUrl;
    private String targetUrl;

    public ImageItem() {} // Firebase反射需要空构造方法

    public ImageItem(String imageUrl, String targetUrl) {
        this.imageUrl = imageUrl;
        this.targetUrl = targetUrl;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    public String getTargetUrl() {
        return targetUrl;
    }

    public void setTargetUrl(String targetUrl) {
        this.targetUrl = targetUrl;
    }
}

5. 新建RecyclerView适配器 #

新建ImageAdapter.java用来加载图片和处理点击跳转逻辑：

import android.content.Intent;
import android.net.Uri;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.squareup.picasso.Picasso;
import java.util.List;

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ImageViewHolder> {
    private List<ImageItem> imageList;

    public ImageAdapter(List<ImageItem> imageList) {
        this.imageList = imageList;
    }

    @NonNull
    @Override
    public ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false);
        return new ImageViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ImageViewHolder holder, int position) {
        ImageItem item = imageList.get(position);
        // 加载图片
        Picasso.get().load(item.getImageUrl()).into(holder.imageView);
        // 绑定点击跳转事件
        holder.itemView.setOnClickListener(v -> {
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(item.getTargetUrl()));
            v.getContext().startActivity(intent);
        });
    }

    @Override
    public int getItemCount() {
        return imageList.size();
    }

    public static class ImageViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        public ImageViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.itemIv);
        }
    }
}

6. 修改MainActivity代码 #

替换原来的单图加载逻辑，读取Firebase的图片列表并渲染到RecyclerView：

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.widget.Toast;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.ValueEventListener;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private RecyclerView imageRv;
    private List<ImageItem> imageItemList;
    private ImageAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 初始化RecyclerView
        imageRv = findViewById(R.id.imageRv);
        imageRv.setLayoutManager(new LinearLayoutManager(this));
        imageItemList = new ArrayList<>();
        adapter = new ImageAdapter(imageItemList);
        imageRv.setAdapter(adapter);

        // 读取Firebase图片列表
        FirebaseDatabase firebaseDatabase = FirebaseDatabase.getInstance();
        DatabaseReference databaseReference = firebaseDatabase.getReference().child("images");

        databaseReference.addListenerForSingleValueEvent(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
                imageItemList.clear();
                for (DataSnapshot snapshot : dataSnapshot.getChildren()) {
                    ImageItem item = snapshot.getValue(ImageItem.class);
                    if (item != null) {
                        imageItemList.add(item);
                    }
                }
                adapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
                Toast.makeText(MainActivity.this, "加载图片失败: " + databaseError.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

内容的提问来源于stack exchange，提问作者salman