如何制作Android L预览版设计风格的列表视图

Question

我制作了安卓L预览版的图像样式列表项。 这是我为这些类似设计编写的代码。

// Drawable/list_item_bg.xml

<?xml version="1.0" encoding="utf-8"?>

     <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
          <item>
                <shape
                 android:shape="rectangle">
                  <solid android:color="#E6E6E6" />
                </shape>
          </item>
          <item android:bottom="1dp">
              <shape
                    android:shape="rectangle">
                   <solid android:color="#FAFAFA" />
              </shape>
          </item>
      </layer-list>

//Drawable/list_icon_bg

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/list_grey_bg" />
</shape>

//布局/列表项

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp">

    <ImageView
        android:id="@+id/list_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="16dp"
        android:src="@drawable/thumb"
        android:background="@drawable/list_icon_bg"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:background="@drawable/list_item_bg"
        android:layout_toRightOf="@+id/list_icon"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/primary_text"
            android:paddingRight="16dp"
            android:text="Sample Text" />

    </LinearLayout>

</RelativeLayout>

但是我有一个关于列表项选中状态的问题。列表项选中状态的背景色仅在图标区域有效。选中状态的列表项背景色在LinearLayout区域无效。我该如何解决。

- Nyan Lynn Htut

---

我无法完全理解你的问题，但是尝试将"android:background="@drawable/list_icon_bg"这一行放在你的行父布局中。也许这可以帮助你。 - Sunit Kumar Gupta

如果我在父视图中添加了"android:background="@drawable/list_icon_bg"，则分隔线将出现全屏。 - Nyan Lynn Htut

你正在消耗图标上的点击事件，但可能没有将其传递到主列表视图中？ - droidchef

我想让列表项的背景颜色影响整个列表项，而不仅仅是图标区域（如图2所示）。 - Nyan Lynn Htut

请尝试在父列表中设置一些高度，并在行的父布局中添加“android:background = @drawable/list_icon_bg”一行代码。然后发布屏幕截图。 - Sunit Kumar Gupta

Answer 1

activity_main:
============


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:background="@drawable/list_icon_bg">

    <ImageView
        android:id="@+id/list_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="16dp"
        android:src="@drawable/thumb"
        />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:background="@drawable/list_item_bg"
        android:layout_toRightOf="@+id/list_icon"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/primary_text"
            android:paddingRight="16dp"
            android:text="Sample Text" />

    </LinearLayout>

</RelativeLayout>

- PLP