android - View is overlapped by another view with match_parent and wrap_content on Android

Question

I want to create a view with two parts: 1. Avatar, which is always displayed at right/center_vertial on screen. 2. Name, which is always displayed at left on screen (do not overlap on Avatar).

<?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
    <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:orientation="vertical">
      <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/username" />
    </LinearLayout>
    <LinearLayout
      android:id="@id/avatar"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:gravity="right|center_vertical"
      android:orientation="vertical" >
      <ImageView
        android:id="@+id/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:scaleType="center"
        android:src="@drawable/useravatar" />
    </LinearLayout>
  </LinearLayout>

The problem is when Name is too long, it overlaps on Avatar. How can I fix this problem?

Answer 1

您应该使用RelativeLayout和 的android:layout_toLeftOf="@id/avatar"属性TextView。

Answer 2

您最好为此使用相对布局：

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

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/avatar"
        android:text="Some User Name" />

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="right|center_vertical"
        android:scaleType="center"
        android:src="@drawable/thumbr" />

</RelativeLayout>