0

我一直在开发一个简单的音板应用程序。基本设计是标题的图像视图，然后是 4 行按钮（每行 3 个），这使它看起来类似于旧手机的按钮。在底部，有一个“随机”和“停止”按钮。它们占用的高度空间比上面提到的行略少，但随机按钮是宽度的两倍以填充空间。

为了实现这种外观，我一直在使用嵌套权重和线性布局。但是，经过进一步研究，我发现这对性能不利，因为在我当前的格式中，每个项目都被测量了 8 次。我的 XML 布局代码如下。我已经排除了很多 UI 修饰符，例如按钮上的边距、文本和阴影，以使代码更小。代码可能看起来很长，但重复且易于理解。

<?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"
    android:weightSum="23" >

<!-- Insert Title/Picture in Linear Layout below -->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="9"
    android:background="@drawable/etho_logo"
    android:orientation="horizontal" >
</LinearLayout>

<!-- Insert Sounds/Buttons in Linear Layout below -->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="5"
    android:orientation="vertical"
    android:weightSum="4" >

    <!-- This is the 1st line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />
    </LinearLayout>

    <!-- This is the 2nd line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />
    </LinearLayout>

    <!-- This is the 3rd line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />
    </LinearLayout>

    <!-- This is the 4th line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />
    </LinearLayout>
</LinearLayout>

<!-- Random Button and Stop button below here -->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="9"
    android:orientation="horizontal"
    android:weightSum="3" >

    <Button
        android:id="@+id/bIntro"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/hello_real_select" />

    <Button
        android:id="@+id/bIntro"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/hello_real_select" />
</LinearLayout>

</LinearLayout>

我是 Android 新手，所以即使我尝试过使用相对布局，我也很难使用它。我尝试在线观看教程，但在我的代码中使用它时它仍然看起来不正确。

例如，我的标题图像在我要显示的实际文本上方和下方有额外的空间。在带有权重的线性布局中，它会自动变小以适应我给它的空间。虽然不在RelativeLayout 中。

我想我想在这里问的是：如何使我的 RelativeLayout 项目成为跨几行均匀间隔的按钮（如上例所示），以及如何使 ImageViews 和其他东西实际上自动缩小到我给他们的空间？如果需要更多信息，请随时询问。

4

2 回答 2

1

你是对的，RelativeLayout很难做成像你上面做的那样的表格。 LinearLayout真的很理想，这就是为什么TableLayout和TableRow视图组是LinearLayout. RelativeLayout但是，除了可以提高布局效率之外，我还可以推荐几个替代方案。

首先，您可以消除第二个垂直方向LinearLayout，并将前 4 行按钮的布局权重从 1 更改为 1.25。这会将布局传递的数量从 8 减少到 4，这是您可以为表格做的最好的事情。

<?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"
    android:weightSum="23" >

    <!-- Insert Title/Picture in Linear Layout below -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9"
        android:background="@drawable/etho_logo"
        android:orientation="horizontal" >
    </LinearLayout>

    <!-- This is the 1st line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.25"
        android:orientation="horizontal"
        android:weightSum="3" >

        <!-- 3 buttons here -->

    </LinearLayout>

    <!-- This is the 2nd line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.25"
        android:orientation="horizontal"
        android:weightSum="3" >

        <!-- 3 buttons here -->

    </LinearLayout>

    <!-- This is the 3rd line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.25"
        android:orientation="horizontal"
        android:weightSum="3" >

        <!-- 3 buttons here -->

    </LinearLayout>

    <!-- This is the 4th line of buttons -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.25"
        android:orientation="horizontal"
        android:weightSum="3" >

        <!-- 3 buttons here -->

    </LinearLayout>

    <!-- Random Button and Stop button below here -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9"
        android:orientation="horizontal"
        android:weightSum="3" >

        <Button
            android:id="@+id/bIntro"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />

        <Button
            android:id="@+id/bIntro"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/hello_real_select" />
    </LinearLayout>

</LinearLayout>

另一种选择是使用单个布局来制作“平面”网格（一个ViewGroup自行管理其子项布局到表格中的布局）。如果您的应用程序的目标 API 级别为 14+，您可以查看GridLayout. 如果您的目标是 14 之前的 API 级别，您可能必须自己创建。最后一点，请不要GridLayout与GridView视图组混淆，它是用于列表的，不会完成你想要的。

于 2013-07-21T18:52:50.253 回答
0

建议使用 0dp 的宽度和重量，这应该减少一半的测量次数（因为 wrap_content 需要测量，但 0dp 不需要）

此外，您不需要叠瓦式垂直线性布局，因为它已经处于线性布局中（虽然它更易于阅读，但您可以将其删除以进行优化并调整权重）

于 2013-07-21T19:03:18.647 回答