java - recyclerview android 中的 2-vertical 和 2-horizo​​ntal 卡片 View

Question

我想用一个数据集列表创建以下 UI。

我尝试使用多种 View 类型，但无法达到我的要求。我也实现了这个博客Android Horizontal and Vertical RecyclerView Example .

但是这里使用了两个recyclerviews，并且有两组数据(水平数据和垂直数据)。

我也试过这个。 RecyclerView with multiple views using custom adapter in Android

但这是在 XML 中使用静态卡片 View 并将它们加载到适配器中。

我是 Android 开发的初学者。请帮忙!

提前谢谢你。

Answer 1

你想要的布局可以通过使用 GridLayoutManager 来实现。以及 RecyclerView.Adapter 中的两个“项目 View 类型” .

这是我的布局 XML 文件:

activity_main.xml:
-------------------------

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
    
horizontal.xml:
-------------------------

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:layout_margin="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/image"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ccc"/>

        <TextView
            android:id="@+id/text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#fff"
            android:textColor="#000"
            android:textSize="18sp"
            android:text="TEXT"/>

    </LinearLayout>

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

vertical.xml:
-------------------------

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:layout_margin="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ccc"/>

        <TextView
            android:id="@+id/text"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#fff"
            android:textColor="#000"
            android:textSize="18sp"
            android:text="TEXT"/>

    </LinearLayout>

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

这是我的 Java 文件:

public class MainActivity extends AppCompatActivity {

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

        GridLayoutManager manager = new GridLayoutManager(this, 2);
        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return (position % 4) < 2 ? 2 : 1;
            }
        });

        RecyclerView recycler = (RecyclerView) findViewById(R.id.recycler);
        recycler.setLayoutManager(manager);
        recycler.setAdapter(new MyAdapter());
    }

    private static class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

        @Override
        public int getItemViewType(int position) {
            return (position % 4) < 2
                    ? R.layout.horizontal
                    : R.layout.vertical;
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            LayoutInflater inflater = LayoutInflater.from(parent.getContext());
            View itemView = inflater.inflate(viewType, parent, false);
            return new MyViewHolder(itemView);
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            holder.image.setImageResource(R.drawable.mouse);
            holder.text.setText("" + position);
        }

        @Override
        public int getItemCount() {
            return Integer.MAX_VALUE;
        }
    }

    private static class MyViewHolder extends RecyclerView.ViewHolder {

        private final ImageView image;
        private final TextView text;

        public MyViewHolder(View itemView) {
            super(itemView);
            this.image = (ImageView) itemView.findViewById(R.id.image);
            this.text = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

让我们回顾一下重要的部分。首先是 GridLayoutManager 的组合和 SpanSizeLookup .我们正在用这一行创建布局管理器:

GridLayoutManager manager = new GridLayoutManager(this, 2);

这意味着，默认情况下，我们的网格的每一行中都会有两张卡片。但是然后我们应用 SpanSizeLookup ，它表示我们一半的行(由语句 position % 4 < 2 找到)实际上应该占据两列。所以我们将在我们的“网格”中重复一张卡片、一张卡片、两张卡片。

然后，在 RecyclerView.Adapter类，我们覆盖 getItemViewType()方法。在这里我们再次使用 position % 4 < 2声明说我们的 View 一半应该是水平的，一半应该是垂直的。

getItemViewType()只需要返回任何唯一的 int对于每种 View 类型，我们使用一个很好的技巧来返回 R.layout此方法中的常量。由于 View 类型将被传递到 onCreateViewHolder() , 我们可以使用 viewType膨胀正确布局的参数。

就是这样!毕竟还不错。这是我的代码的屏幕截图: