Android - 如何布局类似于iOS表格视图单元格的列表视图项目，包括图像，标题和副标题？

Question

我尝试布局类似于常见iOS设计的Android列表视图单元格 - 左侧是图片，图片旁边是两个标签：

我如何实现像基本iOS单元格一样的Android单元格布局，包括图像，标题和副标题？

但是，我不确定用于完成此任务的正确布局是什么。这是我正在尝试的内容，并没有正确对齐元素：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1">

    <TextView
        android:id="@+id/api"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.47">

        <ImageView
            android:layout_width="@dimen/side_button_size"
            android:layout_height="@dimen/side_button_size"
            android:id="@+id/image"
            android:layout_gravity="left|top"
            android:background="@drawable/close_red" />

        <TextView
            android:id="@+id/title"
            android:layout_width="246dp"
            android:layout_height="82dp"
            android:layout_gravity="center_horizontal|top"
            android:text="This is title label" />

        <TextView
            android:id="@+id/subtitle"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_gravity="left|center_vertical"
            android:text="This is subtitle label" />
    </FrameLayout>

</LinearLayout>

Answer 1

使用包含LinearLayout的水平ImageView和包含2 LinearLayout s的另一个（此时垂直）TextView。{/ p>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Space
            android:layout_width="match_parent"
            android:layout_height="4dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

简单地说：

+-----------+-----------+
|           | TextView1 |
| ImageView |           |
|           | TextView2 |
+-----------+-----------+

Answer 2

使用RelativeLayout时，您可以指定每个孩子的相对位置。这是一个例子：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="@dimen/side_button_size"
        android:layout_height="@dimen/side_button_size"
        android:id="@+id/image"
        android:background="@drawable/close_red" />

    <TextView
        android:id="@+id/title"
        android:layout_width="246dp"
        android:layout_height="82dp"
        android:layout_toLeftOf="@id/image"
        android:layout_toStartOf="@id/image"
        android:text="This is title label" />

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_below="@id/title"
        android:text="This is subtitle label" />
</RelativeLayout>