ImageViewをスクリーンから押し出さないようにTextViewを設定する方法

Question

私は動的にレイアウトを生成しています。これを行うには、繰り返す行構造を含むmenu_row_element.xmlファイルがあります。

イメージを含むLinearLayout（水平）、小さいイメージの上に大きなテキスト、右矢印を持つImageView（別のLinearLayoutの中で右揃えにする）で構成されます。

テキスト部分が小さい場合、すべてが正常に見えます。ただし、テキスト部分が長い場合は、右矢印が画面から押し出されます。

どうすれば右矢印を画面上に常に正しく配置し、テキストビューでテキストを適切に折り返すことができますか？

このイメージでは、テキストは小さいので、最後の行はOKですが、行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> 

ありがとう！

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

Answer 2

をあなたの線形のレイアウトを維持することができます。テキストブロックにレイアウトの重み付け値1を与えます。このように別のレイアウトにイメージビューを配置する必要はありません。

テキストビューを1行に制限したい場合もあります。

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