Android Material ListView 分隔符

Question

我正在尝试构建一个遵循 google 指南的列表视图。

这是我的要求：

1. 允许组标题
2. 允许组之间使用全宽分隔符
3. 允许项目之间的部分分隔符

这是显示标题和项目之间分隔符的图像。 不幸的是，无法查看组之间的全宽分隔线，但这就像普通的分隔线一样。

我可以构建一个自定义适配器来接收Item 的子类，例如HeaderItem 和ContactItem。

header.xml 就是

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:minHeight="48dp"
    android:padding="16dp"
    android:text="Today"
    android:textColor="#8A000000"
    android:textSize="14sp" />

至于contact.xml：

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

        <ImageView
            android:id="@+id/friend_profile_picture"
            android:layout_width="40dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_margin="16dp"
            android:scaleType="fitStart"
            android:src="@drawable/ic_home" />

            <TextView
                android:id="@+id/friend_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignWithParentIfMissing="true"
                android:layout_toRightOf="@+id/friend_profile_picture"
                android:paddingTop="16dp"
                android:text="random_text"
                android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

            <TextView
                android:id="@+id/friend_state"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/friend_name"
                android:layout_toRightOf="@+id/friend_profile_picture"
                android:paddingBottom="16dp"
                android:text="random_text"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textSize="14sp" />

</RelativeLayout>

现在，我的问题是项目分隔符。全宽分隔器将是一个普通的列表视图分隔器。我只是不确定如何进行部分分频器并使其与普通分频器一起工作。有什么提示吗？

如果更容易/更好，也可以使用 RecyclerView 和 ItemDecorators 来完成。

Answer 1

对于分隔线，您可以查看官方的 Android Settings 应用以了解其工作原理。这是“仪表板图块”的source code：

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2014 The Android Open Source Project
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
          http://www.apache.org/licenses/LICENSE-2.0
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:minHeight="@dimen/dashboard_tile_minimum_height">
    <ImageView
            android:id="@+id/icon"
            android:layout_width="@dimen/dashboard_tile_image_size"
            android:layout_height="@dimen/dashboard_tile_image_size"
            android:scaleType="centerInside"
            android:layout_marginStart="@dimen/dashboard_tile_image_margin_start"
            android:layout_marginEnd="@dimen/dashboard_tile_image_margin_end" />
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:orientation="vertical"
            android:gravity="center_vertical"
            android:layout_weight="1">
            <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                <TextView android:id="@+id/title"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:singleLine="true"
                          android:textAppearance="@style/TextAppearance.TileTitle"
                          android:ellipsize="marquee"
                          android:fadingEdge="horizontal" />
                <TextView android:id="@+id/status"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:layout_below="@id/title"
                          android:layout_alignStart="@android:id/title"
                          android:textAppearance="@style/TextAppearance.Small"
                          android:textColor="?android:attr/textColorSecondary" />
            </RelativeLayout>
        </LinearLayout>
        <View android:id="@+id/tile_divider"
              android:layout_width="match_parent"
              android:layout_height="1dp"
              android:background="?android:attr/dividerVertical" />
    </LinearLayout>
</LinearLayout>

基本上可以归结为以下几点：

• LinearLayouthorizontal 方向包含图片和文字
• LinearLayoutvertical 方向用于固定标签和分隔线

Answer 2

在您的 RelativeLayout 中添加一个视图 我在将视图添加到您的布局文件后发布代码

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

    <ImageView
        android:id="@+id/friend_profile_picture"
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_margin="16dp"
        android:scaleType="fitStart"
        android:src="@drawable/ic_home" />

        <TextView
            android:id="@+id/friend_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignWithParentIfMissing="true"
            android:layout_toRightOf="@+id/friend_profile_picture"
            android:paddingTop="16dp"
            android:text="random_text"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

        <TextView
            android:id="@+id/friend_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/friend_name"
            android:layout_toRightOf="@+id/friend_profile_picture"
            android:paddingBottom="16dp"
            android:text="random_text"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textSize="14sp" />
     <View
    android:id="@+id/divider_line"
    android:layout_width="match_parent"
    android:layout_below="@+id/friend_state"
    android:layout_marginBottom="1dp"
    android:layout_height="1dp"
    android:background="@color/divider_line_color"
    xmlns:android="http://schemas.android.com/apk/res/android" />
    </RelativeLayout>

将 divider_line_color 定义到 colors.xml 到 values 文件夹中。

即使您的列表视图设置为 android:divider="@null"