在 Android CardView 中显示存储在 Firestore 中的图片和描述

Question

我一直在互联网上搜索，以找到一个示例，该示例显示了 Android CardView 中 Firestore 中图像和描述的基本实现，但我刚刚找到了通过上传按钮将图片添加到 Firebase 存储的示例。我只想通过 Firebase 控制台添加图片和信息；不是我的应用程序。

对于我当前的项目，我想为 CardView 实现一张图片和一个小描述。我的 Firestore 数据库如下所示：

图片实际上存储在 Firebase Storage 中，但我认为如果所有这些都在一个数据库中，那么将所有这些都实现到 CardView 中会更容易。

如果有一个对业余爱好者友好的例子开始就好了。我了解 Android Studio 中的 Firebase 集成。 Firestore 库已集成，但除此之外我还需要另一个（可能是 Storage 库）吗？

这些是我目前所做的：

card_item.xml：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="#FBEFFB">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp">

    <ImageView
        android:id="@+id/picture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxHeight="50dp" />


    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/picture"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Title"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_alignParentStart="true"
        android:text="Text" />


</RelativeLayout>

RelativeLayout 位于 CardView 中，但未插入此处。

fragment_home.xml：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:id="@+id/tomap"/>

HomeFragment.java

public class HomeFragment extends AppCompatActivity {



private Button tomap;
private FirebaseFirestore db = FirebaseFirestore.getInstance();
private CollectionReference PicturesRef = db.collection("Pictures");

private NoteAdapter adapter;




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

    tomap = findViewById(R.id.tomap);

    tomap.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
           openMapsActivity();
        }
    });

    setUpRecyclerView();

}

public void openMapsActivity () {

    Intent intent = new Intent(this, MapsActivity.class );
     startActivity(intent);
}

private void setUpRecyclerView() {
    Query query = PicturesRef.orderBy("Name", Query.Direction.DESCENDING);

    FirestoreRecyclerOptions<Note> options = new FirestoreRecyclerOptions.Builder<Note>()
            .setQuery(query, Note.class)
            .build();

    adapter = new NoteAdapter(options);

    RecyclerView recyclerView = findViewById(R.id.recycler_view);
    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    recyclerView.setAdapter(adapter);
}

@Override
protected void onStart() {
    super.onStart();
    adapter.startListening();
}

@Override
protected void onStop() {
    super.onStop();
    adapter.stopListening();
}

}

Note.java

public class Note {
private String Name;
private String Info;


public Note() {
    //empty constructor needed
}

public Note(String title, String description) {
    this.Name = title;
    this.Info = description;
}

public String getName() {
    return Name;
}

public String getInfo() {
    return Info;
}

}

NoteAdapter.java

public class NoteAdapter extends FirestoreRecyclerAdapter<Note, NoteAdapter.NoteHolder> {

/**
 * Create a new RecyclerView adapter that listens to a Firestore Query.  See
 * {@link FirestoreRecyclerOptions} for configuration options.
 *
 * @param options
 */
public NoteAdapter(FirestoreRecyclerOptions<Note> options) {
    super(options);
}

@Override
protected void onBindViewHolder(NoteHolder holder, int position, Note model) {

    holder.textViewTitle.setText(model.getName());
    holder.textViewDescription.setText(model.getInfo());


}

@NonNull
@Override
public NoteHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_item,
            parent, false);
    return new NoteHolder(v);
}

class NoteHolder extends RecyclerView.ViewHolder {
    TextView textViewTitle;
    TextView textViewDescription;


    public NoteHolder(View itemView) {
        super(itemView);
        textViewTitle = itemView.findViewById(R.id.title);
        textViewDescription = itemView.findViewById(R.id.text);
    }
}

}

Answer 1

嗨，Dee Jott，如果您还没有解决问题，请测试一下，看看它是否可行。

如果你想在你的卡片视图上显示图片，你应该首先在你的 Note.java 文件中添加额外的代码

public class Note {
    private String Name;
    private String Info;
    private String Picture;


    public Note() {
        //empty constructor needed
    }

    public Note(String title, String description, String picture) {
        this.Name = title;
        this.Info = description;
        this.Picture = picture;
    }

    public String getName() {
        return Name;
    }

    public String getInfo() {
        return Info;
    }

    // Getters and setters to get the picture from firestore

    public String getPicture() {
        return Picture;
    }

    public void setPicture(String picture) {
        this.Picture = picture;
    }
}

更改 Note.java 文件后，转到 gradle 并实现它。

implementation 'com.squareup.picasso:picasso:2.71828'

当您在 gradle 中实现了 picasso 后，返回到 NoteAdapter 并添加这些行

public class NoteAdapter extends FirestoreRecyclerAdapter<Note, NoteAdapter.NoteHolder> {

    /**
     * Create a new RecyclerView adapter that listens to a Firestore Query.  See
     * {@link FirestoreRecyclerOptions} for configuration options.
     *
     * @param options
     */
    public NoteAdapter(FirestoreRecyclerOptions<Note> options) {
        super(options);
    }

    @Override
    protected void onBindViewHolder(NoteHolder holder, int position, Note model) {

        holder.textViewTitle.setText(model.getName());
        holder.textViewDescription.setText(model.getInfo());
        holder.setPicture(model.getPicture());


    }

    @NonNull
    @Override
    public NoteHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_item,
                parent, false);
        return new NoteHolder(v);
    }

    class NoteHolder extends RecyclerView.ViewHolder {
        TextView textViewTitle;
        TextView textViewDescription;
        ImageView imageViewPicture;


        public NoteHolder(View itemView) {
            super(itemView);
            textViewTitle = itemView.findViewById(R.id.title);
            textViewDescription = itemView.findViewById(R.id.text);
        }

        public void setPicture(String picture) {
            imageViewPicture = itemView.findViewById(R.id.picture);
            Picasso.get().load(picture).into(imageViewPicture);
        }
    }

}

最后将这些行添加到您的 HomeFragment

public class HomeFragment extends AppCompatActivity {


    private Button tomap;
    private FirebaseFirestore db = FirebaseFirestore.getInstance();
    private CollectionReference PicturesRef = db.collection("Pictures");

    private NoteAdapter adapter;


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

        tomap = findViewById(R.id.tomap);

        tomap.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                openMapsActivity();
            }
        });

        setUpRecyclerView();

    }

    public void openMapsActivity() {

        Intent intent = new Intent(this, MapsActivity.class);
        startActivity(intent);
    }

    private void setUpRecyclerView() {
        Query query = PicturesRef;

        FirestoreRecyclerOptions<Note> options = new FirestoreRecyclerOptions.Builder<Note>()
                .setQuery(query, Note.class)
                .build();

        adapter = new NoteAdapter(options);

        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);
    }

    @Override
    protected void onStart() {
        super.onStart();
        adapter.startListening();
    }

    @Override
    protected void onStop() {
        super.onStop();
        adapter.stopListening();
    }
}

我希望这可行。