Material 设计清单指南 Android 5.0

Question

所以我正在尝试关注 google 的新功能 Material Design guidelines on lists。但我不太能得到我应该得到的结果。它应该是这样的：

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

<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"
    />

但实际结果更像这样：

我基本上只是直接输入了 material 设计网站上指定的尺寸，但它看起来不合适，我是不是误解了这些指南或其他什么？设计本身可以通过让 LinearLayout 用权重处理它或使用 RelativeLayout positionening 来轻松完成，我只是认为这些指南应该帮助我们......关于我们应该如何使用这些指南的任何想法或者是它们只适用于设计师而不适用于开发人员？

编辑

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

Answer 1

所以我最终采用了这个解决方案：

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

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

Answer 2

在图像视图中使用此 Pkmmte 的 CircularImageView lib。

Material 设计清单指南 Android 5.0

Material design list guideline Android 5.0

android

material-design