2016-05-05 5 views
4

Ich versuche, eine Listview zu erstellen, die Googles Richtlinien folgt.Android Material ListView Dividers

Hier sind meine Anforderungen:

  1. Gruppe
  2. voll zulassen Breite Teiler zwischen den Gruppen
  3. zulassen Teilteiler zwischen den einzelnen Posten

Hier wird ein Bild der Kopfzeile und die Allow-Header Teiler zwischen den Elementen. Leider ist es nicht möglich, den Teiler mit voller Breite zwischen den Gruppen zu sehen, aber das ist wie bei einem normalen Teiler.

Material listview

Ich kann einen benutzerdefinierten Adapter bauen, die Subklassen von Item empfängt, wie HeaderItem und ContactItem.

würde die header.xml einfach

<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" /> 

Was die contact.xml sein:

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

Nun ist mein Problem, den Punkt Teiler. Der Teiler mit voller Breite wäre ein normaler Listview-Teiler. Ich bin mir einfach nicht sicher, wie ich ein Teildividir machen und es neben dem normalen Teiler arbeiten lassen soll. Irgendwelche Hinweise?

Dies könnte auch mit RecyclerView und ItemDecorator s durchgeführt werden, wenn es einfacher/besser ist.

+0

Fügen Sie eine Ansicht hinzu/LinearLayout/RelativeLayou t unter "friend_state" Tetview, mit schwarzem Hintergrund und linkem Padding/Rand 72dp. – Sabari

+0

Okay, aber wenn du das tust, wird dort die Zeile angezeigt und dann der Listview-Teiler. Jetzt fehlt nur noch, wie man das Listview-Trennzeichen nur zwischen den Abschnitten sichtbar macht. – HelderMPinhal

+0

Ref diesen Link, das kann Ihnen helfen [Link] (http://codingdiscovery.blogspot.in/2015/02/android-listviews-with-headers.html) – Sabari

Antwort

0

einen Blick in Ihre RelativeLayout hinzufügen ich den Code bin Entsendung nach

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

Definieren Sie die divider_line_color in Colors.xml in Werte Ordneransicht in Ihr Layout-Datei hinzufügen.

Auch mit Ihrem Listview android gesetzt: Teiler = „@ null“

+0

Okay, aber dabei tun, wird die Zeile angezeigt und dann der Teiler der Listview. Ich habe Ihre Ansicht so geändert, dass sie mit dem Text übereinstimmt, wie ich es wollte, und jetzt fehlt nur noch, wie Sie das Listview-Trennzeichen nur zwischen den Abschnitten sichtbar machen. – HelderMPinhal

+0

können Sie Ihren aktualisierten Code und das Problem erneut posten? –

1

Für den Teiler, können Sie bei den offiziellen Android Einstellungen einen Blick app, um zu überprüfen, wie es funktioniert. Hier ist die source code einer "Armaturenbrett Fliese":

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

Grundsätzlich läuft es nach unten auf die folgenden:

  • ein LinearLayout in horizontal Orientierung um das Bild zu enthalten und den Text
  • eine LinearLayout in vertical Ausrichtung, um das Etikett und den Teiler zu halten