webentwicklung-frage-antwort-db.com.de

Materialdesignvorschläge für Listen mit Avatar, Text und Symbol

Ich möchte Material Designed Android-Anwendung erstellen und ich versuche, alle Vorschläge von Google zur Erstellung von Nice-Layouts speziell für die neue RecylcerView zu befolgen. Die RecyclerView hat einen Avatar ImageView, einen Titel und einen Untertitel TextView und ein Aktionssymbol ImageView.

Welche Werte sollte ich in ImageViews Eigenschaften für width und height angeben, damit unterschiedliche Bildschirmgrößen und -dichten unterstützt werden, und welche Größe dieser Zeichenelemente sollte ich aus dem System-Symbolpaket auswählen?

material-design-icons-1.0.1

Vorschlag für Listen:

avatar with text and icon

??? in XML-Code sind die unbekannten Dinge, die ich nicht weiß, was ich dort platzieren soll:

XML:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/card_view_friend"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardUseCompatPadding="true">

    <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="40dp"???
            Android:layout_alignParentLeft="true"
            Android:layout_margin="16dp"
            Android:layout_centerVertical="true"
            Android:src="@drawable/ic_person_grey600_48dp"/>???

        <TextView
            Android:id="@+id/friend_name"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_toLeftOf="@+id/friend_online_imageview"
            Android:layout_toRightOf="@+id/friend_profile_picture"
            Android:paddingTop="20dp"
            Android:text="@string/plain_text_for_preview"
            Android:textSize="16sp"/>

        <TextView
            Android:id="@+id/friend_state"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_below="@+id/friend_name"
            Android:layout_toLeftOf="@id/friend_online_imageview"
            Android:layout_toRightOf="@+id/friend_profile_picture"
            Android:paddingBottom="20dp"
            Android:text="@string/plain_text_for_preview"
            Android:textSize="14sp"/>

        <ImageView
            Android:id="@+id/friend_online_imageview"
            Android:layout_width="wrap_content"???
            Android:layout_height="wrap_content"???
            Android:layout_alignParentRight="true"
            Android:layout_margin="16dp"
            Android:layout_centerVertical="true"
            Android:src="@drawable/ic_messenger_grey600_18dp"/>???

    </RelativeLayout>

</Android.support.v7.widget.CardView>

VORSCHAU:

Design Preview of XML

33
fpopic

# 1 Zwei Werbebuchungen:

Layout minHeight ist 72dp, layout_height ist wrap_content. Die Größe des Symbols beträgt 40 dB (normalerweise ist es eine Kreis-Bitmap). Das Symbol hat einen oberen Rand von 16dp und einen linken Rand von 16dp, kein anderer.

Beide TextViews sind vertikal ausgerichtet und vertikal zentriert LinearLayout. Dieses Layout hat einen linken Rand von 16dp und einen rechten Rand von 16dp. Auf diese Weise können Sie das Bild entfernen und die Seitenränder noch beibehalten. Die erste Zeile hat normalerweise textApperance="@style/TextAppearance.AppCompat.Body2" und die zweite Zeile Body1. Das Textlayout hat 16dp top und 16dp bottom padding (es muss hier aufgefüllt werden, da der untere Rand für Kinder von RelativeLayout nicht beachtet wird - und es ist zu anderen Zeiten nützlich). Jetzt können Sie mehrere Zeilen in die zweite TextView einfügen und das gesamte Element wird gut erweitert.

Vergessen Sie nicht, layout_toRightOf="@+id/icon" und layout_alignWithParentIfMissing="true" im Textlayout festzulegen. Wenn Sie ein anderes Symbol (oder ein anderes Widget) auf der rechten Seite haben, fügen Sie layout_toLeftOf="@+id/right_icon" hinzu. Wenn nicht, layout_alignParentRight="true" verwenden. Dadurch wird das Layout so ausgedehnt, dass es den gesamten verfügbaren Platz einnimmt. Oder Sie können LinearLayout verwenden.

Fügen Sie dies in eine Liste in Ihrem Inhaltsbereich ein. Die Liste muss oben oder unten keine Auffüllung haben, sie wird gut aussehen.

# 2 Einzelne Zeilenelemente im Inhalt

Wie Nummer 1 mit folgenden Unterschieden: minHeight oder layout_height ist auf 56dp gesetzt. Verwenden Sie keine vertikalen Ränder oder Polsterungen, sondern zentrieren Sie alles vertikal. Verwenden Sie nur einen Zeilentext.

Verwenden Sie dies in einer Liste mit 8dp-Auffüllung oder 48dp-Kopfzeile oben und 8dp-Auffüllung unten. Sonst sieht es "abgeschnitten" aus.

# 3 Einzelne Zeilenelemente in Menüs

Wie Nummer 2 mit folgenden Unterschieden: Die Höhe beträgt 48dp. Das Symbol ist 24dp. Das Symbol sollte die folgenden Attribute aufweisen:

Android:layout_width="40dp"
Android:layout_height="wrap_content"
Android:scaleType="fitStart"

Auf diese Weise können Sie ein beliebiges Symbol von 1 bis 40 dB setzen, ohne das Gleichgewicht zu beeinträchtigen (Sie müssen den Abstand zwischen Symbol und Text nicht ändern, da er wie in den vorherigen Fällen 40 dB bleibt).

Ich verwende dies in einer Navigationsleiste und in Menüs.

Keylines

Notiz bearbeiten

Die Angaben besagen, dass der linke und rechte Rand des Artikels 24dp anstatt 16dp für Tabletten (sw600dp) betragen sollte. Sie können dieses Problem lösen, indem Sie auf Tablets ein linkes und rechtes Elementlayout mit 8dp hinzufügen (dynamische Werte verwenden).

