如何使用从 Firebase 存储中检索到的图像填充 Gridview

Question

我在发这篇文章之前看过其他类似的帖子，我的不一样 我目前正在从我的 Firestore 数据库中检索下载 URL 列表，然后尝试从我的 Firebase 存储中下载这些图像以在网格视图中显示它们。

到目前为止，这是我的代码：

final Query chatRoomMsgs = db.collection("chatrooms").document(chatRoomID).collection("Messages").whereEqualTo("sentby", firebaseAuth.getUid());
    chatRoomMsgs.get()
            .addOnSuccessListener(new OnSuccessListener<QuerySnapshot>() {
                @Override
                public void onSuccess(QuerySnapshot queryDocumentSnapshots) {
                    ArrayList<String> sentPicsURLS = new ArrayList<String>();

                    for(QueryDocumentSnapshot documentSnapshot: queryDocumentSnapshots){

                        for(int i = 0; i < queryDocumentSnapshots.size(); i++) {
                            sentPicsURLS.add(documentSnapshot.get("image").toString());

                            if(i == (queryDocumentSnapshots.size()-1)){
                                //now download the images and place them into the proper view
                                for(int z = 0; z < sentPicsURLS.size(); z++){


                                }

                            }
                        }

                    }
                }
            })
            .addOnFailureListener(new OnFailureListener() {
                @Override
                public void onFailure(@NonNull Exception e) {

                }
            });

这是应该将图像拉入和推入网格视图的位置：

for(int z = 0; z < sentPicsURLS.size(); z++){
         //right here    
}

但是我在创建可以处理此问题的适配器时遇到了问题。我在 activity 中有一个有效的网格视图，我有一个布局文件，其中包含一个带有 ID 的图像视图。

final ArrayAdapter arrayAdapter = new ArrayAdapter(Chatroom.this, R.layout.chatroom_sent_images,R.id.sent_iv);
    sentPics.setAdapter(arrayAdapter);
    sentPics.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            //empty for now
        }
    });

我缺少的部分（似乎是）我实际循环 sentPicsURLS 然后将它们添加到适配器...可能在 [=15= 中使用 arrayAdapter.addAll(sentPicsURLS); 之类的东西] for循环？

现在 gridview 显示为空，甚至没有包含在 R.layout.chatroom_sent_images 中的默认图像视图。我觉得我是如此接近，我错过了什么？谢谢！

编辑这是我的聊天室数据库结构，每个聊天室和聊天室消息的结构都是一样的。

Answer 1

正如我在您的屏幕截图中看到的，您的文档只有一个 image。所以要解决这个问题，不需要额外的内部 for 循环。要创建这些图像的列表，请使用以下代码行：

Query chatRoomMsgs = db.collection("chatrooms").document(chatRoomID)
    .collection("Messages").whereEqualTo("sentby", firebaseAuth.getUid());
chatRoomMsgs.get().addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
    @Override
    public void onComplete(@NonNull Task<QuerySnapshot> task) {
        if (task.isSuccessful()) {
            ArrayList<String> sentPicsURLS = new ArrayList<>();
            for (QueryDocumentSnapshot document : task.getResult()) {
                sentPicsURLS.add(document.getString("image"));
            }
            //Do what you need to do with your list
            Log.d(TAG, "List size: " + sentPicsURLS.size());
        }
    }
});

另请注意，Firebase API 是异步的，您只能在回调中使用该列表。现在，logcat 中的结果将是列表的大小。

如何使用从 Firebase 存储中检索到的图像填充 Gridview

How To Populate A Gridview With Images Retreieved From Firebase Storage

android

android-gridview

firebase-storage

google-cloud-firestore