Android - RelativeLayout 带图文，设计问题

Question

我有一个包含图像和两个 TextView 的相对布局(一个用于新闻标题，另一个用于日期)。我为带有标题的 TextView 的宽度设置了一个硬编码值。如果我使用环绕内容，它会与日期重叠。

这是我的 xml 代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp" >

<LinearLayout
    android:id="@+id/thumbnail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_marginRight="5dp"
    android:padding="3dp" >

    <ImageView
        android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/internet"
        android:contentDescription="News" />
</LinearLayout>

<TextView
    android:id="@+id/txtTitle"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/thumbnail"
    android:layout_toRightOf="@+id/thumbnail"
    android:text="Timberlake's fourth studio album The 20/20 Experience – 2 of 2 was released on September 30, 2013."
    android:textSize="14sp" />

<TextView
    android:id="@+id/txtDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/txtTitle"
    android:layout_marginRight="5dp"
    android:gravity="right"
    android:text="23.09.2013"
    android:textColor="#C0C0C0"
    android:textSize="10sp" />

</RelativeLayout>

对于屏幕尺寸 4,7，它看起来像这样:

screen size 4,7

但是对于屏幕尺寸 5,1 来说它看起来很糟糕:

screen size 5,1

我的目标是让每个屏幕尺寸都具有相同的外观。标题和日期之间的空格应始终相同。我怎样才能做到这一点？

Answer 1

您已经在使用 RelativeLayout ，令人惊讶的是这里有一个快速修复方法。留下你的TextView的宽度为 match_parent , 但你想要做的是将它夹在 ImageView 之间和 TextView你用于约会。尝试执行以下操作(请注意，我必须在您的布局中切换 TextViews 的顺序才能使其正常工作)。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp" >

    <LinearLayout
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dp"
        android:padding="3dp" >

            <ImageView
                android:id="@+id/imgIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="News" />
    </LinearLayout>

    <!-- Note: I switched txtDate and txtTitle in your layout file ONLY -->
    <!-- This will NOT change their order in your actual view           -->
    <TextView
        android:id="@+id/txtDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/txtTitle"
        android:layout_marginRight="5dp"
        android:gravity="right"
        android:text="23.09.2013"
        android:textColor="#C0C0C0"
        android:textSize="10sp" />

   <!-- This is the important part, note the android:layout_toLeftOf -->
   <!-- Also remember to change the width back to "wrap_content -->
   <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:layout_toLeftOf="@id/txtDate"  
        android:text="Timberlake's fourth studio album The 20/20 Experience – 2 of 2 was released on September 30, 2013."
        android:textSize="14sp" />

</RelativeLayout>

这应该会为您提供所需的 View 。

希望这对您有所帮助。祝你好运，编码愉快!