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

标签 java android xml android-layout android-recyclerview

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

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

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

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

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

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

提前谢谢你。

enter image description here

最佳答案

你想要的布局可以通过使用 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膨胀正确布局的参数。

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

enter image description here

关于java - recyclerview android 中的 2-vertical 和 2-horizo​​ntal 卡片 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46147404/

相关文章:

java - GWT 文档格式转换器

java - XML 解析为 Java - 获取根属性值

android - ListView 上的 SwipeListener 和 ListView 项目上的 ClickListener

android - 如何创建 Kotlin DSL - DSL 语法 Kotlin

android - 'center' 中的 'centerCrop' 和 "ImageView"有什么区别?

python - 如何在odoo中为qweb-pdf页面添加边框?

java - 为什么我的按钮不可点击? ( java )

c# - 逻辑问题: Given corners, 找到四边形的中心?

android - 无法将 FrameLayout 放置在 ConstraintLayout 内

xml - 您可以从 access 中使用 xml 吗?