如何从Firebase数据库读取图片Uri列表并填充到RecyclerView中

1. 调整Posts模型类 #

新增图片Uri列表字段，补充对应的构造、getter和setter方法：

package com.example.domino;
import java.util.List;
public class Posts {
    String profileImage;
    String userName;
    String OpinionContent;
    String userId;
    // 新增多图Uri列表字段
    List<String> postImages;

    public Posts(){
    }
    // 构造方法新增参数
    public Posts(String profileImage, String userName, String opinionContent, String userId, List<String> postImages) {
        this.profileImage = profileImage;
        this.userName = userName;
        OpinionContent = opinionContent;
        this.userId = userId;
        this.postImages = postImages;
    }
    // 新增getter setter
    public List<String> getPostImages() {
        return postImages;
    }
    public void setPostImages(List<String> postImages) {
        this.postImages = postImages;
    }
    // 原有其他getter setter保留不变
    public String getProfileImage() {
        return profileImage;
    }
    public void setProfileImage(String profileImage) {
        this.profileImage = profileImage;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getOpinionContent() {
        return OpinionContent;
    }
    public void setOpinionContent(String opinionContent) {
        OpinionContent = opinionContent;
    }
    public String getUserId() {
        return userId;
    }
    public void setUserId(String userId) {
        this.userId = userId;
    }
}

2. 修改单条帖子的布局文件 #

在原有item_post布局中新增多图容器，这里以水平滚动的LinearLayout为例，你也可以换成嵌套RecyclerView实现更流畅的滚动效果：

<!-- 原有布局其他控件不变，新增以下部分 -->
<HorizontalScrollView
    android:id="@+id/post_images_container"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:layout_marginVertical="8dp"
    android:scrollbars="none">
    <LinearLayout
        android:id="@+id/images_layout"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gap="8dp"/>
</HorizontalScrollView>

3. 调整PostsViewHolder #

新增加载多图的方法：

public static class PostsViewHolder extends RecyclerView.ViewHolder {
    View mView;
    // 新增图片布局的引用
    LinearLayout imagesLayout;
    public PostsViewHolder(@NonNull View itemView) {
        super(itemView);
        mView = itemView;
        imagesLayout = mView.findViewById(R.id.images_layout);
    }
    // 新增设置多图的方法
    public void setPostImages(List<String> imageUrls) {
        // 先清空原有子view，避免复用错乱
        imagesLayout.removeAllViews();
        if (imageUrls == null || imageUrls.isEmpty()) {
            imagesLayout.setVisibility(View.GONE);
            return;
        }
        imagesLayout.setVisibility(View.VISIBLE);
        Context context = imagesLayout.getContext();
        for (String url : imageUrls) {
            ImageView imageView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 160, context.getResources().getDisplayMetrics()),
                ViewGroup.LayoutParams.MATCH_PARENT
            );
            imageView.setLayoutParams(params);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            // 用Picasso加载图片
            Picasso.get().load(url).placeholder(R.drawable.ic_baseline_image_24).into(imageView);
            imagesLayout.addView(imageView);
        }
    }
    // 原有其他方法保持不变
    public void setProfileImage(String profileImage) {
        ImageView myImage = mView.findViewById(R.id.profile_image);
        Picasso.get().load(profileImage).placeholder(R.drawable.ic_baseline_image_24).into(myImage);
    }
    public void setUserName(String userName) {
        TextView myName = mView.findViewById(R.id.userName);
        myName.setText(userName);
    }
    public void setOpinionContent(String opinionContent) {
        TextView myContent = mView.findViewById(R.id.opinion_content);
        myContent.setText(opinionContent);
    }
    public String setUserId(String userId) {
        return userId;
    }
}

4. 调整数据读取逻辑 #

读取Firebase数据时，把存储的图片Uri列表解析为List传入Posts模型，示例代码如下：

// 假设你用FirebaseRecyclerOptions加载数据，可通过自定义SnapshotParser处理
FirebaseRecyclerOptions<Posts> options = new FirebaseRecyclerOptions.Builder<Posts>()
    .setQuery(query, new SnapshotParser<Posts>() {
        @NonNull
        @Override
        public Posts parseSnapshot(@NonNull DataSnapshot snapshot) {
            Posts post = snapshot.getValue(Posts.class);
            // 单独解析图片列表
            List<String> imageList = new ArrayList<>();
            DataSnapshot imagesSnap = snapshot.child("postImages");
            for (DataSnapshot imageSnap : imagesSnap.getChildren()) {
                imageList.add(imageSnap.getValue(String.class));
            }
            post.setPostImages(imageList);
            return post;
        }
    })
    .build();

5. 调整onBindViewHolder #

在绑定数据时调用设置多图的方法：

@Override
protected void onBindViewHolder(@NonNull PostsViewHolder holder, final int position, @NonNull Posts model) {
    holder.setUserName(model.getUserName());
    holder.setProfileImage(model.getProfileImage());
    holder.setOpinionContent(model.getOpinionContent());
    // 新增设置多图
    holder.setPostImages(model.getPostImages());
    holder.mView.findViewById(R.id.profile_image).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            String publisherId = model.getUserId();
            Intent profileIntent = new Intent(getActivity(), FriendProfile.class);
            profileIntent.putExtra("userId", publisherId);
            startActivity(profileIntent);
        }
    });
}

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