帶有化身，文字和圖標的列表的材料設計建議

Question

我想創建Material Designed Android應用程序，並嘗試遵循Google關於為新RecylcerView制作漂亮布局的所有建議。 RecyclerView具有頭像ImageView ，標題和字幕TextView以及操作圖標ImageView 。

我應該在ImageView的屬性中為width和height輸入什么值，以便它支持不同的屏幕尺寸和密度，我應該從系統圖標包中選擇哪些尺寸的可繪制對象？

material-design-icons-1.0.1

清單建議：

??? 在xml代碼中是未知的東西，我不知道該放在哪里：

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>

預習：

Answer 1

＃1兩個訂單項：

布局minHeight是72dp， layout_height是wrap_content 。 圖標大小為40dp（通常是圓形位圖）。 Icon具有16dp的上邊距和16dp的左邊距，沒有其他。

兩個TextView都在垂直方向和垂直居中的LinearLayout 。 此布局的左邊距為16dp，右邊距為16dp。 這將使您可以刪除圖像，並且仍然保留邊距。 第一行通常具有textApperance="@style/TextAppearance.AppCompat.Body2" ，第二行具有Body1 。 文本布局具有16dp頂部填充和16dp底部填充 （此處必須進行填充，因為RelativeLayout子級不考慮底部邊距-其余時間很有用）。 現在，您可以在第二個TextView放入多行，整個項目將很好地擴展。

不要忘記在文本布局上設置layout_toRightOf="@+id/icon"和layout_alignWithParentIfMissing="true" 。 如果右側還有另一個圖標（或小部件），請添加layout_toLeftOf="@+id/right_icon" 。 如果不使用，則使用layout_alignParentRight="true" 。 這將拉伸布局以占據所有可用空間。 或者，您可以使用LinearLayout 。

將其放在您內容區域的列表中。 該列表不必在頂部或底部添加任何填充，它看起來會很好。

＃2內容中的單個訂單項

與數字1相同，但有以下區別： minHeight或layout_height設置為56dp。 不要使用任何垂直邊距或填充，而應將所有內容垂直居中。 僅使用一行文本。

在列表中使用此選項，頂部使用8dp填充或48dp標頭，底部使用8dp填充。 否則，它將看起來像“切斷”。

＃3菜單中的單行項目

與數字2相同，但有以下區別：高度為48dp。 圖標為24dp。 圖標應具有以下屬性：

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

這樣一來，您可以將任何圖標從1dp放置到40dp，而不會破壞平衡（您無需更改圖標和文本之間的間距，因為象以前的情況一樣，它保持40dp）。

我在導航抽屜和菜單中使用它。

編輯：注意

規格說，平板電腦（sw600dp）的左右項目邊距應為24dp，而不是16dp。 您可以通過在平板電腦上添加左右項目布局填充8dp（使用動態值）來解決此問題。

規范還說，項目之間的分隔線（如果存在）應該是項目的一部分。 您必須為手機定義72dp的“總左邊界維數”，為平板電腦定義80dp的“總左邊界維數”，並將其用作分隔線視圖的左邊界。 第二個問題是在平板電腦上您有8dp右填充。 我這樣說：如果使用ListView ，則擰緊規格並設置自定義分隔線，該分隔線將在項目之間繪制。 如果您使用RecyclerView ，請編寫一個漂亮的ItemDecorator ，它將在項目上添加分隔線。

編輯2

?listPreferredPaddingLeft和?listPreferredPaddingRight在手機上將擴展為16dp，在平板電腦上將擴展為24dp（保留RTL設置）。 您可以將這些值用於列表項中的左右填充。 然后為圖標保留40dp，16dp間距並最終保留內容。

Answer 2

這是用於三行列表的材料設計中的現成貼磚：

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