在Android CardView中显示存储在Firestore中的图片和说明

时间:2018-12-20 13:15:26

标签: android firebase google-cloud-firestore

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

对于我当前的项目,我想为CardView实现图片和简短描述。我的Firestore数据库如下所示:

enter image description here

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

最好有一个业余爱好者的例子开始。我了解Android Studio中的Firebase集成。 Firestore库已集成,但除此之外,我还需要另一个库(也许是存储库)吗?

到目前为止,这是我的工作:

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);
    }
}

}

1 个答案:

答案 0 :(得分:0)

您好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中实现毕加索后,请返回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();
    }
}

我希望这行得通。