简单计算器的实现之界面设计

一个简单的计算器，具体实现的功能包括加、减、乘、除、清空。

界面效果图如下：

Component Tree如下：

 

设计一：

使用LinearLayout（vertical）-->TableLayout-->TableRow布局：

<?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_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jkxy.calculator.MainActivity">
    
    <!--用于显示计算结果-->
    <TextView
        android:id="@+id/tvScreen"
        android:background="#eee"
        android:gravity="right|bottom"  <!--gravity属性使TextView中的子元素处于靠右、靠下的位置-->
        android:textSize="60dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="" />
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/btn7"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"   <!--TableRow的四个Button的权重都设为1，四个Button“均分”TableRow-->
                android:text="7"/>
            <Button
                android:id="@+id/btn8"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="8"/>
            <Button
                android:id="@+id/btn9"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="9"/>
            <Button
                android:id="@+id/btnAdd"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="+"/>
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/btn4"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="4"/>
            <Button
                android:id="@+id/btn5"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="5"/>
            <Button
                android:id="@+id/btn6"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="6"/>
            <Button
                android:id="@+id/btnMinus"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="-"/>
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/btn1"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="1"/>
            <Button
                android:id="@+id/btn2"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="2"/>
            <Button
                android:id="@+id/btn3"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="3"/>
            <Button
                android:id="@+id/btnMul"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="*"/>
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/btnClear"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="C"/>
            <Button
                android:id="@+id/btn0"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="0"/>
            <Button
                android:id="@+id/btnResult"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="="/>
            <Button
                android:id="@+id/btnDiv"
                android:textSize="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="/"/>
        </TableRow>

    </TableLayout>
</LinearLayout>

 设计二：

LinearLayout(vertical)-->LinearLayout(horizontal)布局