android - 在 Android CardView 中显示存储在 Firestore 中的图片和描述
问题描述
我一直在互联网上搜索以找到一个示例,该示例显示了 Android CardView 中 Firestore 中图像和描述的基本实现,但我刚刚找到了通过上传按钮将图片添加到 Firebase 存储的示例。我只想通过 Firebase 控制台添加图片和信息;不是我的应用程序。
对于我当前的项目,我想为 CardView 实现一张图片和一个小描述。我的 Firestore 数据库如下所示:
图片实际上存储在 Firebase 存储中,但我认为如果所有这些都在一个数据库中,那么将所有这些都实现到 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 中,但没有插入此处。
片段主页.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);
}
}
}
解决方案
嗨,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();
}
}
我希望这有效。
推荐阅读
- google-app-engine - 如何从 Google App Engine 调用 Google Cloud Function?
- reactjs - 在reactjs中基于条件渲染隐藏下拉菜单
- mysql - 找不到库:libmysqlclient.so.18
- java - java.lang.NoClassDefFoundError: javax/xml/ws/WebServiceRef
- c++ - MSVC 的 STL 实现是否将警告级别覆盖为 3?
- or-tools - Google OR-Tools 找不到解决 VRPtw 问题的方法
- java - 遇到 Tesseract 致命错误!” == NULL:Error:Assert failed:in file globaloc.cpp, line 75
- html - 将按钮放在父 div 的右下角,而不是页面
- python - 使用 Pandas 将数据导出到数据框
- c# - TcpClient/NetworkStream 在同一个实例上同时读写