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

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