在这个计算器中哪个布局应该替换 LinearLayout

Posted 2023-04-18

【中文标题】在这个计算器中哪个布局应该替换 LinearLayout

【英文标题】：Which layout should replace LinearLayout in this calculator

【发布时间】：2021-05-24 19:37:40

【问题描述】：

我已经使用 LinearLayout 实现了这个简单的计算器布局，但遇到了来自 android Studio 的“嵌套权重”警告。

这是我第一次尝试为 android 做一些事情，所以我开始阅读：TableLayout 和 GridLayout 会遇到与我理解的相同的问题，并且在任何地方都建议使用 ConstraintLayout。

但我不知道如何使用ConstraintLayout 达到相同的结果。 可能吗？在这种情况下，放弃LinearLayout 是否值得？

我的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:paddingRight="0dp"
        android:paddingTop="10dp"
        android:orientation="vertical"
        android:background="#F5F5F6"

        >
        <TextView
            android:layout_
            android:layout_
            tools:text="2 + 2"
            android:textSize="30sp"
            android:gravity="right"
            android:layout_marginRight="10dp"
            />
        <TextView
            android:layout_
            android:layout_
            tools:text="4"
            android:textSize="30sp"
            android:textColor="#000"
            android:gravity="right"
            android:layout_marginRight="10dp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight="2"
        android:orientation="horizontal"
        >
        <LinearLayout
            android:layout_
            android:layout_
            android:layout_weight="3"
            android:orientation="vertical"
            >
            <LinearLayout
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:background="@color/colorAccent"
                android:orientation="horizontal"
                >

                <Button
                    android:id="@+id/keyboard_num7"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="7"
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num8"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="8"
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num9"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="9"
                    style="@style/Operand"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:background="@color/colorAccent"
                android:orientation="horizontal"
                >

                <Button
                    android:id="@+id/keyboard_num4"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="4"
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num5"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="5"
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num6"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="6"
                    style="@style/Operand"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:background="@color/colorAccent"
                android:orientation="horizontal"
                >

                <Button
                    android:id="@+id/keyboard_num1"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="1"
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num2"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="2"
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num3"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="3"
                    style="@style/Operand"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:background="@color/colorAccent"
                android:orientation="horizontal"
                >

                <Button
                    android:id="@+id/keyboard_num_dot"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="."
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num0"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="0"
                    style="@style/Operand"
                    />
                <Button
                    android:id="@+id/keyboard_num_del"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:text="del"
                    style="@style/Operand"
                    />
            </LinearLayout>

        </LinearLayout>
        <LinearLayout
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:orientation="vertical"
            android:background="#E1E2E1"
            >

            <Button
                android:id="@+id/keyboard_division"
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:text="÷"
                style="@style/Operator"
                />
            <Button
                android:id="@+id/keyboard_multiplication"
                android:layout_
                android:layout_
                android:layout_weight="1"
                style="@style/Operator"
                android:text="×"
                />
            <Button
                android:id="@+id/keyboard_minus"
                android:layout_
                android:layout_
                android:layout_weight="1"
                style="@style/Operator"
                android:text="−"
                />
            <Button
                android:id="@+id/keyboard_plus"
                android:layout_
                android:layout_
                android:layout_weight="1"
                style="@style/Operator"
                android:text="+"
                />
            <Button
                android:id="@+id/keyboard_equal"
                android:layout_
                android:layout_
                android:layout_weight="1"
                style="@style/Equal"
                android:text="="
                />

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

【问题讨论】：

您是否在 ConstraintLayout 中发现了阻止您执行此操作的任何内容？

@MartinMarconcini 不，我缺乏知识阻止了我。现在我做到了（请参阅下面的答案），但仍有很多问题。

【参考方案1】：

好吧，回答我自己的问题“如何使用ConstraintLayout 达到相同的结果”

我已经使用ConstraintLayout 使它变平了，但仍然不知道它是否值得，以及如何决定在可以使用任何布局时使用哪种布局。

