java - Android Studio 和 Firebase : CardView Loading Problem

Question

我有一个屏幕，显示我的电影名称及其图片，这些图片位于 Firebase 中的 CardView 中。从功能上来说，它运行得非常完美。但问题是；首先它显示 loadingPanel，其次它显示 the movie names ，最后显示them with the pictures 。通常，它应该显示 loadingPanel 直到显示所有名称和图片。

我的数据库结构类似于 this 。 name 是我的电影名称的字符串。 profilePic 是包含 Firebase 存储中的图片链接的字符串。

我的错在哪里？你能修复它吗？

Movies.java

package com.example.XXXX;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ImageButton;
import android.widget.ListView;
import android.widget.Toast;

import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.ChildEventListener;
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 Movies extends AppCompatActivity {

    DatabaseReference reference;
    RecyclerView recyclerView;
    ArrayList<Profile> list;
    MyAdapter adapter;

    private String message;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_movies);

        recyclerView = (RecyclerView) findViewById(R.id.recyclerview_films);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));


        reference = FirebaseDatabase.getInstance().getReference().child("Films");
        reference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
                list  = new ArrayList<Profile>();
                for(DataSnapshot dataSnapshot1: dataSnapshot.getChildren()){
                    Profile p = dataSnapshot1.getValue(Profile.class);
                    list.add(p);
                }
                adapter = new MyAdapter(Movies.this,list);
                recyclerView.setAdapter(adapter);
                findViewById(R.id.loadingPanel).setVisibility(View.GONE);
            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
                Toast.makeText(Movies.this,"Ooops... Something is wrong.",Toast.LENGTH_SHORT).show();
            }
        });

        Intent intent = getIntent();
        message = intent.getStringExtra("EXTRA_MESSAGE");

        ImageButton backButton = (ImageButton) findViewById(R.id.imageButton13);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Movies.this, Menu.class);
                i.putExtra("EXTRA_MESSAGE",message);
                startActivity(i);
                overridePendingTransition(R.anim.slide_in_left,R.anim.slide_out_right);
            }
        });
    }

    @Override
    public void onBackPressed() {
        Intent i = new Intent(Movies.this, Menu.class);
        i.putExtra("EXTRA_MESSAGE",message);
        startActivity(i);
        overridePendingTransition(R.anim.slide_in_left,R.anim.slide_out_right);
    }
}

MyAdapter.java

package com.example.XXXX;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    Context context;
    ArrayList<Profile> profiles;

    public MyAdapter(Context c, ArrayList<Profile> p){
        context = c;
        profiles = p;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        return new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.cardview,viewGroup, false));
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder, int i) {
        myViewHolder.name.setText(profiles.get(i).getName());
        Picasso.get().load(profiles.get(i).getProfilePic()).into(myViewHolder.profilePic);
    }

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

    class MyViewHolder extends RecyclerView.ViewHolder{
        TextView name;
        ImageView profilePic;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            name = (TextView) itemView.findViewById(R.id.film_name);
            profilePic = (ImageView) itemView.findViewById(R.id.filmProfile);
        }
    }
}

Profile.java

package com.example.XXXX;

public class Profile {
    private String name;
    private String profilePic;

    public Profile() {
    }

    public Profile(String name, String profilePic) {
        this.name = name;
        this.profilePic = profilePic;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getProfilePic() {
        return profilePic;
    }

    public void setProfilePic(String profilePic) {
        this.profilePic = profilePic;
    }

}

Answer 1

根据您的评论，我了解到您希望显示一个ProgessBar“直到所有名称和图片都已解决并准备就绪”。

当您在 onDataChange() 方法中使用以下代码行时:

findViewById(R.id.loadingPanel).setVisibility(View.GONE);

这意味着当您从数据库获取数据完成后，隐藏ProgessBar。到目前为止，您所做的只是获得了名称和实际图片的引用(链接)，而不是图片本身。由于您已经有了该名称，因此它会立即显示在您的 TextView 中，这就是您首先看到它的原因。要显示实际图像，需要一些时间来下载它并使用 Picasso 在您的 ImageView 中播放它。根据您的连接速度和状态，下载和显示图像可能需要几百毫秒到几秒钟的时间，这就是您看到图像延迟的原因。这个时间取决于图像的大小。要解决这个问题，您有两种选择。

第一个是存储实际图像的缩略图，该缩略图尺寸较小并且几乎可以立即显示，或者您可以将监听器附加到每张图片并仅在下载图像时显示整个 View 。我不熟悉 Picasso 但使用 Glide for Android 时，你使用RequestListener的onResourceReady()方法。