android：使用相對佈局來定位列表項中的視圖元素

Question

我試圖設計一個類似於下圖（source）的列表項，使用RelativeLayout。

在我的情況下，itens將是：

1. ImageView的（interval_icon）
2. 簡單的TextView（interval_start）
3. 另一個的TextView（interval_end）

代碼就像t一樣他：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="horizontal" android:layout_width="match_parent" 
android:layout_height="match_parent" android:paddingTop="@dimen/activity_horizontal_margin" 
android:paddingBottom="@dimen/activity_horizontal_margin" 
android:gravity="center" 
android:minHeight="?android:attr/listPreferredItemHeight" > 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:src="@drawable/image" 
     android:layout_alignParentLeft="true" 
     android:id="@+id/interval_icon" 
    /> 

    <TextView 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:text="Start" 
     android:id="@+id/interval_start" 
     android:layout_toRightOf="@+id/interval_icon" 
     android:layout_alignParentRight="true" 
     /> 


    <TextView 
     android:id="@+id/interval_end" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:text="End" 
     android:layout_below="@+id/interval_start" 
     android:layout_toRightOf="@+id/interval_icon"/> 

</RelativeLayout> 

但結果是這樣的：

在這種情況下，兩個EDITTEXT是在圖像的中間。 我需要做什麼修改來定位我的itens像樣本圖片？

在此先感謝。

Answer 1

它可以通過將TextView放入佈局並使用您提供的鏈接的材料設計列表組件表來實現。

這裏是我做的，使其材質

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:minHeight="?android:attr/listPreferredItemHeight" 
    android:orientation="horizontal"> 

    <ImageView 
     android:id="@+id/interval_icon" 
     android:layout_width="30dp" 
     android:layout_height="30dp" 
     android:layout_alignParentLeft="true" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginTop="20dp" 
     android:src="@drawable/ic_action_heart_48d" /> 

    <RelativeLayout 
     android:id="@+id/rel1" 
     android:layout_width="wrap_content" 
     android:layout_height="62dp" 
     android:paddingLeft="72dp" 
     android:paddingRight="16dp"> 

     <TextView 
      android:id="@+id/interval_start" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_centerVertical="true" 
      android:paddingBottom="2dp" 
      android:text="Start" 
      android:singleLine="true" 
      android:textColor="#000000" 
      android:textSize="16sp" /> 

    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="62dp" 
     android:layout_below="@+id/rel1" 
     android:layout_centerVertical="true" 
     android:paddingLeft="72dp" 
     android:paddingRight="16dp"> 


     <TextView 
      android:id="@+id/interval_end" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:text="End" 
      android:singleLine="true" 
      android:textColor="#000000" 
      android:textSize="16sp" /> 

    </RelativeLayout> 


</RelativeLayout> 

的XML android:layout_centerVertical="true"使得佈局移動到父佈局的中心垂直。進一步添加一些填充材料以符合材料指導原則，可以獲得所需的外觀。您也可以根據需要更改尺寸ImageView或TextView，儘管遵循了代碼中的指導原則。

乾杯，拉夫

Answer 2

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:minHeight="?android:attr/listPreferredItemHeight" 
android:paddingBottom="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_horizontal_margin"> 

<ImageView 
    android:id="@+id/interval_icon" 
    android:layout_width="30dp" 
    android:layout_height="50dp" 
    android:layout_alignParentLeft="true" 
    android:src="@drawable/image" /> 

<TextView 
    android:id="@+id/interval_start" 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:layout_alignParentRight="true" 
    android:layout_alignTop="@id/interval_icon" 
    android:layout_toRightOf="@+id/interval_icon" 
    android:text="Start" /> 

<TextView 
    android:id="@+id/interval_end" 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:layout_below="@+id/interval_start" 
    android:layout_marginTop="10dp" 
    android:layout_toRightOf="@+id/interval_icon" 
    android:text="End" />