在TableRow中驯服Android ListView高度

时间：2012-03-10 21:13:48

标签： android android-layout android-listview

n.b。：我打算在Pastebin上发布所有这些XML，但我认为将它存档为后代是很重要的，所以请原谅代码样本长度！最好有更多信息而不是更少，对吗？

考虑以下计算器布局。 （我为这篇文章硬编码了字符串 - 它们通常是资源。）

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/calculator"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="5dp"
    android:orientation="vertical"
    android:stretchColumns="*">

    <TableRow android:id="@+id/tableRowFieldName"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TextView android:id="@+id/textViewFieldName"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:layout_marginTop="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="5dp"
            android:padding="0dp"
            android:text="Label"
            android:textSize="20dp"
            android:textColor="#FFFFFF"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </TableRow>

    <TableRow android:id="@+id/tableRowDisplay"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TextView android:id="@+id/textViewDisplay"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:layout_margin="5dp"
            android:layout_marginTop="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="5dp"
            android:padding="0dp"
            android:text="Value"
            android:textSize="35dp"
            android:textColor="#FFFFFF"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </TableRow>

    <TableRow android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.2">

        <Button android:id="@+id/buttonA"
            style="@style/ParameterButton"
            android:text="Param A" />

        <Button android:id="@+id/buttonB"
            style="@style/ParameterButton"
            android:text="Param B" />
    </TableRow>

    <TableRow android:id="@+id/tableRow2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.2">

        <Button android:id="@+id/buttonC"
            style="@style/ParameterButton"
            android:text="Param C" />

        <Button android:id="@+id/buttonD"
            style="@style/ParameterButton"
            android:text="Param D" />
    </TableRow>

    <TableRow android:id="@+id/tableRow3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.2">

        <Button android:id="@+id/buttonE"
            style="@style/ParameterButton"
            android:text="Param E" />

        <Button android:id="@+id/buttonF"
            style="@style/ParameterButton"
            android:text="Param F" />
    </TableRow>

    <TableRow android:id="@+id/tableRow4"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.4">

        <ListView android:id="@android:id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:visibility="gone"
            android:layout_weight="1.0" />

        <TableLayout android:id="@+id/calcKeypad"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:stretchColumns="*">

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/button7"
                    style="@style/KeypadButton"
                    android:text="7" />
                <Button android:id="@+id/button8" 
                    style="@style/KeypadButton"
                    android:text="8" />
                <Button android:id="@+id/button9" 
                    style="@style/KeypadButton"
                    android:text="9" />
            </TableRow>

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/button4"
                    style="@style/KeypadButton"
                    android:text="4" />
                <Button android:id="@+id/button5" 
                    style="@style/KeypadButton"
                    android:text="5" />
                <Button android:id="@+id/button6"
                    style="@style/KeypadButton"
                    android:text="6" />
            </TableRow>

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/button1"
                    style="@style/KeypadButton"
                    android:text="1" />
                <Button android:id="@+id/button2" 
                    style="@style/KeypadButton"
                    android:text="2" />
                <Button android:id="@+id/button3" 
                    style="@style/KeypadButton"
                    android:text="3" />
            </TableRow>

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/buttonClear"
                    style="@style/KeypadButton"
                    android:text="C" />
                <Button android:id="@+id/button0" 
                    style="@style/KeypadButton"
                    android:text="0" />
                <Button android:id="@+id/buttonDecimal" 
                    style="@style/KeypadButton"
                    android:text="." />
            </TableRow>
        </TableLayout>

        <LinearLayout android:id="@+id/linearLayoutTotal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">

            <Button android:id="@+id/buttonTotalWeight"
                style="@style/FunctionButton"
                android:text="Function A" />
            <Button android:id="@+id/buttonTotalCost" 
                style="@style/FunctionButton"
                android:text="Function B" />
            <Button android:id="@+id/buttonAbout" 
                style="@style/FunctionButton"
                android:layout_height="0dp"
                android:layout_weight="0.25"
                android:text="Function C" />
        </LinearLayout>
    </TableRow>
</TableLayout>

