Suggerimenti di progettazione materiale per elenchi con avatar, testo e icona

Question

Voglio creare un'applicazione Android Material Designed e cerco di seguire tutti i suggerimenti di Google per creare dei layout speciali appositamente per il nuovo RecylcerView. Lo RecyclerView ha l'avatar ImageView, il titolo e il sottotitolo TextView e l'icona di azione ImageView.

Quali valori devo inserire nelle proprietà ImageViews per width e height in modo che supporti diverse dimensioni e densità dello schermo e quale dimensione di tali disegni eseguibili dovrei scegliere dal pacchetto di icone di sistema?

material-design-icons-1.0.1

Suggerimento per le liste:

??? nel codice XML sono le cose sconosciute non so cosa mettere 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> 

ANTEPRIMA:

Answer 1

# 1 Due voci:

layout minHeight è 72dp, layout_height è wrap_content. La dimensione dell'icona è 40 dpi (di solito è una bitmap circolare). Icon ha margine superiore di 16dp e margine sinistro di 16dp, nessun altro.

Entrambe TextView s sono in un centro verticale e verticalmente LinearLayout. Questo layout ha margine sinistro 16dp e margine destro 16dp. Ciò ti consentirà di rimuovere l'immagine e mantenere intatti i margini laterali. La prima riga ha in genere textApperance="@style/TextAppearance.AppCompat.Body2" e la seconda riga ha Body1. Il layout del testo ha 16dp in alto e 16dp in basso padding (deve essere riempito qui perché il margine inferiore non è rispettato per i bambini di RelativeLayout - ed è utile altre volte). Ora puoi inserire più righe nel secondo TextView e l'intero articolo si espanderà bene.

Non dimenticare di impostare layout_toRightOf="@+id/icon" e layout_alignWithParentIfMissing="true" nel layout di testo. Se hai un'altra icona (o widget) sulla destra aggiungi layout_toLeftOf="@+id/right_icon". In caso contrario, utilizzare layout_alignParentRight="true". Questo allungherà il layout per occupare tutto lo spazio disponibile. Oppure puoi usare LinearLayout.

Inserirlo in un elenco nell'area dei contenuti. L'elenco non deve avere alcun riempimento in alto o in basso, sarà bello.

# 2 articoli sola riga nel contenuto

Stessi numero 1 con i seguenti differenze: minHeight o layout_height è impostato a 56dp. Non utilizzare margini o imbottiture verticali, ma centrare il tutto verticalmente. Usa solo un testo di riga.

Utilizzare questo in un elenco con padding 8dp o intestazione 48dp nella parte superiore e padding 8dp nella parte inferiore.Altrimenti sembrerà "tagliato".

# 3 singole voci di menu

Stessi numero 2 con i seguenti differenze: L'altezza è 48DP. L'icona è 24dp. L'icona dovrebbe avere i seguenti attributi:

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

Questo vi permetterà di mettere qualsiasi icona da 1DP a 40dp senza sconvolgere l'equilibrio (non c'è bisogno di cambiare la spaziatura tra icona e testo perché rimane come 40dp in casi precedenti).

Lo uso in un cassetto di navigazione e nei menu.

EDIT: Nota

Le specifiche dicono che i margini sinistro e destro dell'elemento dovrebbe essere 24dp anziché 16dp per compresse (sw600dp). Puoi risolvere questo problema aggiungendo il layout degli elementi sinistro e destro che riempie 8dp su tablet (usa valori dinamici).

Le specifiche dicono anche che il divisore tra gli elementi (se presente) dovrebbe essere parte dell'articolo. È necessario definire il "margine di margine sinistro totale" di 72 dpi per i telefoni e 80 dpi per i tablet e utilizzarlo come margine sinistro per la vista del divisore. Il secondo problema è che sui tablet si ha un riempimento destro di 8dp. Dico questo: Se si utilizza ListView, avvitare le specifiche e impostare un divisore personalizzato, che verrà dipinto tra gli elementi. Se usi RecyclerView, scrivi un bel ItemDecorator che aggiungerà il divisore sull'oggetto.

EDIT 2

?listPreferredPaddingLeft e ?listPreferredPaddingRight si espanderà per 16dp sui telefoni e 24dp su tavolette (in onore di impostazioni RTL). È possibile utilizzare questi valori per il riempimento sinistro e destro negli elementi dell'elenco. Quindi 40 dpi riservati per l'icona, la spaziatura 16dp e infine il contenuto.