Android计算器界面的设计——表格布局TableLayout实操

任务目标

使用TextView、Button等实现一个计算器界面，界面如图1所示。

图1 计算器界面效果图

任务分析

界面整体使用表格布局，第一行使用一个TextView控件，横跨4列，中间4行4列，最后一行第1个控件横跨2列。

任务实施

1）新建工程，选择“Empty Views Activity”，指定工程名为Calucator，包名为cn.edu.jssvc.calucator。
2）使用线性布局设计界面，打开activity_mail.xml，切换为Code视图，将Code中的约束布局（ConstraintLayout）改为表格布局（TableLayout），并将其中的控件删除，设置该TableLayout的属性android:stretchColumns=“0,1,2,3”。
3）将Palette区的TableRow拖到Component Tree，并设置TableRow的属性android:layout_weight=“1”，使这5行平分整个屏幕，如图2、图3所示。

图2 TableRow设置

图3 TableRow属性设置
4）将TextView控件拖入第1行，设置其android:layout_span属性为4，即跨越4列：

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_span="4"
    android:gravity="end|bottom"
    android:text="0"
    android:textSize="60sp" />

5）将4个Button拖入第2行，Button的宽度高度属性均设置为match_parent，android:textSize设置为"34sp"，第3行、第4行、第5行同样也是这样处理，第6行只需拖入3个Button，但第1个Button需要占据2列，设置其android:layout_span=“2”。
6）最后依次修改Button的text属性，完成后界面如图4所示。

图4 计算器界面运行效果图