web-dev-qa-db-fra.com

Suggestions de matériaux pour des listes avec avatar, texte et icône

Je souhaite créer l'application Material Designed pour Android et j'essaie de suivre toutes les suggestions de Google concernant la création de mises en page Nice spécialement pour la nouvelle RecylcerView. La RecyclerView a un avatar ImageView, un titre et un sous-titre TextView et une icône d'action ImageView.

Quelles valeurs dois-je attribuer aux propriétés d'ImageView pour width et height afin qu'il prenne en charge différentes tailles et densités d'écran et quelle taille de ces tirables dois-je choisir dans le pack d'icônes système?

material-design-icons-1.0.1

Suggestion pour les listes:

avatar with text and icon

??? dans le code XML sont les choses inconnues que je ne sais pas quoi mettre là:

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>

APERÇU:

Design Preview of XML

androidandroid-recyclerviewmaterial-designandroid-drawable
33
fpopic

# 1 Deux lignes:

Layout minHeight est 72dp, layout_height est wrap_content. La taille des icônes est de 40dp (généralement une image bitmap de cercle). L'icône a une marge supérieure de 16dp et une marge gauche de 16dp, pas d'autre.

Les deux TextViews sont dans une LinearLayout orientée verticalement et centrée verticalement. Cette disposition a une marge gauche de 16dp et une marge droite de 16dp. Cela vous permettra de supprimer l'image tout en conservant les marges latérales intactes. La première ligne a généralement textApperance="@style/TextAppearance.AppCompat.Body2" et la deuxième ligne a Body1. La disposition du texte a 16dp top et 16dp bottom padding (elle doit être ici, car la marge inférieure n'est pas respectée pour les enfants de RelativeLayout - et est utile à d'autres moments). Maintenant, vous pouvez mettre plusieurs lignes dans la seconde TextView et l’élément tout entier se développera bien.

N'oubliez pas de définir layout_toRightOf="@+id/icon" et layout_alignWithParentIfMissing="true" sur la disposition du texte. Si vous avez une autre icône (ou un widget) à droite, ajoutez layout_toLeftOf="@+id/right_icon". Si non, utilisez layout_alignParentRight="true". Cela étendra la mise en page pour occuper tout l'espace disponible. Ou vous pouvez utiliser LinearLayout.

Mettez ceci dans une liste dans votre zone de contenu. Il n’est pas nécessaire que la liste ait un rembourrage en haut ou en bas, elle aura fière allure.

# 2 Éléments de ligne uniques dans le contenu

Identique au numéro 1 avec les différences suivantes: minHeight ou layout_height est défini sur 56dp. N'utilisez pas de marges verticales ni de rembourrages, mais centrez tout verticalement. Utilisez un texte d'une seule ligne.

Utilisez ceci dans une liste avec un remplissage en 8dp ou un en-tête de 48dp en haut et un remplissage en 8dp en bas. Sinon, cela aura l'air "coupé".

# 3 Éléments individuels dans les menus

Identique au numéro 2 avec les différences suivantes: La hauteur est de 48dp. L'icône est 24dp. L'icône doit avoir les attributs suivants:

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

Cela vous permettra de placer n'importe quelle icône de 1dp à 40dp sans perturber l'équilibre (vous n'avez pas besoin de modifier l'espacement entre l'icône et le texte car il reste 40dp comme dans les cas précédents).

Je l'utilise dans un tiroir de navigation et des menus.

Keylines

Note éditée

Selon les spécifications, les marges gauche et droite des éléments doivent être de 24dp au lieu de 16dp pour les tablettes (sw600dp). Vous pouvez résoudre ce problème en ajoutant 8dp sur les tablettes (en utilisant des valeurs dynamiques).

Les spécifications indiquent également que le séparateur entre les éléments (le cas échéant) devrait en faire partie. Vous devez définir la "dimension de la marge gauche totale" de 72dp pour les téléphones et de 80dp pour les tablettes et l'utiliser comme marge de gauche pour la vue de division. Le deuxième problème est que sur les tablettes, vous avez un rembourrage à droite de 8dp. Je dis ceci: Si vous utilisez ListView, vissez les spécifications et définissez un séparateur personnalisé, qui sera peint entre les éléments. Si vous utilisez RecyclerView, écrivez une jolie ItemDecorator qui ajoutera le séparateur sur l'élément.

EDIT 2

?listPreferredPaddingLeft et ?listPreferredPaddingRight passeront à 16dp sur les téléphones et à 24dp sur les tablettes (en respectant les paramètres RTL). Vous pouvez utiliser ces valeurs pour le remplissage gauche et droit des éléments de liste. Puis 40dp réservés pour l'icône, l'espacement de 16dp et enfin le contenu.

61
Eugen Pechanec

Voici un carreau prêt à coller dans conception des matériaux pour une liste de trois lignes:

 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