如何让TextView不将ImageView推离屏幕

时间:2011-12-22 23:25:43

标签: android textview imageview

我正在动态生成布局,为此,我有一个menu_row_element.xml文件,其中包含重复的行结构。

它包含一个LinearLayout(水平),其中包含一个图像,一个较大的文本位于较小的文本上方;一个ImageView的右箭头(在另一个LinearLayout内,以使其保持右对齐)。

当文字部分很小时,一切看起来都很好。但是,如果文本部分很长,则右箭头会从屏幕上移开。

如何让右箭头始终在屏幕上右对齐并让文本视图正确包装文本?

在此图片中,最后一行是正常的,因为文字较小,但第1行和第2行将右箭头从屏幕上移开。

a busy cat http://img706.imageshack.us/img706/2927/device20111221203115.jpg

xml文件是:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:clickable="true"
        android:background="@drawable/main_menu_button"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:orientation="horizontal"
        android:gravity="left|center_vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <!-- Icon of each section -->
        <ImageView
            android:id="@+id/menu_icon"
            android:layout_width="wrap_content" 
            android:layout_height="fill_parent"
            android:padding="10px" />

        <!-- Text, in two parts -->
        <LinearLayout
            android:orientation="vertical"
            android:paddingLeft="10px"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent">

            <!-- Big font text -->
            <TextView
                android:id="@+id/menu_element_big_text"
                android:textSize="20dp"
                android:textColor="@color/black"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

            <!-- Small font text -->
            <TextView
                android:id="@+id/menu_element_small_text"
                android:scrollHorizontally="false"
                android:textSize="15dp"
                android:textColor="@color/black"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <!-- Layout just to be able to right align, sheesh! -->
        <LinearLayout
            android:gravity="right|center_vertical"
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:padding="0dp"
                android:src="@drawable/right" />
        </LinearLayout>

    </LinearLayout>

谢谢!

2 个答案:

答案 0 :(得分:1)

使用RelativeLayout

结构应该是:

<LinearLayout> <!--This is the outer one and will contain everything else-->
       <RelativeLayout> <!-- width: fill, height: wrap, one of these for each row-->
           <ImageView 
              android:id="@+id/rightArrow"
              android:layout_alignParentRight="true"/> <!-- This is the arrow that points to the right wrap width and height-->
           <ImageView
              android:id="@+id/icon"
              android:layout_alignParentLeft="true"/><!--This is the icon on the left wrap width and height-->
           <TextView
              android:id="@+id/largeText"
              android:text="Large Text"
              android:layout_alignParentBottom="true"
              android:layout_toLeftOf="@+id/rightArrow"
              android:layout_toRightOf="@+id/icon"/> <!-- fill width and wrap height-->
           <TextView
              android:id="@+id/smallText"
              android:text="Small Text"
              android:layout_below="@+id/largeText"
              android:layout_toLeftOf="@+id/rightArrow"
              android:layout_toRightOf="@+id/icon"/> <!-- fill width and wrap height-->
        </RelativeLayout>
    </LinearLayout>

或者如果您愿意(这实际上可能更好),请执行以下操作:

<LinearLayout> <!--This is the outer one and will contain everything else-->
   <RelativeLayout> <!-- width: fill, height: wrap, one of these for each row-->
       <ImageView 
          android:id="@+id/rightArrow"
          android:layout_alignParentRight="true"/> <!-- This is the arrow that points to the right wrap width and height-->
     <LinearLayout android android:layout_toLeftOf="@+id/rightArrow"
          ><!--orientation:horizontal, fill width, wrap height-->
       <ImageView
          android:id="@+id/icon"/><!--This is the icon on the left wrap width and height-->
       <TextView
          android:id="@+id/largeText"
          android:text="Large/> <!-- fill width and wrap height-->
       <TextView
          android:id="@+id/smallText"
          android:text="Small Text"/> <!-- fill width and wrap height-->
     </LinearLayout>
    </RelativeLayout>
</LinearLayout>

答案 1 :(得分:1)

您可以保持线性布局。只需将布局权重值1赋予文本块即可。您不需要以这种方式将imageview放在另一个布局中。

您还希望将文字视图限制为一行。

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:clickable="true"
android:background="@drawable/main_menu_button"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:orientation="horizontal"
android:gravity="left|center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<!-- Icon of each section -->
<ImageView
    android:id="@+id/menu_icon"
    android:layout_width="wrap_content" 
    android:layout_height="fill_parent"
    android:padding="10px" />

<!-- Text, in two parts -->
<LinearLayout
    android:orientation="vertical"
    android:paddingLeft="10px"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="1">

            <!-- Big font text -->
    <TextView
        android:id="@+id/menu_element_big_text"
        android:scrollHorizontally="false"
        android:singleLine="true"
        android:textSize="20dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <!-- Small font text -->
    <TextView
        android:id="@+id/menu_element_small_text"
        android:scrollHorizontally="false"
        android:singleLine="true"
        android:textSize="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:padding="0dp"
    android:src="@drawable/right" />