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

Question

我想创建Material DesignedAndroid应用程序,我尝试遵循谷歌关于为新版本制作精美版面的所有建议RecylcerView.在RecyclerView有头像ImageView,标题和副标题TextView和操作图标ImageView.

我应该在ImageView的适当位置放置什么值width,height因此它支持不同的屏幕尺寸和密度,我应该从系统图标包中选择那些可绘制的尺寸？

材料设计的图标-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,写一个nice ItemDecorator将在项目上添加分隔符.

编辑2

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