Android - 如何佈置類似於iOS表格視圖單元的列表視圖項目，包含圖像，標題和副標題？

Question

我試圖鋪陳類似於常見的iOS設計的一款Android列表視圖電池 - 在左邊的圖像，以及兩個標籤旁邊的形象：

我怎樣才能實現Android手機佈局像基本的iOS單元格，包含圖像，標題和副標題？

但是，我不確定什麼是適當的佈局來完成這項任務。這裏就是我想，它不正確對齊元素：

<?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和另一個（垂直這段時間）LinearLayout包含2 TextView秒。

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