Die Spezifikationen sagen auch, dass die Trennlinie zwischen den Elementen (falls vorhanden) Teil des Elements sein sollte. Sie müssen den "gesamten linken Randabstand" von 72dp für Telefone und 80dp für Tablets definieren und als linken Rand für die Teileransicht verwenden. Das zweite Problem ist, dass Sie auf Tablets eine 8-polige rechte Polsterung haben. Ich sage das: Wenn Sie ListView verwenden, schrauben Sie die Angaben und stellen Sie einen benutzerdefinierten Teiler ein, der zwischen den Elementen angezeigt wird. Wenn Sie RecyclerView verwenden, schreiben Sie eine Nice ItemDecorator, die den Teiler über dem Element hinzufügt.

EDIT 2

?listPreferredPaddingLeft und ?listPreferredPaddingRight erweitern sich auf Telefone auf 16dp und auf Tablets auf 24dp (unter Berücksichtigung der RTL-Einstellungen). Sie können diese Werte für den linken und rechten Abstand in Listenelementen verwenden. Dann 40dp für das Symbol reserviert, 16dp Abstand und schließlich Inhalt.

61
Eugen Pechanec

Hier ist eine Paste zum Einfügen in Materialdesign für eine dreizeilige Liste:

 enter image description here

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
  xmlns:Android = "http://schemas.Android.com/apk/res/Android"
  xmlns:tools = "http://schemas.Android.com/tools"
  Android:layout_width = "match_parent"
  Android:layout_height = "88dp"
  Android:layout_marginTop = "8dp"
  Android:orientation = "vertical">

<ImageView
  Android:id = "@+id/avatar"
  Android:layout_width = "40dp"
  Android:layout_height = "40dp"
  Android:layout_marginBottom = "20dp"
  Android:layout_marginLeft = "16dp"
  Android:layout_marginRight = "16dp"
  Android:layout_marginTop = "20dp"
  Android:background = "@drawable/avatar"
  Android:contentDescription = "Avatar"/>

<TextView
  Android:id = "@+id/avatar_text"
  Android:layout_width = "40dp"
  Android:layout_height = "40dp"
  Android:layout_marginBottom = "20dp"
  Android:layout_marginLeft = "16dp"
  Android:layout_marginRight = "16dp"
  Android:layout_marginTop = "20dp"
  Android:gravity = "center_vertical|center_horizontal"
  Android:maxLines = "1"
  Android:text = "AV"
  Android:textColor = "@color/white_dark"
  Android:textSize = "16sp"
  Android:fontFamily="sans-serif"  
  Android:textStyle = "bold"/>

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "match_parent"
  Android:layout_marginBottom = "16dp"
  Android:layout_marginEnd = "56dp"
  Android:layout_marginStart = "72dp"
  Android:layout_marginTop = "16dp"
  Android:orientation = "vertical">

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "wrap_content"
  Android:orientation = "horizontal">

  <TextView
    Android:id = "@+id/first_line"
    Android:layout_width = "wrap_content"
    Android:layout_height = "wrap_content"
    Android:layout_marginEnd = "16dp"
    Android:ellipsize="Marquee"
    Android:singleLine="true"
    Android:text = "This is the title line"
    Android:textColor = "@color/black_light"
    Android:textSize = "16sp"
    Android:fontFamily="sans-serif"/>

</LinearLayout>

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "wrap_content"
  Android:orientation = "horizontal">

  <TextView
    Android:id = "@+id/second_line"
    Android:layout_width = "wrap_content"
    Android:layout_height = "wrap_content"
    Android:ellipsize="Marquee"
    Android:singleLine="true"
    Android:textColor = "@color/discreet_dark"
    Android:textSize = "14sp"
    Android:fontFamily="sans-serif"
    tools:text = "This is the second line"/>
</LinearLayout>

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "wrap_content"
  Android:orientation = "horizontal">

  <TextView
    Android:id = "@+id/third_line"
    Android:layout_width = "wrap_content"
    Android:layout_height = "wrap_content"
    Android:ellipsize="Marquee"
    Android:singleLine="true"
    Android:textColor = "@color/discreet_dark"
    Android:textSize = "14sp"
    Android:fontFamily="sans-serif"
    tools:text = "This is the third line"/>
</LinearLayout>

</LinearLayout>

<TextView
  Android:id = "@+id/minor_info"
  Android:layout_width = "wrap_content"
  Android:layout_height = "wrap_content"
  Android:layout_alignParentEnd = "true"
  Android:layout_marginEnd = "16dp"
  Android:layout_marginTop = "20dp"
  Android:maxLines = "1"
  Android:maxWidth = "40dp"
  Android:text = "19 min"
  Android:textColor = "@color/discreet_dark"
  Android:textSize = "12sp"
  Android:fontFamily="sans-serif"/>

<ImageView
  Android:id = "@+id/favourite"
  Android:layout_width = "24dp"
  Android:layout_height = "24dp"
  Android:layout_alignParentBottom = "true"
  Android:layout_alignParentEnd = "true"
  Android:layout_marginBottom = "16dp"
  Android:layout_marginLeft = "16dp"
  Android:layout_marginRight = "16dp"
  Android:contentDescription = "Favourite"
  tools:src = "@drawable/favourite_checked"/>

<View
  Android:layout_width = "match_parent"
  Android:layout_height = "1dp"
  Android:layout_alignParentBottom="true"
  Android:layout_marginStart = "72dp"
  Android:background = "@color/discreet_light"/>

</RelativeLayout>
1
Zon