一些高级用户界面的问题答案

【问题标题】：Problem with some advanced UI一些高级用户界面的问题
【发布时间】：2011-03-25 12:52:15
【问题描述】：

我正在尝试创建带有圆角的表格。我有相当多的 XML 来做到这一点，但我有一个问题。表格将自身包裹到其内部文本的宽度。我希望整个东西都填满父母（尽管我想要在它周围有一个边框，所以我有一些缓冲）。我不明白为什么当我拥有一切可以填充_parent 时它不是。有人能指出什么问题吗？

这是我的意思的屏幕截图和我的 XML 副本：

screenshot 1

shape_outer.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#0000FF"/>
    <corners android:radius="5px"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> 
</shape>

shape_inner.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="5px"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> 
</shape>

我的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="47px"
        style="?android:attr/windowTitleBackgroundStyle"
        android:gravity="center">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="My title"
            style="?android:attr/windowTitleStyle"
            android:paddingLeft="5px" />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:padding="10px"
        >
        <!-- used so we can separate two tables -->
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="1"
            >
            <!-- first table -->
            <TableRow android:paddingBottom="10px">
                <!-- outer border -->
                <TableLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:stretchColumns="1"
                    android:padding="2px"
                    android:background="@drawable/shape_outer"
                    >
                    <TableRow>
                        <!-- inner whitespace -->
                        <TableLayout
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:stretchColumns="1"
                            android:layout_weight="1"
                            android:background="@drawable/shape_inner"
                            android:padding="10px"
                            >
                            <TableRow>
                                <!-- first row: one -->
                                <LinearLayout
                                    android:orientation="horizontal"
                                    android:layout_width="fill_parent"
                                    android:layout_height="wrap_content"
                                    android:gravity="left|center_vertical"
                                    >
                                    <TextView 
                                        android:layout_width="70px"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="One:"
                                        android:padding="6dip"
                                        android:textColor="#000000" />
                                    <TextView 
                                        android:id="@+id/one"
                                        android:layout_width="fill_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="sadflkjaasasdfadsdsf;lkjdsal;asdj"
                                        android:padding="6dip"
                                        android:textColor="#000000"
                                        android:maxLines="1" />
                                </LinearLayout>
                            </TableRow>
                            <!-- separator -->
                            <View
                                android:layout_height="1dip"
                                android:background="#FF909090" />
                            <TableRow>
                                <!-- second row: two -->
                                <LinearLayout
                                    android:orientation="horizontal"
                                    android:layout_width="fill_parent"
                                    android:layout_height="wrap_content"
                                    android:gravity="left|center_vertical"
                                    >
                                    <TextView 
                                        android:layout_width="70px"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="Two:"
                                        android:padding="6dip"
                                        android:textColor="#000000" />
                                    <TextView 
                                        android:id="@+id/two"
                                        android:layout_width="fill_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="asdfasdasdfasdfasfasdfasgeargfsgsfd"
                                        android:padding="6dip"
                                        android:textColor="#000000"
                                        android:maxLines="1" />
                                </LinearLayout>
                            </TableRow>
                        </TableLayout>
                    </TableRow>
                </TableLayout>
            </TableRow>
            <!-- second table -->
            <TableRow>
                <!-- outer border -->
                <TableLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:stretchColumns="1"
                    android:padding="2px"
                    android:background="@drawable/shape_outer"
                    >
                    <TableRow>
                        <!-- inner white space -->
                        <TableLayout
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:stretchColumns="1"
                            android:background="@drawable/shape_inner"
                            android:padding="10px"
                            >
                            <!-- third row: Three -->
                            <TableRow>
                                <LinearLayout
                                    android:orientation="horizontal"
                                    android:layout_width="fill_parent"
                                    android:layout_height="wrap_content"
                                    android:gravity="left|center_vertical"
                                    >
                                    <TextView 
                                        android:layout_width="70px"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="Three:"
                                        android:padding="6dip"
                                        android:textColor="#000000" />
                                    <TextView 
                                        android:id="@+id/three"
                                        android:layout_width="fill_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="asdfasfasdfasgeargfsgsfd"
                                        android:padding="6dip"
                                        android:textColor="#000000"
                                        android:singleLine="true"
                                        android:ellipsize="end" />
                                </LinearLayout>
                            </TableRow>
                            <!-- separator -->
                            <View
                                android:layout_height="1dip"
                                android:background="#FF909090" />
                            <!-- second row: four -->
                            <TableRow>
                                <LinearLayout
                                    android:orientation="horizontal"
                                    android:layout_width="fill_parent"
                                    android:layout_height="wrap_content"
                                    android:gravity="left|center_vertical"
                                    >
                                    <TextView 
                                        android:layout_width="70px"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="Four:"
                                        android:padding="6dip"
                                        android:textColor="#000000" />
                                    <TextView 
                                        android:id="@+id/four"
                                        android:layout_width="fill_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_column="1"
                                        android:text="aasdfasfasdfasgeargfsgsfd"
                                        android:padding="6dip"
                                        android:textColor="#000000"
                                        android:singleLine="true"
                                        android:ellipsize="end" />
                                </LinearLayout>
                            </TableRow>
                        </TableLayout>
                    </TableRow>
                </TableLayout>
            </TableRow>
        </TableLayout>
    </LinearLayout>
