如何改进我的 XML 设计使其看起来更好
How to improve my XML design so it will look better
我知道我的 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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/layerOne"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">
<TextView
android:id="@+id/resultText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="@string/result"/>
</FrameLayout>
<LinearLayout
android:id="@+id/layerOne"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:orientation="horizontal"
android:layout_above="@id/layerTwo">
<Button
android:id="@+id/buttonZero"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:orientation="horizontal"
android:layout_above="@id/layerThree">
<Button
android:id="@+id/buttonTwo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:id="@+id/buttonEnter"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/buttonClear"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">
<TextView
android:id="@+id/resultText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="@string/result" />
</FrameLayout>
<Button
android:id="@+id/buttonZero"
android:layout_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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>
您的错误是在 layout_weight
旁边使用 wrap_content
作为按钮宽度。布局权重会将所有 extra space 分配给按钮,因此从 wrap_content
开始会影响“额外” space 的计算:单词“Enter”占用的空间比数字“0”多space,所以你少 space 剩下来分配。
将所有 layout_width="wrap_content"
属性更改为 layout_width="0dp"
(无论您在何处使用 layout_weight
)。这将确保按钮的文本内容不会影响它们的最终宽度。
假设您希望前两个具有 3 个大小相同的按钮 - 将 layout_width 设置为 0dp 并将 layout_weight 设置为 1。这将使 LinearLayout 将其分成 3 个大小相同的部分.
对于底行,在第一个按钮上将 layout_width 设置为 0dp,将 layout_weight 设置为 2,在第二个按钮上将 layout_weight 设置为 1。这将使第一个布局占用的 space 数量是第二个布局的两倍,使其等于上面的 2 个按钮。
我知道我的 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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/layerOne"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">
<TextView
android:id="@+id/resultText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="@string/result"/>
</FrameLayout>
<LinearLayout
android:id="@+id/layerOne"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:orientation="horizontal"
android:layout_above="@id/layerTwo">
<Button
android:id="@+id/buttonZero"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:orientation="horizontal"
android:layout_above="@id/layerThree">
<Button
android:id="@+id/buttonTwo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:id="@+id/buttonEnter"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/buttonClear"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">
<TextView
android:id="@+id/resultText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="@string/result" />
</FrameLayout>
<Button
android:id="@+id/buttonZero"
android:layout_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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_width="wrap_content"
android:layout_height="70dp"
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>
您的错误是在 layout_weight
旁边使用 wrap_content
作为按钮宽度。布局权重会将所有 extra space 分配给按钮,因此从 wrap_content
开始会影响“额外” space 的计算:单词“Enter”占用的空间比数字“0”多space,所以你少 space 剩下来分配。
将所有 layout_width="wrap_content"
属性更改为 layout_width="0dp"
(无论您在何处使用 layout_weight
)。这将确保按钮的文本内容不会影响它们的最终宽度。
假设您希望前两个具有 3 个大小相同的按钮 - 将 layout_width 设置为 0dp 并将 layout_weight 设置为 1。这将使 LinearLayout 将其分成 3 个大小相同的部分.
对于底行,在第一个按钮上将 layout_width 设置为 0dp,将 layout_weight 设置为 2,在第二个按钮上将 layout_weight 设置为 1。这将使第一个布局占用的 space 数量是第二个布局的两倍,使其等于上面的 2 个按钮。