回收站适配器中的图像拼贴

Question

我有一个典型的回收站适配器。适配器中的某些项目具有图像，有时只有一张图像，有时是20张。我想创建一个图像拼贴，如下图所示，具体取决于每个项目中图像的数量：

我有10种不同的布局。第一种是在项目只有1张图像（布局中为1 ImageView）时使用，第二种是在项目具有2张图像（布局中为2 ImageViews）时使用，另一种是在项目具有3张图像时使用，等等。如果该项目有10张以上的图像，它将使用10 ImageViews的布局并隐藏其余图像。布局命名为：

• one_image.xml
• two_images.xml
• three_images.xml
• ...等...

这是我的回收站适配器：

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

    private static Context context;
    private List<Message> mDataset;

    public RecyclerAdapter(Context context, List<Message> myDataset) {
        this.context = context;
        this.mDataset = myDataset;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnCreateContextMenuListener, View.OnClickListener {
        public TextView title;

        public ViewHolder(View view) {
            super(view);
            view.setOnCreateContextMenuListener(this);

            title = (TextView) view.findViewById(R.id.title);
        }
    }

    @Override
    public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.message_layout, parent, false);
        ViewHolder vh = new ViewHolder((LinearLayout) view);

        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Message item = mDataset.get(position);

        holder.title.setText(item.getTitle());

        int numImages = item.getImages().size();
        if (numImages > 0) {
            // Show image collage
        }
    }

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

}

这里是主要布局，message_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    // Image collage layout

</LinearLayout>

这是图像拼贴布局之一，two_images.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        />

    <ImageView
        android:id="@+id/image_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        />

</LinearLayout>

所以问题是，如何根据图像数量将正确的布局加载/充气到回收站适配器中，并用图像填充布局？

Answer 1

您可以使用StaggeredGridLayoutManager来实现上述类型的布局。 Click here for more information about StaggeredGridLayoutManager

有许多库用于交错的gridview。您可以使用其中任何一个。我建议使用此：AndroidStaggeredGrid

Answer 2

您应该为每个布局创建一个自定义ViewHolder。

想象您有这个ViewHolder：TwoImagesViewHolder

public class TwoImagesViewHolder extends RecyclerView.ViewHolder {
    public TextView title;
    public ImageView imageOne;
    public ImageView imageTwo;

    public TwoImagesViewHolder(@NonNull View view) {
        super(view);
        title = (TextView)view.findViewById(R.id.title);
        imageOne = (ImageView)view.findViewById(R.id.image_one);
        imageTwo = (ImageView)view.findViewById(R.id.image_two);
    }
}

在适配器内部，您可以像这样使用支架：

@Override
public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    Message item = mDataset.get(position);
    int numImages = item.getImages().size();
    if (numImages == 2) {
        return new TwoImagesViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.message_layout, parent, false))
    }

    // Add all the conditions for your custom ViewHolders 

    return DefaultViewHolder; // Define a Default holder 
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    Message item = mDataset.get(position);
    int numImages = item.getImages().size();
    if (numImages == 2) {
      // Show image collage
      TwoImagesViewHolder holder = (TwoImagesViewHolder)viewHolder;
      holder.title.setText(item.getTitle());
      holder.image_one.setImageResource(...);
      holder.image_two.setImageResource(...);
    }

    // Add all the conditions for your custom ViewHolders 
}

您需要创建所有条件来实例化正确的布局持有人，并记住onCreateViewHolder和onBindViewHolder具有相同的条件。