从性能的角度来看，使用大小为 0 的 app:layout_constraintGuide_percent 和/或 chainStyle="spread_inside" 的准则在某种程度上比“嵌套权重”更好。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineH"
        android:layout_
        android:layout_
        app:layout_constraintGuide_percent="0.33"
        android:orientation="horizontal"
        />
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineV"
        android:layout_
        android:layout_
        app:layout_constraintGuide_percent="0.75"
        android:orientation="vertical"
        />

    <TextView
        android:id="@+id/formula"
        android:layout_
        android:layout_
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/result"
        app:layout_constraintVertical_chainStyle="packed"
        tools:text="2+2"
        android:textSize="36sp"
        android:gravity="right"
        android:layout_marginRight="10dp"
        />
    <TextView
        android:id="@+id/result"
        android:layout_
        android:layout_
        app:layout_constraintTop_toBottomOf="@id/formula"
        app:layout_constraintBottom_toTopOf="@id/guidelineH"
        app:layout_constraintVertical_chainStyle="packed"
        tools:text="4"
        android:textSize="30sp"
        android:textColor="#000"
        android:gravity="right"
        android:layout_marginRight="10dp"
        />
    <Button
        android:id="@+id/keyboard_num7"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num8"
        app:layout_constraintTop_toBottomOf="@id/guidelineH"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="7"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num8"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num5"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num7"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num9"
        app:layout_constraintTop_toBottomOf="@id/guidelineH"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="8"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num9"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num6"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num8"
        app:layout_constraintRight_toLeftOf="@id/guidelineV"
        app:layout_constraintTop_toBottomOf="@id/guidelineH"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="9"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num4"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num5"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num7"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="4"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num5"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num2"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num4"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num6"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num8"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="5"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num6"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num3"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num5"
        app:layout_constraintRight_toLeftOf="@id/guidelineV"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num9"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="6"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num1"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num_dot"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num2"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num4"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="1"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num2"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num0"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num1"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num3"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num5"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="2"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num3"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_num_del"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num2"
        app:layout_constraintRight_toLeftOf="@id/guidelineV"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num6"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="3"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num_dot"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num0"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num1"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="."
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num0"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num_dot"
        app:layout_constraintRight_toLeftOf="@id/keyboard_num_del"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="0"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_num_del"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/keyboard_num0"
        app:layout_constraintRight_toLeftOf="@id/guidelineV"
        app:layout_constraintTop_toBottomOf="@id/keyboard_num3"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="del"
        style="@style/Operand"
        />
    <Button
        android:id="@+id/keyboard_division"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_multiplication"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guidelineH"
        app:layout_constraintLeft_toRightOf="@id/guidelineV"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="÷"
        style="@style/Operator"
        />
    <Button
        android:id="@+id/keyboard_multiplication"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_minus"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/keyboard_division"
        app:layout_constraintLeft_toRightOf="@id/guidelineV"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        style="@style/Operator"
        android:text="×"
        />
    <Button
        android:id="@+id/keyboard_minus"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_plus"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/keyboard_multiplication"
        app:layout_constraintLeft_toRightOf="@id/guidelineV"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        style="@style/Operator"
        android:text="−"
        />
    <Button
        android:id="@+id/keyboard_plus"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/keyboard_equal"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/keyboard_minus"
        app:layout_constraintLeft_toRightOf="@id/guidelineV"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        style="@style/Operator"
        android:text="+"
        />
    <Button
        android:id="@+id/keyboard_equal"
        android:layout_
        android:layout_
        app:layout_constraintTop_toBottomOf="@id/keyboard_plus"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/guidelineV"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintVertical_chainStyle="spread_inside"
        style="@style/Equal"
        android:text="="
        />
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

几个cmets： 1.记住不要在任何地方使用left/right，用start/End替换它们。 （除非您针对 API 16

链/指导线是否比嵌套权重更好？是的。 Android 显示布局的时间很大程度上受布局深度（嵌套的东西）的影响，因为所有这些最终都是 List，并且说列表必须迭代 N 次。现在，还有另一个方面不仅仅是关于深度......

... 即 Measure pass（测量一个小部件需要/拥有多少空间），然后是一个 Layout pass（决定每个小部件相对于另一个放置的位置(s))。现在这些都需要时间，要衡量你必须遍历每个视图并询问“你需要什么尺寸？”，所有这些都考虑到其他视图。那么一旦你知道了这一点，你就必须看看：“这合适吗？”因为一个视图可以要求 1000px 但如果只有 100 个可用.. 引擎应该做什么？这意味着您必须遍历视图层次结构并迭代这些视图...

此外，这些视图可能会“包装内容”，所以......你还不知道它们需要多少空间......最后，所有这一切都需要时间，如果有变化（比如您更改视图的大小），整个事情必须重新计算。这就是 Constraint Laytou 提供优势的地方。首先是 flat(ter)，这意味着更少的嵌套迭代。但它也由 Cassowary 算法 (iirc) 解决，这意味着您提供一些输入并获得输出。以我的经验，这通常比任何其他形式的布局都快得多（小型 LinearLayouts 的缩写......）

总之，它可能更好，但在实践中，您必须考虑您的约束布局是否超级复杂或嵌套过多（有时需要），那么它可能不会更高效。重量非常重（因为在知道有多少空间可以“重量”之前必须进行大量计算）。总而言之，如果可能的话，我会使用 ConstraintLayout 版本。