如何使ListView行看起来像Twitter应用程序的[截屏]？

Question

I am building a Twitter type client. Here is what my ListView row looks like

I want it to look more like:

How can I get my padding and positioning of the avatar correct? Here is my 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>

create your own divider gradient named “list_divider” which is an xml file that you throw in your drawable folder. you just specify the colors for the left, center and right side:

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>

layout for each row in the list. This is also done through a layout xml file that you specify later in your code.

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>

edit: removed line number, because ima kind person

Answer 2

Heere ya go: you just use linear layout instead of relative. and use its weights. and the last important thing is to wrap views inside layout components. like ImageView inside another linearlayout or relative etc.. so try some combinations with this and it will work fine. also for the list divider you can set a null drawable or a custom shape etc. your row background can also be a shape or some color or drawable.

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