材料设计清单指南Android 5.0

Question

所以我试图在Material Design guidelines上关注谷歌新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"
    />

但实际结果更像是这样：

我基本上只是直接按照材料设计网站上的规定输入了尺寸，但它看起来不合适，我是否误解了这些指导方针？设计本身可以通过让LinearLayout使用权重或使用RelativeLayout定位来轻松制作，我只是因为这些指导原则应该帮助我们......关于我们应该如何使用这些指南的任何想法或者是他们只为设计师而不是开发人员？

修改

所以我提出了一个可能解决方案的答案。仍然认为一些代码样本来自googles部分非常棒。

Answer 1

在imageview中使用此 Pkmmte CircularImageView lib 。

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

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