从firebase在recyclerview中以不正确的格式加载图像

Question

我正在尝试将图像从 firebase 加载到回收器视图中，图像正在加载，但在回收器视图中以不正确的方式加载，但是当我再次打开片段（其中包含回收器视图）时，图像显示在他们必须的方式（这只发生在我从头开始打开应用程序时）

这是我第一次打开片段时的截图

这是我再次点击片段时的截图

这里是代码

Java 文件

Search_Fragment.java

public class Search_Fragment extends Fragment {
    public List<Upload> mUploads;
    PostAdapter postsAdapter;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        RecyclerView postRecyclerView = view.findViewById(R.id.postRecyclerView);
        DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference("uploads");
        postRecyclerView.setLayoutManager(
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        );
        mUploads = new ArrayList<>();
        postsAdapter = new PostAdapter(getContext(), mUploads);
        postRecyclerView.setAdapter(postsAdapter);

        //This are images that i tried manual ly and it worked fine
//        List<PostItem> postItems = new ArrayList<>();
//        postItems.add(new PostItem(R.drawable.image1));
//        postItems.add(new PostItem(R.drawable.image2));
//        postItems.add(new PostItem(R.drawable.image3));
//        postItems.add(new PostItem(R.drawable.image4));
//        postItems.add(new PostItem(R.drawable.image5));
//        postItems.add(new PostItem(R.drawable.image7));
        databaseReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {

                    for (DataSnapshot dataSnapshot : snapshot.getChildren()) {
                        Upload upload = dataSnapshot.getValue(Upload.class);
                        mUploads.add(upload);

                }
                //notify the adapter
                postsAdapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError error) {
            }
        });
        return view;
    }
}

PostAdapter.java

public class PostAdapter extends RecyclerView.Adapter<PostAdapter.PostViewHolder> {
    public static List<Upload> mUploads;
    Context mcontext;


    public PostAdapter(Context context, List<Upload> uploads) {
        mUploads = uploads;
        mcontext = context;
    }


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

    @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Upload uploadCurrent = mUploads.get(position);
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .into(holder.imageView);


    }

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

    public static class PostViewHolder extends RecyclerView.ViewHolder {
       ShapeableImageView imageView;

        PostViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imagePost);
        }

    }
}

Upload.java // 这是模型类，我在上传时存储图片 URL，然后从这里检索它

public class Upload {
    private String mImageUrl;


    public Upload() {

    }

    public Upload(String imageUrl) {
        mImageUrl = imageUrl;
    }

    public String getmImageUrl() {
        return mImageUrl;
    }

    public void setmImageUrl(String mImageUrl) {
        this.mImageUrl = mImageUrl;
    }
}

XML 文件

SearchFragment.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/search_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

    <androidx.appcompat.widget.SearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginStart="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="15dp"
        android:layout_marginBottom="15dp"
        android:background="@color/grey" />

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:overScrollMode="always"
        android:layout_below="@+id/search_view">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/listText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:paddingStart="40dp"
                android:paddingEnd="0dp"
                android:text="@string/today_s_most_liked_posts"
                android:textColor="@color/white"
                android:textSize="25sp"
                android:textStyle="italic" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/postRecyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</RelativeLayout>

post_item_container.xml

<com.google.android.material.imageview.ShapeableImageView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:id="@+id/imagePost"
    android:layout_marginStart="11dp"
    android:layout_marginTop="11dp"
    android:layout_width="match_parent"
    app:shapeAppearanceOverlay="@style/RoundedCorner"
    android:contentDescription="@string/todo" />

Answer 1

有些图片尺寸较大，这就是加载它们需要一些时间的原因。要解决此问题，您可以设置一个占位符：

只需替换此代码：

Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .into(holder.imageView);

用这个：

Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .placeholder(R.drawable.placeholder)   
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .into(holder.imageView);