Android Material ListView分隔符

时间:2016-05-05 10:04:57

标签: android listview material-design

我正在尝试按照Google的指南构建一个列表视图。

以下是我的要求:

  1. 允许群组标题
  2. 允许组间全宽分隔符
  3. 允许项目之间的部分分隔
  4. 这是显示项目之间的标题和分隔符的图像。 不幸的是,无法查看组之间的全宽分隔符,但这就像普通的分隔符一样。

    Material listview

    我可以构建一个自定义适配器,它接收Item的子类,如HeaderItemContactItem

    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>
    

    现在,我的问题是项目分隔符。全宽分隔符将是普通的listview分隔符。我只是不确定如何做一个部分dividir并让它与普通分频器一起工作。任何提示?

    如果RecyclerViewItemDecorator更容易/更好,也可以这样做。

2 个答案:

答案 0 :(得分:1)

对于分频器,您可以查看官方Android 设置应用,了解其工作原理。这是&#34;仪表板磁贴的source code&#34;:

<?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>

基本上,归结为以下几点:

  • LinearLayout方向horizontal以包含图片和文字
  • LinearLayout方向vertical来保存标签和分隔符

答案 1 :(得分:0)

将视图添加到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>

将divideider_line_color定义为colors.xml到values文件夹。

即使你的listview设置了android:divider =“@ null”