如何通过滑动从 Firebase 加载图像？

Question

我制作了一个应用程序，允许用户将图片和一些文本视图发布到 Firebase。然后，您可以在回收站视图中查看每个人的帖子。该应用程序构建并运行良好，但是每个帖子的图像不会加载到回收站视图中；不过，所有虚拟文本都可以正常加载。

回收站失败视图的截图链接：

2) Recycler View Adapter

public class RecViewAdapter extends RecyclerView.Adapter<RecViewAdapter.ViewHolder> {

    public Context context;
    public List<ComicBase> list;

    RecViewAdapter(Context context, List<ComicBase> List) {
        this.list = List;
        this.context = context;
    }

    // Create new views (invoked by the layout manager)
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // create a new view
        View comicView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.recycler_items, parent, false);

        // create ViewHolder
        return new ViewHolder(comicView);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int position) {
        ComicBase comicBase = list.get(position);

        viewHolder.comIssueHolder.setText(comicBase.getComIssue());
        viewHolder.comTitleHolder.setText(comicBase.getComTitle());
        viewHolder.comGradeHolder.setText(comicBase.getComGrade());
        viewHolder.comPriceHolder.setText(comicBase.getComPrice());
        Glide.with(context)
                .load(comicBase.getImageUrl())
                .centerCrop()
                .into(viewHolder.comImageHolder);
    }


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

    // inner class to hold a reference to each item of RecyclerView
    static class ViewHolder extends RecyclerView.ViewHolder {

        TextView comTitleHolder, comIssueHolder, comGradeHolder,
                comPriceHolder;
        ImageView comImageHolder;

        ViewHolder(View comView) {
            super(comView);
            comTitleHolder = comView.findViewById(R.id.com_title_show);
            comIssueHolder = comView.findViewById(R.id.com_issue_show);
            comGradeHolder = comView.findViewById(R.id.com_grade_show);
            comImageHolder = comView.findViewById(R.id.com_image_show);
            comPriceHolder = comView.findViewById(R.id.com_price_show);
        }
    }
}

2) recycler_items.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cardview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="5dp"
    card_view:contentPadding="5dp"
    card_view:cardCornerRadius="5dp"
    card_view:cardMaxElevation="5dp">


    <android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ECEFF1"
        android:padding="10dp">

        <TextView
            android:id="@+id/com_title_show"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border_one"
            android:gravity="center"
            android:textColor="@color/btn_logout_bg"
            android:textSize="20sp"
            card_view:layout_constraintBottom_toTopOf="@+id/com_grade_show"
            card_view:layout_constraintEnd_toEndOf="@+id/com_grade_show"
            card_view:layout_constraintHorizontal_bias="0.0"
            card_view:layout_constraintStart_toStartOf="@+id/com_grade_show"
            card_view:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/com_issue_show"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border_one"
            android:textAlignment="center"
            android:textColor="@color/btn_logout_bg"
            android:textSize="20sp"
            card_view:layout_constraintBottom_toTopOf="@+id/com_price_show"
            card_view:layout_constraintEnd_toEndOf="@+id/com_price_show"
            card_view:layout_constraintHorizontal_bias="1.0"
            card_view:layout_constraintStart_toStartOf="@+id/com_price_show"
            card_view:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/com_grade_show"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border_one"
            android:gravity="center"
            android:textColor="@color/btn_logout_bg"
            android:textSize="20sp"
            card_view:layout_constraintBottom_toBottomOf="parent"
            card_view:layout_constraintEnd_toEndOf="parent"
            card_view:layout_constraintHorizontal_bias="0.5"
            card_view:layout_constraintStart_toEndOf="@+id/com_price_show"
            card_view:layout_constraintTop_toBottomOf="@+id/com_title_show" />

        <TextView
            android:id="@+id/com_price_show"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border_one"
            android:gravity="center"
            android:textColor="@color/btn_logout_bg"
            android:textSize="20sp"
            card_view:layout_constraintBottom_toBottomOf="parent"
            card_view:layout_constraintEnd_toStartOf="@+id/com_grade_show"
            card_view:layout_constraintHorizontal_bias="0.5"
            card_view:layout_constraintStart_toEndOf="@+id/com_image_show"
            card_view:layout_constraintTop_toBottomOf="@+id/com_issue_show" />

        <ImageView
            android:id="@+id/com_image_show"
            android:layout_width="129dp"
            android:layout_height="105dp"
            android:background="@drawable/border_one"
            card_view:layout_constraintBottom_toBottomOf="parent"
            card_view:layout_constraintEnd_toStartOf="@+id/com_price_show"
            card_view:layout_constraintHorizontal_bias="0.5"
            card_view:layout_constraintStart_toStartOf="parent"
            card_view:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

