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

问题描述

| 我正在构建一个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>

    

解决方法

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

编辑：删除行号，因为我是一个好人     ,快去吧：您只使用线性布局而不是相对布局。并使用其重量。最后一件重要的事情是将视图包装在布局组件中。如ImageView在另一个linearlayout或relative中的ImageView等。因此，尝试与此结合使用，效果会很好。同样，对于列表分隔符，您可以设置一个null可绘制或自定义形状等。行背景也可以是形状或某种颜色或可绘制。

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