如何改进我的 XML 设计使其看起来更好

Posted 2023-04-18

技术标签:

【中文标题】如何改进我的 XML 设计使其看起来更好【英文标题】：How to improve my XML design so it will look better 【发布时间】：2021-12-30 12:29:22 【问题描述】：

我知道我的 android 应用程序有两种设计，但按钮没有完全对齐让我很恼火。首先我使用了 3 层 Linear Layout，但是我的 Enter 按钮看起来不太好。

然后我决定使用相对布局，但这里的问题是中间按钮变得比它的邻居大。即使我的 Enter 按钮看起来不错，我也无法正确安装按钮 #3 和按钮 #1。我试图制作清除按钮

layout_toEndOf = button #1

但我的整个设计在这之后就消失了。

如有任何建议或提示，我将不胜感激！！！

线性布局设计：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_
        android:layout_
        android:layout_above="@id/layerOne"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true">

        <TextView
            android:id="@+id/resultText"
            android:layout_
            android:layout_
            android:layout_gravity="center_horizontal|center_vertical"
            android:text="@string/result"/>
    </FrameLayout>

    <LinearLayout
        android:id="@+id/layerOne"
        android:layout_
        android:layout_
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:orientation="horizontal"
        android:layout_above="@id/layerTwo">

        <Button
            android:id="@+id/buttonZero"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:onClick="pressedZero"
            android:text="@string/_0" />

        <Button
            android:id="@+id/buttonOne"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:text="@string/_1"
            android:layout_weight="1"
            android:onClick="pressedOne"/>

        <Button
            android:id="@+id/buttonClear"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="@string/clear"
            android:onClick="pressedClear"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layerTwo"
        android:layout_
        android:layout_
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:orientation="horizontal"
        android:layout_above="@id/layerThree">

        <Button
            android:id="@+id/buttonTwo"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:text="@string/_2"
            android:layout_weight="1"
            android:onClick="pressedTwo"/>

        <Button
            android:id="@+id/buttonThree"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:text="@string/_3"
            android:layout_weight="1"
            android:onClick="pressedThree"/>

        <Button
            android:id="@+id/buttonPlus"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="@string/plus"
            android:onClick="pressedPlus"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layerThree"
        android:layout_
        android:layout_
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonEnter"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="2"
            android:text="@string/enter"
            android:onClick="pressedEnter"/>

        <Button
            android:id="@+id/buttonStar"
            android:layout_
            android:layout_
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="@string/star"
            android:onClick="pressedStar"/>

    </LinearLayout>

</RelativeLayout>

相对布局设计

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_
        android:layout_
        android:layout_above="@id/buttonClear"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true">

        <TextView
            android:id="@+id/resultText"
            android:layout_
            android:layout_
            android:layout_gravity="center_horizontal|center_vertical"
            android:text="@string/result" />
    </FrameLayout>

    <Button
        android:id="@+id/buttonZero"
        android:layout_
        android:layout_
        android:layout_above="@id/buttonTwo"
        android:layout_alignParentStart="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedZero"
        android:text="@string/_0" />

    <Button
        android:id="@+id/buttonTwo"
        android:layout_
        android:layout_
        android:layout_above="@id/buttonEnter"
        android:layout_alignParentStart="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedTwo"
        android:text="@string/_2" />

    <Button
        android:id="@+id/buttonClear"
        android:layout_
        android:layout_
        android:layout_above="@id/buttonPlus"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedClear"
        android:text="@string/clear" />

    <Button
        android:id="@+id/buttonThree"
        android:layout_
        android:layout_
        android:layout_above="@id/buttonEnter"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_toStartOf="@id/buttonPlus"
        android:layout_toEndOf="@id/buttonTwo"
        android:onClick="pressedThree"
        android:text="@string/_3" />

    <Button
        android:id="@+id/buttonOne"
        android:layout_
        android:layout_
        android:layout_above="@id/buttonThree"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_toStartOf="@id/buttonClear"
        android:layout_toEndOf="@id/buttonZero"
        android:onClick="pressedOne"
        android:text="@string/_1" />

    <Button
        android:id="@+id/buttonPlus"
        android:layout_
        android:layout_
        android:layout_above="@id/buttonStar"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedPlus"
        android:text="@string/plus" />

    <Button
        android:id="@+id/buttonStar"
        android:layout_
        android:layout_
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedStar"
        android:text="@string/star" />

    <Button
        android:id="@+id/buttonEnter"
        android:layout_
        android:layout_
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_toStartOf="@id/buttonStar"
        android:onClick="pressedEnter"
        android:text="@string/enter" />

</RelativeLayout>

【问题讨论】：

以后，提出“如何使这些按钮对齐”这样的问题。看起来更好是主观的，并且会偏离主题，让它们对齐是有责任的。我真的建议使用ConstraintLayout 并掌握它。可以通过嵌套其他类型的布局来完成您正在做的事情，但它可能很难使用，特别是如果您想尝试不同的想法或使您的布局在不同的屏幕尺寸上看起来不错。您可以轻松地做一些事情，例如在可用空间中分布按钮、相对于彼此调整它们的大小等 【参考方案1】：

您的错误是在layout_weight 旁边使用wrap_content 作为按钮宽度。布局权重会将所有额外空间分配给按钮，因此以 wrap_content 开头会影响“额外”空间的计算：单词“Enter”比数字“0”占用更多空间"，所以你有更少的空间来分配。

将您的所有layout_width="wrap_content" 属性更改为layout_width="0dp"（无论您在哪里使用layout_weight）。这将确保按钮的文本内容不会影响它们的最终宽度。

【讨论】：

【参考方案2】：

假设您希望前两个按钮具有 3 个大小相同的按钮 - 将 layout_width 设置为 0dp 并将 layout_weight 设置为 1。这将使 LinearLayout 将其分成 3 个大小均匀的部分。

对于底行，将第一个按钮的 layout_width 设置为 0dp，将 layout_weight 设置为 2，第二个按钮设置为 1。这将使第一个布局占用的空间是第二个的两倍，使其等于上面的 2 个按钮。

【讨论】：

以上是关于如何改进我的 XML 设计使其看起来更好的主要内容，如果未能解决你的问题，请参考以下文章

如何在堆栈视图中设置纵横比？

对各组意见的改进

改进这个“下一个”，“上一个”脚本，使其可以上升到至少 3

如何处理我的导航栏以使其看起来像图片？

浮动后对齐中心项目