这使用以下样式（基本上是从原始XML中分解出来的）：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CalcButton">
        <item name="android:textColor">#ffffff</item>
        <item name="android:textSize">15dp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:layout_margin">2dp</item>
    </style>  
    <style name="ParameterButton" parent="CalcButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">0.5</item>
    </style>
    <style name="KeypadButton" parent="CalcButton">
        <item name="android:textSize">20dp</item>
    </style>
    <style name="FunctionButton" parent="CalcButton">
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_weight">0.375</item>
    </style>
</resources>

如果您要将所有这些放入Android项目中，您应该在顶部看到三行两个参数按钮，然后是下面的数字小键盘，键盘右侧有三个功能按钮。基本上无害。 （此外，它只会用于纵向 - 因此不必担心考虑景观。）

但是......要特别注意XML中的 ListView 。你还不会在视觉中看到它，因为它有android:visibility="gone"。我的想法是，在某些时候，我将删除它，然后将数字小键盘（相邻的 TableLayout ）设置为android:visibility="gone"，从而显示列表。

换句话说，理想的效果是使列表和数字小键盘占据完全相同的空间，这样我就可以随意在两者之间来回切换。

我遇到的问题是 ListView ，一旦填充，似乎意图占据整个表的整个高度，消除不良参数按钮并带来三个功能按钮骑行。

您可以通过绑定一个非常基本的 ArrayAdapter （我使用android.R.layout.simple_list_item_1和android.R.id.text1）并以其方式抛出一个基本的String数组来看到这一点。现在，手动将gone分配从列表移到相邻的表格布局（或在代码中执行）。

设置一个固定的高度似乎是不可能的，因为这应该适用于各种显示器。事实上，我甚至尝试过可能是误入歧途的努力：

ListView list = (ListView) findViewById(android.R.id.list);
TableLayout calcKeypad = (TableLayout) findViewById(R.id.calcKeypad);

list.layout(calcKeypad.getLeft(), calcKeypad.getTop(), calcKeypad.getRight(), calcKeypad.getBottom());
calcKeypad.setVisibility(View.GONE);
list.setVisibility(View.VISIBLE);

不，这也没有帮助。

与the documentation保持一致，我甚至给了 ListView 正确的ID，因为我想自定义其布局。当然我没有使用 ListActivity ，所以在这种情况下也许并不重要。 （我只是使用常规活动。是的，我尝试将其更改为 ListActivity 。没有骰子。）

尽管如此，我仍然对这是导航错误完全开放。 （事实上​​，我指望它。）我只是在它成为头部击中近视墙的模式。 “必须有一个更好的方法！”

再次，请记住，我正在努力保持布局流畅，以便它适用于各种显示尺寸（不是平板电脑，只是手持设备），因此选择的布局。如果有更好的方法可以实现相同的视觉效果，那我就全都听见了。

结论：如何使 ListView 仅占用相邻计算器键盘占用的区域（ TableLayout ）？

线索/答案/指导赞赏！

3 个答案:

答案 0 :(得分：2)

您的布局存在一些问题，但我并没有花费大量时间来解决您遇到的各种layout_weight和layout_height情况。我认为你可能能够让这个工作，但我采取了一些不同的方法。

我将布局分成了底部三个元素上方的一系列行。基本上你有：

TextView-------------------------------
TextView-------------------------------
LinearLayout---------------------------
LinearLayout---------------------------
LinearLayout---------------------------
---------------------------------------
TableLayout and ListView | LinearLayout

我并不是说这是最有效的布局，但是每个布局元素都有一个工作，所以你可能需要花一些时间来用更高效的东西替换它们。

特别是，在参数按钮和功能按钮中使用LinearLayout可以充分利用layout_weight功能。它不是在LinearLayout的子类的其他布局中不可用（您可能不知道TableRow是LinearLayout的子类，这就是为什么layout_weight在那里工作但不是在RelativeLayout）中，以百分比为基础细分可用空间的能力似乎适合于这些元素。

可能会替换持有数字按钮的TableLayout，但是它在为不同大小的视图中的按钮分配空间方面做得很好，并且它还可以很好地间隔行以填充可用空间。同样，可能很难替换它。

