Question

我想创建Material Designed Android应用程序，并尝试遵循谷歌关于为新RecylcerView专门制作精美版面的所有建议。 RecyclerView包含头像ImageView，标题和副标题TextView以及操作图标ImageView。

我应该在ImageView的width和height的适当位置放置什么值，以便它支持不同的屏幕尺寸和密度，以及我应该从系统图标包中选择这些可绘制的大小？

material-design-icons-1.0.1

列表建议：

avatar with text and icon

xml代码中的 {strong> ??? 是未知的事情，我不知道该放在那里：

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：

Design Preview of XML

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）。

我在导航抽屉和菜单中使用它。

Keylines

编辑：注意

规格说，对于平板电脑（sw600dp），左右项目边距应为24dp而不是16dp。您可以通过在平板电脑上添加左右项目布局填充8dp来解决此问题（使用动态值）。

规范还说项目之间的分隔符（如果存在）应该是项目的一部分。您必须为手机定义72dp的“总左边距”，为平板电脑定义80dp，并将其用作分隔视图的左边距。第二个问题是在平板电脑上你有一个8dp的右边填充。我这样说：如果你使用ListView，请拧紧规格并设置一个自定义分隔符，它将在项目之间绘制。如果您使用RecyclerView，请写一个不错的ItemDecorator，它会在项目上添加分隔线。

编辑2

?listPreferredPaddingLeft和?listPreferredPaddingRight将在手机上扩展为16dp，在平板电脑上扩展为24dp（尊重RTL设置）。您可以在列表项中使用这些值进行左右填充。然后40dp保留图标，16dp间距，最后内容。

Answer 2

以下是material design中的准备粘贴图块，用于三行列表：

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

具有头像，文本和图标的列表的材料设计建议

2 个答案: