TableRow內容超出屏幕尺寸

Question

我有一個設計問題不知道爲什麼它這樣做，這就是爲什麼我在這裏。這是圖片和代碼。希望你們能幫助我。

http://i60.tinypic.com/fwr8mh.jpg（鏈接到圖片）

<TableRow 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="2:00 [Extended]" 
       android:textColor="#ffffff" /> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/light" /> 
     </TableRow> 

謝謝。

按照要求[當前編號]：

<?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:background="#2f4f4f" > 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" > 

     <TableLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" > 

      <TableRow 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="#36444e" > 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="center_horizontal" 
        android:text="Brewing:" 
        android:textColor="#ffff00" /> 
      </TableRow> 

      <TableRow 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="#36444e" > 

       <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:src="@drawable/ghasttear" /> 
      </TableRow> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:background="#36444e" > 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="32dp" 
        android:layout_weight="1" 
        android:src="@drawable/brewingarrow" /> 
      </TableRow> 

      <TableRow 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="#36444e" > 

       <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_gravity="" 
        android:layout_weight="1" 
        android:src="@drawable/waterbottle" /> 
      </TableRow> 


      <View 
       android:layout_width="match_parent" 
       android:layout_height="1dp" 
       android:background="#ffffff" /> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" > 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="center_horizontal" 
        android:text="Potion Time" 
        android:textColor="#ffffff" /> 
      </TableRow> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" > 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="center_horizontal" 
        android:text="0:45 [Non-Extended]" 
        android:textColor="#ffffff" /> 
      </TableRow> 

      <TableRow 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" > 

       <TextView 
        android:layout_width="50dp" 
        android:layout_height="wrap_content" 
        android:text="2:00 [Extended]" 
        android:textColor="#ffffff" 
        android:ellipsize="end" /> 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/light" /> 
      </TableRow> 

      <View 
       android:layout_width="match_parent" 
       android:layout_height="1dp" 
       android:background="#ffffff" /> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" > 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="center_horizontal" 
        android:text="Potion Description" 
        android:textColor="#ffffff" /> 
      </TableRow> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" > 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:gravity="center_horizontal" 
        android:text="Poyion time lasts for 0:45 when not extended." 
        android:textColor="#ffffff" /> 
      </TableRow> 
     </TableLayout> 
    </RelativeLayout> 

</RelativeLayout> 

Answer 1

因此，在每個TableRow組件，你可以有一個孩子View. So, in order to have a的TextView and an ImageView的, you have to place those Views inside another View, like a的LinearLayout or a RelativeLayout`，這樣你就可以控制自己的位置。

所以，在你的「有問題」 TableRow，只是把它改成這樣：

 <TableRow 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" > 

      <RelativeLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" > 

       <TextView 
        android:layout_width="wrap_content" 
        android:id="@+id/extendedText" 
        android:layout_height="wrap_content" 
        android:layout_centerVertical="true" 
        android:layout_alignParentLeft="true" 
        android:text="2:00 [Extended]" 
        android:textColor="#ffffff" /> 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_centerVertical="true" 
        android:layout_alignParentRight="true" 
        android:src="@drawable/light" /> 
      </RelativeLayout> 
     </TableRow> 

我只是把一個RelativeLayout內ImageView和TextView和比對的TextView其父視圖的左側（其是RelativeLayout）和右邊的ImageView。如果文字不會太長，請不要介意ellipsize的值。