在 android 上设置计算器按钮布局

Question

刚开始学习Android。首先，我只想创建一个计算器应用程序，类似于我们在库存 android 手机中获得的应用程序。我使用了以下布局：

包含两行的垂直布局是：
- 将结果显示为水平布局的文本视图
- 两列水平布局：
  - Table 布局包含按钮 0-9，'.'和“=”，每行有 3 个按钮
  - Table 包含 DEL、+、-、x 和 / 按钮的布局。

我想要正确对齐第一个 table 布局的 4 行和第二个 table 布局的 5 行。我应该删除填充 space 吗？还是我需要手动设置按钮的最小尺寸？我设置的布局是否正确？

`

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="112dp"
            android:id="@+id/textView" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true">

            <TableRow android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <Button
                    android:text="7"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button7" />

                <Button
                    android:text="8"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button8" />

                <Button
                    android:text="9"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button9"
                    android:elevation="0dp" />

            </TableRow>

            <TableRow android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:text="4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button4" />

                <Button
                    android:text="5"
                    android:id="@+id/button5"
                    android:layout_height="match_parent" />

                <Button
                    android:text="6"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button6" />

            </TableRow>

            <TableRow android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:text="1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button1" />

                <Button
                    android:text="2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button2" />

                <Button
                    android:text="3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button3" />

            </TableRow>

            <TableRow android:layout_height="wrap_content"
                android:layout_width="match_parent">

                <Button
                    android:text="."
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/buttonDot"
                    android:minHeight="48dp" />

                <Button
                    android:text="0"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button0" />

                <Button
                    android:text="="
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/buttonequals"/>

            </TableRow>
        </TableLayout>

        <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:text="DEL"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/buttonDelete" />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:text="/"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/buttonDivide" />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:text="x"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/buttonMultiply" />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:text="+"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/buttonPlus" />

            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:text="-"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/buttonSubtract" />
            </TableRow>
        </TableLayout>

    </LinearLayout>

</LinearLayout>

`

Current Layout

Required layout

Answer 1

您可以设置按钮的高度，或添加填充。

顺便说一句，我想 parent 的高度为 wrap_content 和 children 的高度为 match_parent 是合法的，但有点奇怪。我会给 children 一个固定的高度，或者 wrap_content 有足够的填充以获得你想要的外观。

Answer 2

下面的代码可以完成我猜的工作，

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:andriod="http://schemas.android.com/apk/res-auto"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:orientation="horizontal"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context=".MainActivity">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:id="@+id/resultview"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:id="@+id/textView" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_below="@+id/resultview"
            android:layout_alignParentBottom="true"
            android:layout_height="wrap_content">

            <TableLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentTop="false"
                android:layout_alignParentBottom="true"
                android:background="#000000">



                <TableRow android:layout_width="match_parent"
                    android:minHeight="100dp"
                    android:orientation="vertical"
                    android:id="@+id/row1"
                    android:background="#000000">
                    <Button
                        android:text="7"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button7" />
                    <Button
                        android:text="8"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:id="@+id/button8" />

                    <Button
                        android:text="9"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button9"
                        android:elevation="0dp" />

                </TableRow>
                <TableRow android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/row2"
                    android:minHeight="100dp"
                    android:layout_below="@+id/row1">

                    <Button
                        android:text="4"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button4" />

                    <Button
                        android:text="5"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:id="@+id/button5"
                        android:layout_height="match_parent" />

                    <Button
                        android:text="6"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button6" />

                </TableRow>

                <TableRow android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="100dp">

                    <Button
                        android:text="1"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button1" />

                    <Button
                        android:text="2"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button2" />

                    <Button
                        android:text="3"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button3" />

                </TableRow>

                <TableRow android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:background="#000000">

                    <Button
                        android:text="."
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonDot"
                        android:minHeight="48dp" />

                    <Button
                        android:text="0"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button0" />

                    <Button
                        android:text="="
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonequals"/>

                </TableRow>
            </TableLayout>

            <TableLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="#000000">

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="80dp">

                    <Button
                        android:text="DEL"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonDelete" />

                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="80dp">

                    <Button
                        android:text="/"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonDivide" />
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="80dp">

                    <Button
                        android:text="x"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonMultiply" />
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="60dp">

                    <Button
                        android:text="+"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonPlus" />

                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp" >

                    <Button
                        android:text="-"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:id="@+id/buttonSubtract" />
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </RelativeLayout>

Answer 3

我建议您可以使用 GridLayout 该视图

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" >
</GridLayout>

https://code.tutsplus.com/tutorials/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout--mobile-8677

http://sampleprogramz.com/android/gridlayout.php

Answer 4

选择自定义视图组和自定义视图 child。您将拥有更大的灵活性和对性能的控制，同时学习对您有益..

顺便说一句，创建自定义组件很容易。

谢谢

在 android 上设置计算器按钮布局

Setting up layout of calculator buttons on android

android

android-layout

padding

android-layout-weight