3) 片段加载回收站视图

public class FragExplore extends Fragment {

    public FragExplore() {
        //required empty default constructor
    }

    public DatabaseReference comBaseRef;
    public FirebaseAuth mAuth;
    public List<ComicBase> list = new ArrayList<>();
    public RecyclerView recView;
    public RecyclerView.Adapter adapter;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.frag_explore,
                container, false);

        recView = rootView.findViewById(R.id.rec_view_buy);
        recView.setHasFixedSize(true);
        recView.setLayoutManager(new LinearLayoutManager(getActivity()));

        mAuth = FirebaseAuth.getInstance();
        comBaseRef = FirebaseDatabase.getInstance().getReference("ComicBase");

        comBaseRef.addChildEventListener(new ChildEventListener() {
            @Override
            public void onChildAdded(@NonNull DataSnapshot dataSnapshot, @Nullable String s) {
                ComicBase comicBase = dataSnapshot.getValue(ComicBase.class);
                list.add(comicBase);

                adapter = new RecViewAdapter(getContext(), list);
                recView.setAdapter(adapter);
            }

            @Override
            public void onChildChanged(@NonNull DataSnapshot dataSnapshot, @Nullable String s) {

            }

            @Override
            public void onChildRemoved(@NonNull DataSnapshot dataSnapshot) {

            }

            @Override
            public void onChildMoved(@NonNull DataSnapshot dataSnapshot, @Nullable String s) {

            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
            }
        });
        return rootView;
    }
}

4) JSON 类

public class ComicBase {

    private String comTitle, comIssue, comGrade,
            comImageUrl,
            comPrice;

    public ComicBase(){
        //No-argument constructor
        //can leave empty
    }

    public ComicBase(String comTitle,
                     String comIssue,
                     String comGrade,
                     String comImageUrl,
                     String comPrice){
        this.comTitle = comTitle;
        this.comIssue = comIssue;
        this.comGrade = comGrade;
        this.comImageUrl = comImageUrl;
        this.comPrice = comPrice;
    }

    public String getComTitle() {
        return comTitle;
    }

    public void setComTitle(String comTitle) {
        this.comTitle = comTitle;
    }

    public String getComIssue() {
        return comIssue;
    }

    public void setComIssue(String comIssue) {
        this.comIssue = comIssue;
    }

    public String getComGrade() {
        return comGrade;
    }

    public void setComGrade(String comGrade) {
        this.comGrade = comGrade;
    }
    public String getImageUrl() {
        return comImageUrl;
    }
    public void setImageUrl(String comImageUrl) {
        this.comImageUrl = comImageUrl;
    }
    public String getComPrice() {
        return comPrice;
    }
    public void setComPrice(String comPrice) {
        this.comPrice = comPrice;
    }
}

5) 发布到 firebase 的方法