我所做的是将TableLayout替换为具有适当对齐属性的RelativeLayout。这样您就可以将功能按钮LinearLayout放在右边框上，让ListView或TableLayout消耗参数按钮下方和功能按钮左侧的剩余空间。我不是说你必须这样做，但是它会在原始设计上节省一些额外的布局元素，并完成你正在寻找的工作。

这是我所做的一个后续工作。请注意，我在您的ParameterButton样式中添加了layout_height wrap_content个ListView。此外，TableLayout和<?xml version="1.0" encoding="utf-8"?> <resources> <style name="CalcButton"> <item name="android:textColor">#ffffff</item> <item name="android:textSize">15dp</item> <item name="android:textStyle">bold</item> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">fill_parent</item> <item name="android:layout_margin">2dp</item> </style> <style name="ParameterButton" parent="CalcButton"> <item name="android:layout_height">wrap_content</item> <item name="android:layout_width">0dp</item> <item name="android:layout_weight">0.5</item> </style> <style name="KeypadButton" parent="CalcButton"> <item name="android:textSize">20dp</item> </style> <style name="FunctionButton" parent="CalcButton"> <item name="android:layout_height">0dp</item> <item name="android:layout_weight">0.375</item> </style> </resources> 在此布局中均可见。您可能需要在布局或代码中进行调整。

风格：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/calculator"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="5dp"
    android:orientation="vertical"
    android:stretchColumns="*">
        <TextView android:id="@+id/textViewFieldName"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:layout_marginTop="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="5dp"
            android:padding="0dp"
            android:text="Label"
            android:textSize="20dp"
            android:textColor="#FFFFFF"
            android:textAppearance="?android:attr/textAppearanceMedium" />
        <TextView android:id="@+id/textViewDisplay"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:layout_margin="5dp"
            android:layout_marginTop="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="5dp"
            android:padding="0dp"
            android:layout_below="@id/textViewFieldName"
            android:text="Value"
            android:textSize="35dp"
            android:textColor="#FFFFFF"
            android:textAppearance="?android:attr/textAppearanceLarge" />

    <LinearLayout android:id="@+id/tableRow1"
        android:layout_below="@id/textViewDisplay"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button android:id="@+id/buttonA"
            style="@style/ParameterButton"
            android:layout_height="wrap_content"
            android:text="Param A" />
        <Button android:id="@+id/buttonB"
            style="@style/ParameterButton"
            android:text="Param B" />
    </LinearLayout>

    <LinearLayout android:id="@+id/tableRow2"
        android:layout_below="@id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button android:id="@+id/buttonC"
            style="@style/ParameterButton"
            android:text="Param C" />
        <Button android:id="@+id/buttonD"
            style="@style/ParameterButton"
            android:text="Param D" />
    </LinearLayout>

    <LinearLayout android:id="@+id/tableRow3"
        android:layout_below="@id/tableRow2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button android:id="@+id/buttonE"
            style="@style/ParameterButton"
            android:text="Param E" />
        <Button android:id="@+id/buttonF"
            style="@style/ParameterButton"
            android:text="Param F" />
    </LinearLayout>



        <ListView android:id="@android:id/list"
            android:layout_below="@id/tableRow3"
            android:layout_toLeftOf="@+id/linearLayoutTotal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

        <TableLayout android:id="@+id/calcKeypad"
            android:layout_below="@id/tableRow3"
            android:layout_toLeftOf="@id/linearLayoutTotal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:stretchColumns="*">

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/button7"
                    style="@style/KeypadButton"
                    android:text="7" />
                <Button android:id="@+id/button8" 
                    style="@style/KeypadButton"
                    android:text="8" />
                <Button android:id="@+id/button9" 
                    style="@style/KeypadButton"
                    android:text="9" />
            </TableRow>

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/button4"
                    style="@style/KeypadButton"
                    android:text="4" />
                <Button android:id="@+id/button5" 
                    style="@style/KeypadButton"
                    android:text="5" />
                <Button android:id="@+id/button6"
                    style="@style/KeypadButton"
                    android:text="6" />
            </TableRow>

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/button1"
                    style="@style/KeypadButton"
                    android:text="1" />
                <Button android:id="@+id/button2" 
                    style="@style/KeypadButton"
                    android:text="2" />
                <Button android:id="@+id/button3" 
                    style="@style/KeypadButton"
                    android:text="3" />
            </TableRow>

            <TableRow
                android:layout_weight="0.25"
                android:gravity="center">
                <Button android:id="@+id/buttonClear"
                    style="@style/KeypadButton"
                    android:text="C" />
                <Button android:id="@+id/button0" 
                    style="@style/KeypadButton"
                    android:text="0" />
                <Button android:id="@+id/buttonDecimal" 
                    style="@style/KeypadButton"
                    android:text="." />
            </TableRow>
        </TableLayout>

    <LinearLayout android:id="@id/linearLayoutTotal"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_below="@id/tableRow3"
        android:layout_alignParentRight="true"
        android:orientation="vertical">

        <Button android:id="@+id/buttonTotalWeight"
            style="@style/FunctionButton"
            android:text="Function A" />
        <Button android:id="@+id/buttonTotalCost" 
            style="@style/FunctionButton"
            android:text="Function B" />
        <Button android:id="@+id/buttonAbout" 
            style="@style/FunctionButton"
            android:layout_height="0dp"
            android:layout_weight="0.25"
            android:text="Function C" />
    </LinearLayout>

