【问题标题】:TextView overlapping ImageView in RelativeLayout在RelativeLayout中TextView重叠ImageView
【发布时间】:2014-07-24 13:08:34
【问题描述】:

我有一个 listitem.xml 在 getView 中膨胀,用于视频列表。 当txtTitle较长时,会与右侧的arrowImage重叠,将其覆盖。

有什么建议可以避免这种情况吗?标题的文本如何换行返回?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/list_selector"
android:orientation="horizontal"
android:padding="5dip" >


<ImageView
    android:id="@+id/imgIcon"
    android:background="@drawable/image_bg"
    android:layout_width="109dp"
    android:layout_height="68dp"
    android:scaleType="fitXY"
    android:padding="3dip"/>

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#b0b0b0"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imgIcon"
        android:typeface="sans"
        android:textSize="12dip"
        android:layout_marginLeft="6dip"
        android:layout_marginRight="6dip"
        android:paddingRight="10dip"
        android:textStyle="bold" />


    <ImageView    
    android:id="@+id/arrowImage"
    android:src="@drawable/arrow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:padding="3dip"
    android:paddingLeft="10dip"
    android:paddingRight="10dip" />

   </RelativeLayout>

【问题讨论】:

  • 为什么不使用compound drawable?图像将在 TextView 内,因此不会被文本覆盖,因为它会在 TextView 内有自己的保留空间。
  • 在 TEXTVIEW 中尝试 android:layout_toLeftOf="@+id/arrowImage" android:layout_toRightOf="@+id/imgIcon"
  • 这行得通@andruboy,是的!
  • 我应该发帖作为答案吗?
  • 是的,@andruboy,谢谢

标签: android listview textview imageview overlap


【解决方案1】:

试试这个代码

在 TextView 中添加代码

android:layout_toLeftOf="@+id/arrowImage" 
android:layout_toRightOf="@+id/imgIcon"

最终代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/list_selector"
  android:orientation="horizontal"
  android:padding="5dip" >

          <ImageView
             android:id="@+id/imgIcon"
             android:background="@drawable/image_bg"
             android:layout_width="109dp"
             android:layout_height="68dp"
             android:scaleType="fitXY"
             android:padding="3dip"/>

         <TextView
             android:id="@+id/txtTitle"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#b0b0b0"
             android:layout_centerVertical="true"
             android:layout_toRightOf="@+id/imgIcon"
             android:layout_toLeftOf="@+id/arrowImage"
             android:typeface="sans"
             android:textSize="12dip"
             android:layout_marginLeft="6dip"
             android:layout_marginRight="6dip"
             android:paddingRight="10dip"
             android:textStyle="bold" />

         <ImageView    
             android:id="@+id/arrowImage"
             android:src="@drawable/arrow"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentRight="true"
             android:layout_centerVertical="true"
             android:padding="3dip"
             android:paddingLeft="10dip"
             android:paddingRight="10dip" />

</RelativeLayout>

【讨论】:

    【解决方案2】:

    你能试试这个代码吗?

    <?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="match_parent"
        android:orientation="vertical" >
    
        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/relativeLayout1"
            android:orientation="horizontal" >
    
            <ImageView
                android:id="@+id/imgIcon"
                android:background="@drawable/image_bg"
                android:layout_width="109dp"
                android:layout_height="68dp"
                android:scaleType="fitXY"
                android:padding="3dip"/>
    
            <TextView
                android:id="@+id/txtTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="5dp"
                android:textColor="#b0b0b0"
                android:typeface="sans"
                android:textSize="12dip"
                android:textStyle="bold" />
        </LinearLayout>
    
        <RelativeLayout
            android:id="@+id/relativeLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true" >
    
            <ImageView
                android:id="@+id/arrowImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/arrow" />
        </RelativeLayout>
    
    </RelativeLayout>
    

    【讨论】:

      【解决方案3】:

      使用复合可绘制对象
      图片将在 TextView 内部,因此不会被文本覆盖,因为它在 TextView 内部有自己的保留空间。

      请注意更少的视图(和/或布局)=更好的性能(这是一个教条)。

      删除 ImageView 并在 TextView 中设置:

      android:drawableTop|Left|Right|Bottom="@drawable/your_image"
      

      在你的情况下,

      android:drawableLeft="@drawable/your_image"
      

      android:drawableRight="@drawable/arrow_image"
      

      要以编程方式设置您的复合可绘制对象(一旦您引用了 TextView),只需使用 setCompoundDrawablesWithIntrinsicBounds() 方法分配一个或多个复合图像,如下所述:http://developer.android.com/reference/android/widget/TextView.html#setCompoundDrawablesWithIntrinsicBounds(int, int, int,整数)


      顺序为:、上、、下

      【讨论】:

      • 这成功了(不重叠)。顺便说一句,我需要将 arrowImage 固定在右侧。使用此解决方案,箭头不在固定位置,它随 TextView 长度而变化
      • 对箭头图像做同样的事情! android:drawableRight="@drawable/arrow_image" - 我更新了我的答案
      • 这是最优化的方法。
      • 唯一的事情是我应该从 Java 代码中分配动态图像(imgIcon 是视频缩略图),而 setCompoundDrawablesWithIntrinsicBounds(int,int,int,int) 需要来自 R.drawable 的图像。
      • 那又怎样?来自 R.drawable IS 的图像是一个 int... ;) 这意味着您从 R.drawable 获取 id。因此,例如,您可以使用setCompoundDrawablesWithIntrinsicBounds(R.drawable.image1, R.drawable.image2, null, null)
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-07-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多