Comment obtenir un TextView pour ne pas pousser un ImageView hors de l'écran

Question

Je génère dynamiquement une mise en page, et pour ce faire, j'ai un fichier menu_row_element.xml qui contient la structure de ligne répétitive.

Il se compose d'un LinearLayout (horizontal) qui contient une image, un texte plus grand au-dessus d'un plus petit, et un ImageView avec une flèche droite (à l'intérieur d'un autre LinearLayout pour le garder aligné).

Lorsque la partie de texte est petite, tout semble correct. Cependant, si la partie de texte est longue, la flèche droite est déplacée de l'écran.

Comment puis-je garder la flèche droite toujours alignée à droite sur l'écran et que les textviews enveloppent le texte de manière appropriée?

Dans cette image, la dernière ligne est OK car le texte est petit, mais les lignes 1 et 2 poussent la flèche droite hors de l'écran.

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

Le fichier xml est:

<?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> 

Merci!

Answer 1

Utilisez un RelativeLayout.

La structure doit être alors:

<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> 

Ou si vous préférez (et cela est en fait probablement mieux), faites ceci:

<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> 

Answer 2

Vous pouvez garder votre disposition linéaire. Donnez simplement une valeur de pondération de 1 au bloc de texte. Vous n'avez pas besoin de placer votre imageview dans une autre disposition de cette façon.

Vous souhaiterez également limiter vos vues de texte à une seule ligne.

<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" />