</LinearLayout>

【问题讨论】：

看起来您的布局非常复杂。在工具文件夹中找到的 HeirarchyViewer 可能会帮助您进行调试。您可以查看是哪个元素导致您的行超出了您想要的位置。
感谢您的回复。这不仅仅是因为它导致表格超出了屏幕的范围。如果文字很短，表格也因为很窄。但是什么都不应该包装:(
我似乎已经修复了它，但我不明白为什么。我最外层的 TableLayout 现在是 fill_parent，而其他所有 Table_Layout 都是 wrap_content。再次感谢您
我已经将它包装在一个 ScrollView 中，现在我可能又重新拥有了同样的 aaaall

标签： android tablelayout android-linearlayout

【解决方案1】：

很高兴您修复了它，但是您可以使用相对布局更轻松地完成相同的外观。

【讨论】：

怎么样？然后我必须将形状和文本视图放在一起。这不会增加额外的复杂性吗？
这是真正困难的部分：我希望这些表是动态的。意思是，在我的 Java 代码中，我希望能够为 N 件事添加它们是否有可能实现这一点？我唯一能想到的就是使用带有这些表之一的 ListView 作为列表项。问题是我也不希望表格被最大化为 2 行。我希望这些行也是动态的。

【解决方案2】：

表格的使用令人费解且毫无意义。这是我的工作 XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingTop="10dip"
    android:paddingBottom="10dip"
    android:paddingLeft="15dip"
    android:paddingRight="15dip"
    >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="2dip"
        android:background="@drawable/shape_outer"
        >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_inner"
            >
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="left|center_vertical"
                android:padding="10dip"
                >
                <TextView 
                    android:layout_width="70dip"
                    android:layout_height="wrap_content"
                    android:text="One:"
                    android:padding="6dip"
                    android:textColor="#000000"
                    android:gravity="right" />
                <TextView 
                    android:id="@+id/one"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:padding="6dip"
                    android:textColor="#000000"
                    android:text="sdklafjalfkjaslgkjafds"
                    android:maxLines="1"
                    android:ellipsize="end" />
            </LinearLayout>
            <View
                android:layout_height="1dip"
                android:layout_width="fill_parent"
                android:background="#FF909090"
                android:padding="10dip" />
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="left|center_vertical"
                android:padding="10dip"
                >
                <TextView 
                    android:layout_width="70dip"
                    android:layout_height="wrap_content"
                    android:text="Two:"
                    android:padding="6dip"
                    android:textColor="#000000"
                    android:gravity="right" />
                <TextView 
                    android:id="@+id/two"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:padding="6dip"
                    android:textColor="#000000"
                    android:text="dsaklfajsdkldsafjsf"
                    android:maxLines="1"
                    android:ellipsize="end" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

【讨论】：