带有化身，文字和图标的列表的材料设计建议 [英] Material design suggestions for lists with avatar, text and icon

问题描述

我想创建Material Designed 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?

材料设计-icons-1.0.1

列表建议:

??? 是未知的东西，我不知道该放在哪里:

??? 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两个订单项:

布局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，底部为 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.

注意

规格说明，平板电脑(sw600dp)的左右页边距应为24dp，而不是16dp.您可以通过在平板电脑上添加左右项目布局填充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屋！