public void PostComicInfo(){
        //grabs the text from the views and converts them to strings
        final String ComTitle = comTitle.getText().toString().trim();
        final String ComIssue = comIssue.getText().toString().trim();
        final String ComGrade = comGrade.getText().toString().trim();
        final String ComPrice = comPrice.getText().toString().trim();

        // checks for empty fields and throws message if nothing is found
        if (TextUtils.isEmpty(ComTitle)){
            Toast.makeText(ActPostComic.this, "Add the Comic Title!", Toast.LENGTH_LONG).show();
            return;
        } if (TextUtils.isEmpty(ComIssue)){
            Toast.makeText(ActPostComic.this, "Add the Comic Issue Number!", Toast.LENGTH_LONG).show();
            return;
        } if (TextUtils.isEmpty(ComGrade)){
            Toast.makeText(ActPostComic.this, "Add the Comic Grade!", Toast.LENGTH_LONG).show();
            return;
        } if (TextUtils.isEmpty(ComPrice)){
            Toast.makeText(ActPostComic.this, "Add your Price!", Toast.LENGTH_LONG).show();
            return;
        }

        //stores the image file
        StorageReference ref = storageRef.child(uri.getLastPathSegment());
        ref.putFile(uri)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        //getting the comic image download url
                        final Task<Uri> downloadUrl = taskSnapshot.getMetadata().getReference().getDownloadUrl();
                        final String ComImageUrl = downloadUrl.toString();
                        //the comic base reference here must have the same order as the java class itself
                        databaseRef.push().setValue(new ComicBase(ComTitle, ComIssue, ComGrade, ComImageUrl, ComPrice))
                                .addOnCompleteListener(new OnCompleteListener<Void>() {
                                    @Override
                                    public void onComplete(@NonNull Task<Void> task) {
                                        Toast.makeText(ActPostComic.this, "Upload Complete!", Toast.LENGTH_SHORT).show();
                                        startActivity(new Intent(ActPostComic.this, ActMain.class));
                                    }
                                });
                    }
                });
    }

Answer 1

要实现这一点，您可以使用图像缓存库，如 Picasso

可以下载here

然后您可以使用如下代码在onBindViewHolder 方法中加载图像。

       Picasso.get().load(comicBase.getImageUrl()).into(viewHolder.comImageHolder);

将此代码添加到PostComicInfo 方法中。

    Calendar callForDate = Calendar.getInstance();
    SimpleDateFormat currentDate = new SimpleDateFormat("dd-MMMM-yyyy");
    saveCurrentDate = currentDate.format(callForDate.getTime());

    Calendar callForTime = Calendar.getInstance();
    SimpleDateFormat currentTime = new SimpleDateFormat("HH:mm");
    saveCurrentTime = currentTime.format(callForTime.getTime());

    postRandomName = saveCurrentDate+saveCurrentTime;

然后将StorageReference ref = storageRef.child(uri.getLastPathSegment());方法改成下面

StorageReference ref = storageRef.child(uri.getLastPathSegment() + postRandomName + ".jpg");

然后addOnSuccessListener改成下面。

 filepath.putFile(resultUri).addOnCompleteListener(new OnCompleteListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onComplete(@NonNull Task<UploadTask.TaskSnapshot> task) {
                        if(task.isSuccessful()){

                            final String ComImageUrl = task.getResult().getDownloadUrl().toString();

                           databaseRef.push().setValue(new ComicBase(ComTitle, ComIssue, ComGrade, ComImageUrl, ComPrice))
                                .addOnCompleteListener(new OnCompleteListener<Void>() {
                                    @Override
                                    public void onComplete(@NonNull Task<Void> task) {
                                        Toast.makeText(ActPostComic.this, "Upload Complete!", Toast.LENGTH_SHORT).show();
                                        startActivity(new Intent(ActPostComic.this, ActMain.class));
                                    }
                                });
                        }
                    }
                });

Answer 2

将此添加到发布到 Firebase 的方法中可以解决问题

        final StorageReference ref = storageRef.child("ComicImageBase").child(UUID.randomUUID().toString());
        ref.putFile(uri)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {

                        final Task<Uri> urlTask = taskSnapshot.getStorage().getDownloadUrl();
                        while (!urlTask.isSuccessful());
                        final Uri taskResult = urlTask.getResult();
                        final String downloadUrl = taskResult.toString();

                            databaseRef.push().setValue(new ComicBase(ComTitle, ComIssue, ComGrade, downloadUrl, ComPrice))
                                    .addOnCompleteListener(new OnCompleteListener<Void>() {
                                        @Override
                                        public void onComplete(@NonNull Task<Void> task) {
                                            Toast.makeText(ActPostComic.this, "Upload Complete!", Toast.LENGTH_SHORT).show();
                                            startActivity(new Intent(ActPostComic.this, ActMain.class));
                                        }
                                    });
                    }
                });