Question

我尝试使用RelativeLayout设计类似于下图（source）的列表项。

在我的情况下，itens将是：

ImageView（interval_icon）
简单TextView（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>

但结果是这样的：

enter image description here

在这种情况下，两个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" />

android：使用相对布局来定位列表项中的视图元素

2 个答案: