android: 使用相对布局在列表项中定位视图元素

Question

我正在尝试使用 RelativeLayout 设计类似于下图 (source) 的列表项。

在我的例子中，itens 将是：

ImageView (interval_icon)
简单的文本视图（interval_start）
另一个 TextView (interval_end)

代码是这样的：

<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 位于图像的中间。我需要做哪些修改才能像示例图像中那样定位我的物体？

Answer 1

可以通过将 TextView 放在布局中并使用您 link 提供的 material 设计列表组件 sheet 来实现。

这是我所做的 Material

<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" 使布局垂直移动到父布局的中心。进一步添加一些填充以满足 Material 准则，使其具有所需的外观和感觉。您还可以根据需要更改 ImageView 或 TextView 的大小，尽管遵循代码中的准则。

干杯，Gaurav

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

android: 使用相对布局在列表项中定位视图元素

android: using relative layout to position view elements inside a list item

android

android-layout

android-relativelayout