材料设计清单指南 Android 5.0答案

【问题标题】：Material design list guideline Android 5.0材料设计清单指南 Android 5.0
【发布时间】：2015-01-08 09:28:52
【问题描述】：

所以我正在尝试在lists 上关注谷歌的新Material Design guidelines。但我不能完全得到我应该得到的结果。它应该是这样的：

这是我的列表在代码方面的样子：

<ImageView 
    android:id="@+id/contact_item_image"
    android:background="@android:color/black"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginLeft="@dimen/left_margin"
    android:layout_centerVertical="true"/>

<View 
    android:id="@+id/middle_splitter"
    android:layout_width="match_parent"
    android:layout_height="1px"
    android:layout_centerVertical="true"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="72dp"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:paddingRight="@dimen/right_margin"
    android:orientation="vertical">

    <TextView
        android:id="@+id/contact_item_prim_text"
        android:text="Test title"
        android:textSize="@dimen/subhead_txt_size"
        android:textColor="@color/blackish"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <TextView
        android:id="@+id/contact_item_sec_text"
        android:text="Test sec title"
        android:textSize="@dimen/body1_txt_size"
        android:textColor="@color/android_greyish"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

也尝试过不使用 LinearLayout：

<ImageView 
    android:id="@+id/contact_item_image"
    android:background="@android:color/black"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginLeft="@dimen/left_margin"
    android:layout_centerVertical="true"/>

<View 
    android:id="@+id/middle_splitter"
    android:layout_width="match_parent"
    android:layout_height="1px"
    android:layout_centerVertical="true"/>

<TextView
    android:id="@+id/contact_item_prim_text"
    android:text="Test title"
    android:textSize="@dimen/subhead_txt_size"
    android:textColor="@color/blackish"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="72dp"
    android:paddingTop="20dp"
    android:paddingRight="@dimen/right_margin"
    android:layout_above="@id/middle_splitter"
    />

<TextView
    android:id="@+id/contact_item_sec_text"
    android:text="Test sec title"
    android:textSize="@dimen/body1_txt_size"
    android:textColor="@color/android_greyish"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="72dp"
    android:paddingBottom="20dp"
    android:paddingRight="@dimen/right_margin"
    android:layout_below="@id/middle_splitter"
    />

但实际结果更像是这样的：

我基本上只是按照材料设计网站上的说明直接输入了尺寸，但看起来不正确，是我误解了这些指南还是什么？设计本身可以通过让 LinearLayout 使用权重或使用 RelativeLayout 定位来轻松完成，尽管这些指南应该可以帮助我们......关于我们应该如何使用这些指南的任何想法或者是它们仅适用于设计师而不适用于开发人员？

编辑

所以我提出了一个可能的解决方案的答案。仍然认为谷歌部分的一些代码示例很棒。

【问题讨论】：

不要在 TextViews 中使用 paddingTop 和 paddingBottom。每种字体在字符上方和下方都有一些空间，TextView 使用它们。只需设置gravity="center_vertical" 和 layout_height="match_parent"
@Zielony Ye 我知道，我只是想尝试遵循他们的指导方针，看看是否能得到正确的结果。如果您访问该网站，您会看到他们指定为给定区域设置填充。
刚刚遇到这个确切的问题，如果我们不应该使用顶部和底部填充，为什么要包含它们？该文档对这两个值毫无意义
@DanielWilson 好吧，我得出的结论是，文档是为设计人员而非开发人员准备的。从这个意义上说，值是填充，但我们的开发人员要如何实现它取决于我们开发人员:) 对于设计师来说，文档很棒。

标签： android material-design

【解决方案1】：

在图像视图中使用这个 Pkmmte's CircularImageView lib。

【讨论】：

【解决方案2】：

所以我最终选择了这个解决方案：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:background="@android:color/white">

    <ImageView 
        android:id="@+id/contact_item_image"
        android:background="@android:color/black"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="@dimen/left_margin"
        android:layout_centerVertical="true"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="16dp"
        android:paddingRight="@dimen/right_margin"
        android:paddingBottom="20dp"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/contact_item_image"
        >
        <TextView
            android:id="@+id/contact_item_prim_text"
            android:text="Test title"
            android:textSize="@dimen/subhead_txt_size"
            android:textColor="@color/blackish"
            android:singleLine="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

        <TextView
            android:id="@+id/contact_item_sec_text"
            android:text="Test sec title"
            android:textSize="@dimen/body1_txt_size"
            android:textColor="@color/android_greyish"
            android:singleLine="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
</RelativeLayout>

这给了我一些看起来像这样的东西：

【讨论】：