Question

我尝试用这种设计创建一个回收者视图

这是一个单一的Recycler视图，棘手的部分就在这里

我们在循环器视图的第二行，我需要在第一行右侧元素的中间放置第二行。

这是当前的代码

<div class="wrap">

    <div class="section section-md">
        <div class="section-content">
            Hello World
        </div>
    </div>

    <div class=" section parallax">
        <div class="background ">
            <div class="background-image">
                <img src="http://story-teller-photography.de/upload/outland/convert/c857a6dc02e0e048a12d91f58cbeec39_1800_0.jpg">
            </div>
        </div>
        <div class="section-content">
            <h2>Heading</h2>
        </div>
    </div>

    <div class="section">
        <div class="section-content">
            Hello World
        </div>
    </div>

    <div class="section">
        <div class="section-content">
            Hello World
        </div>
    </div>

</div>

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

我正在使用recylcler视图和基本的RecylcerView.Adapter来扩充内容。

Answer 1

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

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

NormalView
查看额外的上边距

仅将第二个视图用于位置1.由于只有位置1视图包含额外的上边距，您将看到第二列第一个项目有一些额外的顶部空间。我想你可以解决这个问题。

覆盖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使用。

没有对齐2个列的Android回收站视图

1 个答案: