具有 2 列未对齐的 Android recyclerview

Question

我尝试用这种设计创建一个回收器 View

这是一个单一的 Recycler View ，棘手的部分在这里

我们位于回收站 View 的第二行，我需要将第二行放在第一行右侧元素的中间。

这是当前代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1 "
            android:layout_height="140dp"
            android:layout_marginEnd="@dimen/margin_8"/>    

        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1 "
            android:layout_height="140dp"
            android:layout_marginStart="@dimen/margin_8"/>

</LinearLayout>

是否可以在 Android 上执行此操作？我尝试对行的左侧元素使用负边距，但这不起作用。

我正在使用一个 recylcler View 和一个基本的 RecylcerView.Adapter 来填充内容。

Answer 1

您可以使用 StaggeredGridLayoutManager . GridLayoutManager为每个单元格占用相等的空间。与 GridLayoutManager 不同，StaggeredGridLayoutManager 会根据需要为每个单元格占用空间。

您可以为 RecyclerView 使用 2 种 View 类型。

1. 普通 View
2. 查看有额外的上边距

仅对位置 1 使用第二个 View 。由于只有位置 1 View 包含额外的上边距，您会看到第二列第一个项目有一些额外的顶部空间。我想你可以这样解决。

覆盖getItemViewType方法

@Override
public int getItemViewType(int position) {

    if (position == 1)
        return 1;
    return 0;

}

在onCreateViewHolder 方法中

if (viewType == 0){
   // inflate your regular layout 
}else{
  // inflate layout with extra top margin  
}

示例布局 Xml:

常规布局:

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

>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:scaleType="fitXY"
        android:src="@drawable/album_8"
        />


    <TextView
        android:id="@+id/textViewTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginTop="0dp"
        android:singleLine="true"
        android:text="TextView"
        android:textColor="@android:color/black"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/textViewSubTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:singleLine="true"
        android:text="TextView"
        android:textSize="11sp" />

</LinearLayout>


</LinearLayout>

带有额外上边距的布局:

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

>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:layout_marginTop="60dp"
    android:layout_marginBottom="8dp"
    >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:scaleType="fitXY"
        android:src="@drawable/album_8"
        />


    <TextView
        android:id="@+id/textViewTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginTop="0dp"
        android:singleLine="true"
        android:text="TextView"
        android:textColor="@android:color/black"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/textViewSubTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:singleLine="true"
        android:text="TextView"
        android:textSize="11sp" />

</LinearLayout>


</LinearLayout>

检查这个repo用于 StaggeredGridLayoutManager 示例和一些高级 RecyclerView 使用。