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

Question

我正在使用Android Studio创建一个包含listview的应用程序，在我选择使用导航抽屉的项目之后，我将listview控件添加到了我的活动中。

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

这是一个带有自定义行的listview控件，还是带有复合控件（作为项/行）和垂直滚动条的活动？

[来自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

中删除了中风android：width =“20dp”

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

Answer 1

您是否看过CardView，这里是official tutorial，它会创建像

这样的用户界面

Answer 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个补丁图像添加到布局的背景中，例如使用此图像可以为布局添加圆角并添加阴影