android - 异构网格布局

Question

我正在尝试实现以下布局:

我猜GridLayout适合我的需要，但经过 2 小时的努力，我什至无法创建类似的布局。布局错误地调整自身大小，它超出了手机的屏幕而且它也不跨越指定的行和列。

在这里我选择了一个按钮，以便您可以看到它是如何超出边界的:

这里是相关的 xml 代码:https://gist.github.com/2834492

我已经使用嵌套的线性布局实现了类似的布局，但无法针对不同的屏幕尺寸正确调整大小。

---

更新 - 近似 LinearLayout 实现:

XML 代码:https://gist.github.com/cdoger/2835887 但是，问题是它没有正确调整自己的大小，这里有一些屏幕配置不同的屏幕截图:

---

TLDR: 有人可以向我展示一个像第一张图片中那样使用 GridLayout 的异构布局实现吗？

Answer 1

您面临的问题是由于不当使用 GridLayout。 GridLayout 用于在网格中显示其子项，您试图在不扩展 GridLayout 的情况下覆盖它。虽然您想要的可以在代码中完成(使用 numcolumns 和 columnsize)，但如果没有大量代码，它对于多种屏幕尺寸将无用。

唯一不需要大量黑客攻击的适当解决方案是明智地使用 LinearLayout 和 RelativeLayout。不应仅使用 LinearLayout，因为它用于将项目放在一行中(仅水平或垂直)。当您尝试执行底部的四个按钮时，这一点变得尤为明显。虽然上面的按钮可以通过 LinearLayout 轻松完成，但对于底部的四个按钮，RelativeLayout 是您所需要的。

注意: 对于那些没有使用它们的经验的人来说，RelativeLayout 可能有点棘手。一些陷阱包括: child 重叠、 child 离开屏幕、高度和宽度渲染应用不当。如果您想要一个示例，请告诉我，我将编辑我的答案。

最后说明: 我完全赞成以独特的方式利用当前的框架对象，并且真的更喜欢提供所要求的解决方案。然而，鉴于问题的限制，该解决方案是不可行的。

(修订)解决方案 1

经过昨晚的深思熟虑，这可能是用一个纯线性布局来完成的。虽然我不喜欢这个解决方案，但它应该是多屏友好的，并且不需要我使用任何工具。应谨慎使用过多的 LinearLayout，因为根据 Google 的开发人员的说法，由于 layout_weight 属性，它可能会导致加载缓慢的 UI。当我回到家时，将提供第二个使用 RelativeLayout 的解决方案。 现已测试这可在所有屏幕尺寸和方向上提供所需的布局参数。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="0dp" 
            android:layout_weight="1" 
            android:orientation="horizontal"> 
            <Button 
                android:id="@+id/Button01" 
                android:layout_width="0" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />     
            <Button 
                android:id="@+id/Button02" 
                android:layout_width="0" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />     
        </LinearLayout> 
        <Button 
            android:id="@+id/button3" 
            android:layout_width="match_parent" 
            android:layout_height="0dp"
            android:layout_weight="1" 
            android:text="Button" />   
        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="0dp" 
            android:layout_weight="1.00"
            android:orientation="horizontal">  
            <Button 
                android:id="@+id/button1" 
                android:layout_width="0dp" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />   
            <Button 
                android:id="@+id/button2" 
                android:layout_width="0dp" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />     
        </LinearLayout>
    </LinearLayout>    
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="0dp" 
        android:layout_weight="1" 
        android:orientation="horizontal">     
        <LinearLayout 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:orientation="vertical" >    
            <Button 
                android:id="@+id/button4" 
                android:layout_width="match_parent" 
                android:layout_height="0dp"
                android:layout_weight="1" 
                android:text="Button" />     
            <Button 
                android:id="@+id/button5" 
                android:layout_width="match_parent" 
                android:layout_height="0dp" 
                android:layout_weight="2" 
                android:text="Button" />     
        </LinearLayout>     
        <LinearLayout 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:orientation="vertical" > 
            <Button 
                android:id="@+id/button6" 
                android:layout_width="match_parent" 
                android:layout_height="0dp" 
                android:layout_weight="2" 
                android:text="Button" /> 
            <Button 
                android:id="@+id/button7" 
                android:layout_width="match_parent" 
                android:layout_height="0dp" 
                android:layout_weight="1" 
                android:text="Button" /> 
        </LinearLayout> 
    </LinearLayout> 
</LinearLayout> 

解决方案 1 说明

LinearLayouts 的关键是将您的命令定义为单独的布局并将其他布局嵌套在其中。当您将约束应用于更多维度时，必须添加更多 LinearLayout 来封装其他维度。对你来说，为了保持这个比例，再多两个 parent 是至关重要的。当您有使用除整数值以外的任何值来利用 layout_weight 时，一个很好的指示何时应该添加另一个级别。它变得很难正确计算。从那里将其分成几列相对简单。

解决方案 2(失败)

虽然我能够使用 RelativeLayout 和“struts”实现理想的结果，但我只能使用高度为 2 个按钮的倍数的布局来实现。这样的技巧会很棒，因为布局级别大大降低，所以我将研究一个纯 XML 解决方案，并在我实现它时在此处发布答案。同时，上面的 LinearLayout 应该很适合你的需求。