android - ListView - 突出显示项目的子布局

Question

我一直在寻找这个问题的直接答案已经有一段时间了。我想知道的是如何在 ListView 上实现自定义突出显示，它只会突出显示(最好是在顶部)ListView 项目的子布局(在这种情况下，我希望突出显示项目的 RelativeLayout)。

这是我所进行的操作的屏幕截图:Fail

这是 list_item.xml 的代码:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:clickable="false">
<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="@drawable/card_layout">
    <LinearLayout android:id="@+id/linearLayout_thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_vertical">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/imageView_thumbnail"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        android:layout_toRightOf="@+id/linearLayout_thumbnail"
        android:gravity="center_vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_title"
            android:paddingLeft="5dp"
            android:textSize="18dp"
            android:text="SOME TEXT" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_subtitle"
            android:paddingLeft="5dp"
            android:textSize="12dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView_other"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="12dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>

以及该图片的 ListView 的代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">

<ListView android:id="@+id/listView_something"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:listSelector="@drawable/list_item_selector"
    android:drawSelectorOnTop="true"/>

</LinearLayout>

list_item_selector.xml 的代码:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/list_item_selected" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent" android:state_focused="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

这是 card_layout.xml 的文件:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle"
        android:dither="true">
        <corners android:radius="2dp"/>
        <solid android:color="#ccc" />
    </shape>
</item>

<item android:bottom="2dp">
    <shape android:shape="rectangle"
        android:dither="true">
        <corners android:radius="2dp" />
        <solid android:color="@android:color/white" />
        <padding android:bottom="7dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />
    </shape>
</item>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/list_item_selected" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent" android:state_focused="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

这是当我将 RelativeLayout 的背景切换到 ListView 正在使用的选择器并更改 ListView 以使其选择器透明时发生的情况:Sort of working

因此，无论出于何种原因，card_layout.xml 文件都不允许在选择器信息之前包含这两项，一切都变得很奇怪。谁能告诉我这是如何正确实现的？ Like Google Play Music (这可能不是最好的例子，因为它看起来像 GridView 或类似的东西)

我是否必须实现 GridView 才能显示此列表？

Answer 1

我找到了一个解决方案，我不知道它是否是最好的解决方案，但它完成了我想要完成的事情。

简而言之，我发现在 card_layout.xml 文件中添加选择器代码不起作用。您应该做的是为您希望在按钮或列表项上实现的每个状态创建一个布局 xml 文件，并将该布局嵌入到选择器本身中，就像这里 SO 帖子的答案一样:Android Using layer-list for button selector.

因为我不想费心去寻找颜色和透明度，所以我需要为三种不同的状态实现背景，我基本上放置了一个位于整个列表项顶部的 RelativeLayout 作为可选择的项目的一部分。

代码在这里:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp">
<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="@drawable/card_layout">
    <LinearLayout android:id="@+id/linearLayout_thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_vertical">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/imageView_thumbnail"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        android:layout_toRightOf="@+id/linearLayout_thumbnail"
        android:gravity="center_vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_title"
            android:paddingLeft="5dp"
            android:textSize="18dp"
            android:text="SOME TEXT" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_subtitle"
            android:paddingLeft="5dp"
            android:textSize="12dp"
            android:text="SOME TEXT" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView_extra"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="12dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:background="@drawable/list_item_selector"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"/>
</FrameLayout>

所以，现在可以正常使用了，截图在这里: