Question

我正在尝试从我的Android应用程序中的RSS中获取数据。我需要特定格式的数据。我能够做所有事情，但让我的ListView看起来像我想要的。它目前看起来像

enter image description here

我们可以看到眼睛符号和数字没有对齐。并且眼睛符号位于左侧缩略图下方。我希望它看起来像

enter image description here

请参阅第1个列表项，左侧为椭圆形。眼睛视图图像和数字彼此对齐并且与左缩略图的底部对齐。在第二个空椭圆的地方，我想要另一个TextView，我将新闻的来源显示为文本。

我在ListView中的1个迭代的当前代码如下： -

<!-- postitem.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="5dp"
android:background="@drawable/bg" >

<ImageView
    android:id="@+id/postThumb"
    android:layout_width="90dp"
    android:layout_height="80dp"
    android:layout_marginRight="5dp"
    android:scaleType="centerCrop"
    android:src="@drawable/logo" />

<TextView
    android:id="@+id/postTitleLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/postThumb"
    android:layout_toRightOf="@id/postThumb"
    android:ellipsize="end"
    android:maxLines="2"
    android:text="Place for title"
    android:textIsSelectable="false"
    android:textSize="16sp" />

<TextView
    android:id="@+id/postDateLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/postThumb"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@id/postThumb"
    android:maxLines="1"
    android:text="April 12, 2013"
    android:textSize="12sp" />

<TextView
    android:id="@+id/postViews"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20sp"
    android:layout_alignLeft="@+id/postDateLabel"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@+id/eye"
    android:layout_below="@id/postDateLabel"
    android:maxLines="1"
    android:text="1212"
    android:textSize="12sp" />

<ImageView
    android:id="@+id/eye"
    android:layout_width="13dp"
    android:layout_height="7dp"
    android:layout_alignLeft="@+id/postDateLabel"
    android:layout_below="@id/postDateLabel"
    android:scaleType="centerCrop"
    android:src="@drawable/eye" />

</RelativeLayout>

非常感谢任何帮助。如果有人可以分享一个很好的资源，我可以很容易地学习这个UI设计，我将感激不尽。

谢谢

Answer 1

问题基本上就是这一行：

android:layout_alignBottom="@id/postThumb"

你的postDateLabel中的

。

你说，好吧，将这个标签与缩略图底部对齐，当你说你想要眼睛和postDateLabel下方的文字时，它就会在那里结束。你为此买了一杯啤酒：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="5dp" >

<ImageView
    android:id="@+id/postThumb"
    android:layout_width="90dp"
    android:layout_height="80dp"
    android:layout_marginRight="5dp"
    android:scaleType="centerCrop"
    android:src="@drawable/abc_ic_go" />

<TextView
    android:id="@+id/postTitleLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/postThumb"
    android:layout_toRightOf="@id/postThumb"
    android:ellipsize="end"
    android:maxLines="2"
    android:text="Place for title"
    android:textIsSelectable="false"
    android:textSize="16sp" />

<TextView
    android:id="@+id/postDateLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_above="@+id/postViews"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@id/postThumb"
    android:maxLines="1"
    android:text="April 12, 2013"
    android:textSize="12sp" />

<TextView
    android:id="@+id/postViews"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/postThumb"
    android:layout_alignLeft="@+id/postDateLabel"
    android:layout_alignParentRight="true"
    android:layout_marginLeft="20sp"
    android:layout_toRightOf="@+id/eye"
    android:maxLines="1"
    android:text="1212"
    android:textSize="12sp" />

<ImageView
    android:id="@+id/eye"
    android:layout_width="13dp"
    android:layout_height="7dp"
    android:layout_alignBottom="@id/postThumb"
    android:layout_alignLeft="@+id/postDateLabel"
    android:scaleType="centerCrop"
    android:src="@drawable/abc_spinner_ab_pressed_holo_dark" />

P.S。你在xml中设置了很多不必要的属性..我只是在几秒内完成了这个以帮助你。您应该阅读RelativeLayout和LinearLayout的工作原理。

Answer 2

对齐的最佳方法是使用线性布局并将imageview和textview放在该布局中

例如： -

     <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:orientation="Horizontal" >

      <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />

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

ListView android中的相对布局

2 个答案: