带有头像、文本和图标的列表的材料设计建议 [英] Material design suggestions for lists with avatar, text and icon

问题描述

我想创建 Material Design Android 应用程序，并且我尝试遵循 Google 关于为新的 RecylcerView 专门制作漂亮布局的所有建议.RecyclerView 有头像 ImageView、标题和副标题 TextView 和动作图标 ImageView.

I want to create Material Designed Android application and I try to follow all Google's suggestions about making nice layouts specially for the new RecylcerView. The RecyclerView has avatar ImageView, title and subtitle TextView and action icon ImageView.

我应该在 ImageView 的 width 和 height 属性中放入什么值，以便它支持不同的屏幕尺寸和密度，以及我应该从系统中选择哪些尺寸的可绘制对象图标包?

What values should I put in ImageView's properites for width and height so it supports different screen sizes and densities, and what size of those drawables should I choose from the system icons pack?

material-design-icons-1.0.1

列表建议:

??? 在xml代码中是未知的东西，我不知道该放什么:

??? in xml code are the unknown things I don't know what to put there:

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>

预览:

推荐答案

#1 两行:

Layout minHeight 为 72dp，layout_height 为 wrap_content.图标大小为 40dp(通常是圆形位图).图标有 16dp 的上边距和 16dp 的左边距，没有其他.

Layout minHeight is 72dp, layout_height is wrap_content. Icon size is 40dp (usually it's a circle bitmap). Icon has 16dp top margin and 16dp left margin, no other.

两个 TextView 都在垂直方向和垂直居中的 LinearLayout 中.此布局有 16dp 的左边距和 16dp 的右边距.这将允许您删除图像并保留完整的边距.第一行通常是 textApperance="@style/TextAppearance.AppCompat.Body2"，第二行是 Body1.文本布局有 16dp 的顶部和 16dp 的底部 padding(它必须在此处填充，因为 RelativeLayout 的子级不考虑底部边距 - 其他时候很有用).现在您可以在第二个 TextView 中放置多行，整个项目将很好地展开.

Both TextViews are in a vertically oriented and vertically centered LinearLayout. This layout has 16dp left margin and 16dp right margin. This will allow you to remove image and still have side margins intact. First line has typically textApperance="@style/TextAppearance.AppCompat.Body2" and second line has Body1. The text layout has 16dp top and 16dp bottom padding (it has to be padding here because the bottom margin is not respected for children of RelativeLayout - and it is useful other times). Now you can put multiple lines in the second TextView and the whole item will expand nicely.

不要忘记在文本布局上设置 layout_toRightOf="@+id/icon" 和 layout_alignWithParentIfMissing="true".如果右侧有另一个图标(或小部件)，请添加 layout_toLeftOf="@+id/right_icon".如果不使用 layout_alignParentRight="true".这将拉伸布局以占据所有可用空间.或者你可以使用 LinearLayout.

Don't forget to set layout_toRightOf="@+id/icon" and layout_alignWithParentIfMissing="true" on the text layout. If you have another icon (or widget) to the right add layout_toLeftOf="@+id/right_icon". If not use layout_alignParentRight="true". This will stretch the layout to occupy all available space. Or you can use LinearLayout.

将其放入您的内容区域的列表中.列表的顶部或底部不必有任何填充，它看起来不错.

Put this in a list in your content area. The list does not have to have any padding at top or bottom, it will look good.

#2 内容中的单行项目

与数字 1 相同，但有以下不同:minHeight 或 layout_height 设置为 56dp.不要使用任何垂直边距或填充，只需将所有内容垂直居中即可.仅使用一行文本.

Same as number 1 with following differences: minHeight or layout_height is set to 56dp. Don't use any vertical margins or padding, just center everything vertically. Use only one line text.

在顶部有 8dp 内边距或 48dp 标题、底部有 8dp 内边距的列表中使用它.否则它看起来会被切断".

Use this in a list with 8dp padding or 48dp header at the top and 8dp padding at the bottom. Otherwise it will look "cut off".

#3 菜单中的单行项目

与数字 2 相同，但有以下不同:高度为 48dp.图标是 24dp.图标应具有以下属性:

Same as number 2 with following differences: The height is 48dp. The icon is 24dp. The icon should have the following attributes:

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

这将允许您放置 1dp 到 40dp 的任何图标而不会破坏平衡(您不必更改图标和文本之间的间距，因为它像以前一样保持 40dp).

This will allow you to put any icon from 1dp to 40dp without upsetting the balance (you don't have to change the spacing between icon and text because it stays 40dp as in previous cases).

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

I use this in a navigation drawer and menus.

注意

规范规定，平板电脑的左右边距应为 24dp，而不是 16dp (sw600dp).您可以通过在平板电脑上添加左右项目布局填充 8dp 来解决此问题(使用动态值).

The specs say that left and right item margins should be 24dp instead of 16dp for tablets (sw600dp). You can solve this by adding left and right item layout padding 8dp on tablets (use dynamic values).

规范还说项目之间的分隔线(如果存在)应该是项目的一部分.您必须定义手机的 72dp 和平板电脑的 80dp 的总左边距尺寸"，并将其用作分隔线视图的左边距.第二个问题是在平板电脑上你有一个 8dp 的右内边距.我是这样说的:如果您使用 ListView，请拧紧规格并设置自定义分隔线，它将在项目之间绘制.如果您使用 RecyclerView，请编写一个不错的 ItemDecorator，它将在项目上添加分隔线.

The specs also say that the divider between items (if present) should be part of the item. You have to define the "total left margin dimen" of 72dp for phones and 80dp for tablets and use it as left margin for the divider view. Second problem is that on tablets you have an 8dp right padding. I say this: If you use ListView, screw the specs and set a custom divider, which will be painted between items. If you use RecyclerView, write a nice ItemDecorator which will add the divider over the item.

编辑 2

?listPreferredPaddingLeft 和 ?listPreferredPaddingRight 将在手机上扩展到 16dp，在平板电脑上扩展到 24dp(尊重 RTL 设置).您可以将这些值用于列表项中的左右填充.然后40dp预留给图标，16dp间距，最后是内容.

?listPreferredPaddingLeft and ?listPreferredPaddingRight will expand to 16dp on phones and 24dp on tablets (honoring RTL settings). You can use these values for left and right padding in list items. Then 40dp reserved for the icon, 16dp spacing and finally content.

这篇关于带有头像、文本和图标的列表的材料设计建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！