Android：如何在 Youtube 应用程序中创建时尚的列表视图答案

【问题标题】：Android: How to create a stylish listview as in Youtube applicationAndroid：如何在 Youtube 应用程序中创建时尚的列表视图
【发布时间】：2015-03-11 01:01:11
【问题描述】：

我正在使用 Android Studio 创建一个具有列表视图的应用程序，在我选择要使用导航抽屉的项目后，我在我的活动中添加了一个列表视图控件。

我查看了互联网，关于自定义列表视图行的可用示例不是我需要的，我需要像在 Youtube 应用程序中一样创建项目/行，具有圆角和阴影以及项目之间的更大空间。

这是具有自定义行的列表视图控件还是具有复合控件（作为项目/行）和垂直滚动条的活动？

[Youtube 应用截图]

编辑 1：

这是我使用@Saeed 方法的代码，但我遇到了一个小问题；使用 Shape Stroke 具有左/右/上/下边距会导致两个列表项之间的上/下边距的两倍大小。如何单独设置每个边缘边距？

list.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/background_with_shadow">

<!-- icon -->
<ImageView
    android:id="@+id/item_icon"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    android:src="@drawable/abc_ic_search_api_mtrl_alpha"
    />

<!-- title -->
<TextView
    android:id="@+id/item_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/item_icon"
    android:layout_alignBaseline="@+id/item_counter"
    android:textSize="18dp" />

<!-- counter -->
<TextView
    android:id="@+id/item_counter"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_alignParentRight="true"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/rectangle"
    android:gravity="center"
    android:textColor="#FFFFFF"
    android:textSize="12sp"
    android:textStyle="bold" />

background_with_shadow.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="#C8C8C8" />
            <corners android:radius="2dp"/>
            <!-- Not needed anymore after using padding and divider in ListView-->
            <!-- <stroke android:width="20dp"/> -->
        </shape>
    </item>

    <item android:right="0.5dp" android:left="0.5dp" android:top="0.5dp" android:bottom="1.5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="2dp"/>
            <!-- Not needed anymore after using padding and divider in ListView-->
            <!-- <stroke android:width="20dp"/> -->
            <padding android:left="7dp" android:right="7dp"
                     android:top="7dp" android:bottom="7dp" />
        </shape>
    </item>
</layer-list>

activity_main.xml

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:layout_gravity="center_horizontal|top"
        android:dividerHeight="10dp"
        android:divider="@android:color/transparent"
        android:padding="10dp"
        android:scrollbarStyle="outsideOverlay"/>

编辑 2：

我在编辑 1 中的问题的答案是通过添加（到我的 ListView）android:divider="10dp" 来控制项目之间的垂直空间，并使用 android:padding="10dp" 在上具有相同的空间来解决所有项目的左/右以及第一个和最后一个项目的顶部/底部。并使用 android:scrollbarStyle="outsideOverlay" 来避免垂直滚动条覆盖列表项。我从 background_with_shadow.xml 中删除了 stroke android:width="20dp"

我将测试@Shubhang Malviya 方法，稍后在此处添加结果。

【问题讨论】：

标签： android listview android-listview youtube

【解决方案1】：

你看过CardView吗，这里是official tutorial，它会创建类似的UI

【讨论】：

【解决方案2】：

通过向布局添加样式，您可以将它们四舍五入

在drawable中定义：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

并将上述样式添加到布局的背景

android:background="@drawable/your_above_syle"

另一种方法是在布局的背景中添加 9 个补丁图像，例如使用此图像可以使布局变圆并为布局添加阴影

【讨论】：