带有化身，文字和图标的列表的材料设计建议

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>