</RelativeLayout>

布局：

{{1}}

答案 1 :(得分：1)

原因是布局宽度设置为填充父级 改为使用换行内容，并在将它们置于水平线性布局

之后将权重1分配给表格布局和llistview

答案 2 :(得分：1)

乔，

有许多解决方案可以提供您所寻求的解决方案。看完你的布局后，我想知道你为什么使用TableLayout？我的意思是，乍一看，计算器就像桌子一样。你自己考虑过其他布局解决方案吗？你肯定提到其他人都可以，但真正的问题是你如何考虑他们或你对他们的了解。由于缺乏这方面的信息，我将重点介绍不同类型的布局及其特殊优势。我以这种方式解决它的原因是选择错误的布局类型会导致大多数布局问题。

<强>的FrameLayout

这种布局对某些人来说很棘手。如果您有多个大小相同的视图，那就太棒了。无论大小如何，直接孩子的位置始终相同（框架的左上角）。 FrameLayout的缺点是，如果孩子们同时在屏幕上，你必须手动定位他们。许多开发人员（错误地）将它们粘在容器内以便保持定位。

<强>的LinearLayout

最常用的布局之一。如果您具有必须线性增长父级的类似大小的视图，则LinearLayouts特别棒。许多新手开发人员使用LinearLayout和layout_weight来处理所有事情。根据谷歌本身的说法，在很多情况下，事情并没有真正线性增长，layout_weight效率相对较低。

<强> RelativeLayout的

一种出色的布局，通过相对定位提供极大的灵活性。定位基于先前声明的视图ID或父属性。如果您的定位基于同级属性，则最好使用此布局。它也不需要layout_weight，但允许您使用它。这里最重要的是订购。如果您的视图未在XML中正确排序，则它们无法正确呈现或出错。订购取决于哪些观点决定了您的其他属性。

<强> TableLayout

为布局提供网格/单元格结构的布局。它的大小完全取决于父级，并且在大多数情况下，定位基于前一个单元格。许多开发人员学到的东西之一就是隐藏的视图和不同大小的单元格会很麻烦。这最适合显示数据或其接口。

现在，针对您的解决方案

  1. 如果您仍然热衷于使用TableLayout，请将ListView的可见性设置为"invisible"而不是"gone"。这两者之间的区别是微妙但重要的。 "invisible"表示即使它不可见，它仍会占用布局。 "gone"表示它丢失了所有布局属性，并且在显示对象时必须手动设置它们。

  2. 鉴于您的特殊要求，我认为RelativeLayout最适合定位。它不要求您使用layout_weight来优化布局和测量通过。它允许您根据屏幕上其他视图和布局的大小和位置进行调整。你只需要确定你的锚视图是什么并从那里开始。然后，您可以使用layout_below

    3. 放置ListView

    如果您需要有关这些布局的更多信息，我很乐意为您提供官方消息来源。

    希望这有帮助， FuzzicalLogic

相关问题
最新问题