具有上下文操作欄的Android Card UI樣式ListView？

Question

我剛開始使用Android開發並試圖獲得“卡片UI”樣式ListView，它也使用上下文操作欄突出顯示多個要刪除的項目等。我只想在選擇項目時將背景顏色更改為藍色。

我設法使用圖層列表獲得了我想要的LOOK，但是當我以優雅的方式選擇等時，我無法獲得背景顏色。 根據我的理解，我需要使用一個“選擇器”可繪制的嗎？ 但是當我使用它時，我不再知道如何獲得卡片UI的LOOK。

這是我希望它看起來的樣子，並且能夠在選擇時將背景更改為藍色。

這是我對選擇器drawable所做的事情，在功能方面，就能夠在選擇時更改背景顏色而言，它很好，但是你可以看到它看起來不對。 我只需要像上圖那樣底部的灰色。

list_item.xml

<?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="?android:attr/listPreferredItemHeight">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:background="@drawable/card_background">

    <ImageView
        android:id="@+id/list_image"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:src="@drawable/horse_image"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/horse_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="left|center_vertical"
        android:textSize="20dip"
        android:layout_marginLeft="10dip"
        android:text="@string/loading_horses" />

</LinearLayout>
</FrameLayout>

card_background.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:bottom="2dp">
    <shape
        android:shape="rectangle"
        android:dither="true">
        <stroke android:width="5dp" android:color="#FFDDDDDD" />
        <corners android:radius="2dp" />
        <solid android:color="@android:color/white" />

        <padding
            android:bottom="8dp"
            android:left="8dp"
            android:right="8dp"
            android:top="8dp" />
    </shape>


</item>

<item android:state_activated="true" android:bottom="2dp">
    <shape
        android:shape="rectangle"
        android:dither="true">
        <stroke android:width="5dp" android:color="#FFDDDDDD" />
        <corners android:radius="2dp" />
        <solid android:color="@android:color/holo_blue_light" />

        <padding
            android:bottom="8dp"
            android:left="8dp"
            android:right="8dp"
            android:top="8dp" />


    </shape>
</item>

<item android:bottom="2dp">
    <shape
        android:shape="rectangle"
        android:dither="true">
        <stroke android:width="5dp" android:color="#FFDDDDDD" />
        <corners android:radius="2dp" />
        <solid android:color="@android:color/white" />

        <padding
            android:bottom="8dp"
            android:left="8dp"
            android:right="8dp"
            android:top="8dp" />
    </shape>
</item>


</selector>

Answer 1

background_pressed.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="#22000000" />
            <padding android:bottom="6dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
        </shape>
    </item>
</layer-list>

background.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="#FFF" />
            <padding android:bottom="6dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
        </shape>
    </item>
</layer-list>

list_item_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/background_pressed" android:state_activated="true"/>
    <item android:drawable="@drawable/background_pressed" android:state_checked="true"/>
    <item android:drawable="@drawable/background_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/background_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/background_pressed" android:state_active="true"/>
    <item android:drawable="@drawable/background"/>
</selector>

為列表項添加一些填充，並將list_item_background應用為列表項背景。

Answer 2

我想你可能想嘗試android:state_selected來覆蓋選擇案例。