Sugerowane projekty materiałów dla list z awatarem, tekstem i ikoną

Question

Chcę utworzyć aplikację na Androida Material Designed i staram się postępować zgodnie ze wszystkimi sugestiami Google dotyczącymi tworzenia ładnych układów specjalnie dla nowego RecylcerView. RecyclerView ma awatar ImageView, tytuł i podtytuł TextView oraz ikonę akcji ImageView.

Jakie wartości należy umieścić w ImageViews odpowiednich dla width i height, więc obsługuje różne rozmiary i gęstości ekranu, a jaki rozmiar tych zestawów do wyboru mam wybrać z zestawu ikon systemu?

material-design-icons-1.0.1

Propozycja dla list:

??? w kodzie XML są nieznane rzeczy, ja nie wiem, co tam umieścić:

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> 

Preview:

Answer 1

# 1 Dwie pozycje:

Układ minHeight jest 72dp, layout_height jest wrap_content. Rozmiar ikony to 40dp (zwykle jest to mapa bitowa w kształcie koła). Ikona ma górny margines 16dp i lewy margines 16dp, żaden inny.

Zarówno TextView s są zorientowane pionowo i pionowo wyśrodkowane LinearLayout. Ten układ ma lewy margines 16dp i prawy margines 16dp. Umożliwi to usunięcie obrazu i zachowanie nienaruszonych marginesów bocznych. Pierwsza linia ma zwykle numer textApperance="@style/TextAppearance.AppCompat.Body2", a druga linia to Body1. Układ tekstu ma 16dp górę i 16dp dolną padding (to musi być dopełnienie tutaj, ponieważ dolny margines nie jest respektowany dla dzieci z RelativeLayout - i jest to przydatne w innych czasach). Teraz możesz umieścić wiele linii w drugim TextView, a cały element będzie ładnie się rozszerzał.

Nie zapomnij ustawić layout_toRightOf="@+id/icon" i layout_alignWithParentIfMissing="true" w układzie tekstu. Jeśli masz inną ikonę (lub widget) po prawej, dodaj layout_toLeftOf="@+id/right_icon". Jeśli nie, użyj layout_alignParentRight="true". Spowoduje to rozciągnięcie układu w celu zajęcia całej dostępnej przestrzeni. Lub możesz użyć LinearLayout.

Umieść to na liście w obszarze zasobów. Lista nie musi mieć wypełnienia u góry ani u dołu, będzie dobrze wyglądać.

# 2 pojedynczych pozycji w treści

same jak numer 1, z następującymi różnicami: minHeight lub layout_height jest ustawione na 56dp. Nie używaj żadnych pionowych marginesów ani obicia, tylko wyśrodkuj wszystko w pionie. Użyj tylko jednego wiersza tekstu.

Użyj tego na liście z paddingiem 8dp lub nagłówkiem 48dp na górze i paddurem 8dp na dole.W przeciwnym razie będzie wyglądać "odcięta".

# 3 pozycje w menu panna

same jak numer 2, z następującymi różnicami: Wysokość jest 48DP. Ikona ma 24dp. Ikona powinna mieć następujące atrybuty:

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

To pozwoli Ci umieścić dowolną ikonę z 1DP do 40dp bez naruszania równowagi (nie trzeba zmieniać odstępy między ikoną a tekstem ponieważ pozostaje 40dp jako w poprzednich przypadkach).

Używam tego w szufladzie nawigacji i menu.

EDIT: Uwaga

Specyfikacje powiedzieć, że lewy i prawy margines element powinien być 24dp zamiast 16dp na tabletach (sw600dp). Możesz rozwiązać ten problem, dodając lewy i prawy układ elementów, wypełniając 8dp na tabletach (użyj wartości dynamicznych).

Specyfikacja mówi również, że dzielnik między przedmiotami (jeśli są obecne) powinien stanowić część przedmiotu. Musisz zdefiniować "całkowity lewy margines" 72dp dla telefonów i 80dp dla tabletów i użyć go jako lewego marginesu dla widoku dzielnika. Drugi problem polega na tym, że na tabletach masz prawą wyściółkę 8dp. Mówię to: jeśli używasz ListView, przykręć specyfikacje i ustaw niestandardową przegrodę, która będzie pomalowana między przedmiotami. Jeśli używasz RecyclerView, napisz ładne ItemDecorator, które doda dzielnik nad przedmiot.

EDIT 2

?listPreferredPaddingLeft i ?listPreferredPaddingRight wzrośnie do 16dp na telefonach i na tabletach 24dp (uhonorowanie ustawienia RTL). Możesz użyć tych wartości dla lewego i prawego dopełnienia w elementach listy. Następnie 40dp zarezerwowane dla ikony, odstępy 16dp i wreszcie zawartość.