如何讓我的ListView行看起來像Twitter應用[Screenshot]？

Question

我正在構建Twitter類型的客戶端。這裏是我的ListView行看起來像

我希望它看起來更像是：

我怎樣才能讓我的填充和形象的定位是否正確？下面是我的XML：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout android:id="@+id/RelativeLayout01" xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentLeft="true" 
     android:id="@+id/avatarImageView"> 
    </ImageView> 
    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/usernameTextView" 
     android:textStyle="bold" 
     android:layout_toRightOf="@+id/avatarImageView" 
     android:layout_alignParentTop="true" android:textColor="#636363"> 
    </TextView> 

    <TextView 
     android:id="@+id/bodyTextView" 
     android:layout_below="@+id/usernameTextView" 
     android:layout_toRightOf="@+id/avatarImageView" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" android:textColor="#636363"> 
    </TextView> 
    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@+id/usernameTextView" 
     android:id="@+id/dateTextView" 
     android:text="date" android:textColor="#636363"> 
    </TextView> 
</RelativeLayout> 

Answer 1

<ListView android:id="@android:id/list" 
     android:layout_width="fill_parent" android:layout_height="fill_parent" 
     android:layout_weight="1.0" 
     android:textColor="#444444" 
     android:divider="@drawable/list_divider" 
     android:dividerHeight="1px" 
     android:cacheColorHint="#00000000"> 
</ListView> 

創建一個名爲「list_divider」自己分頻器梯度是您在繪製文件夾拋出一個XML文件。你只需指定的顏色爲左，中，右的一面：

list_divider.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape> 
      <gradient 
       android:startColor="#999999" 
       android:centerColor="#555555" 
       android:endColor="#999999" 
       android:height="1px" 
       android:angle="0" /> 
     </shape> 
    </item> 
</layer-list> 

佈局列表中的每一行。這也是通過在代碼中稍後指定的佈局xml文件完成的。

row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:orientation="horizontal" 
     android:padding="4px"> 
     <ImageView android:id="@+id/avatar" 
      android:layout_width="48px" 
      android:layout_height="48px"/> 
     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical" 
      android:paddingLeft="4px"> 
      <LinearLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" 
       android:layout_weight="1" 
       android:gravity="center_vertical"> 
       <TextView android:id="@+id/name" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="left" 
        android:textStyle="bold" 
        android:singleLine="true" 
        android:ellipsize="end" 
        android:textColor="#444444" 
        android:padding="0px"/> 
       <TextView android:id="@+id/email_url" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="left" 
        android:singleLine="true" 
        android:ellipsize="end" 
        android:padding="0px" 
        android:textSize="10px"/> 
       <TextView android:id="@+id/postTitle" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="left" 
        android:singleLine="true" 
        android:ellipsize="end" 
        android:padding="0px" 
        android:textSize="10px"/> 
       <TextView android:id="@+id/comment" 
        android:orientation="vertical" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:singleLine="false" 
        android:textColor="#666666" 
        android:maxLines="5" 
        android:ellipsize="end"/> 
      <TextView android:id="@+id/status" 
        android:orientation="vertical" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:singleLine="true"/> 
      </LinearLayout> 
     </LinearLayout> 
    </LinearLayout> 

編輯：去除行號，因爲我m是一樣的人

Answer 2

Heere亞去：你只需要使用線性佈局，而不是相對的。並使用它的權重。最後一件重要的事情是在佈局組件中包裝視圖。像另一個線性佈局或相對等ImageView。所以嘗試一些組合，這將工作正常。也爲列表分隔線，你可以設置一個空的可繪製或自定義形狀等您的行背景也可以是形狀或某種顏色或可繪製的。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout android:id="@+id/LinearLayout01" xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="130dp"> 
    <LinearLayout android:layout_height="fill_parent" android:id="@+id/linearLayout1" android:layout_width="wrap_content" 
    android:orientation="vertical"> 
    <ImageView android:id="@+id/avatarImageView" android:layout_height="75dp" android:layout_width="75dp"></ImageView> 
    </LinearLayout> 
    <LinearLayout android:layout_height="fill_parent" android:id="@+id/linearLayout2" android:orientation="vertical" 
    android:layout_width="fill_parent"> 
    <LinearLayout android:id="@+id/linearLayout3" android:layout_width="fill_parent" android:layout_height="wrap_content"> 
     <TextView android:text="TextView" android:textStyle="bold" android:layout_height="wrap_content" 
     android:textColor="#636363" android:id="@+id/usernameTextView" android:layout_weight="1" android:layout_width="fill_parent"></TextView> 
     <TextView android:text="date" android:layout_height="wrap_content" android:textColor="#636363" 
     android:id="@+id/dateTextView" android:layout_width="wrap_content"></TextView> 
    </LinearLayout> 
    <LinearLayout android:layout_height="fill_parent" android:id="@+id/linearLayout4" android:layout_width="fill_parent"> 
     <TextView android:text="TextView" android:layout_height="wrap_content" android:textColor="#636363" 
     android:id="@+id/bodyTextView" android:layout_width="fill_parent"></TextView> 
    </LinearLayout> 
    </LinearLayout> 
</LinearLayout>