在Android上設置計算器按鈕的布局

Question

我剛剛開始學習Android。 首先，我只想創建一個與我們現有的Android手機類似的Calculator應用程序。 我使用了以下布局：

1. 垂直布局連續兩行，分別是：
   • 文本視圖以水平布局顯示結果
   • 兩列的水平布局：
     • 表格布局包含按鈕0-9，“。” 和'='每行3個按鈕
     • 包含DEL，+，-，x和/按鈕的表格布局。

我想要第一個表布局的4行和第二個表布局的5行正確對齊。 我是否要刪除填充空間？ 還是我需要手動設置按鈕的最小尺寸？ 我設置的布局正確嗎？

`

    <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>

`

當前布局

所需的布局

Answer 1

我建議您可以為該視圖使用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 2

您可以設置按鈕的高度，也可以添加填充。

順便說一句，我認為，高度為wrap_content的父母和高度為match_parent孩子是合法的，但有點奇怪。 我會給孩子們一個固定的高度，或者給wrap_content加上足夠的填充，以獲得想要的外觀。

Answer 3

下面的代碼可以完成我想的工作，

<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 4

轉到Custom ViewGroup和Custom Views作為子級。 您將擁有更大的靈活性，並且對性能的控制也將為您帶來好處。

順便說一句，創建自定義組件很容易。

謝謝