任務目標

使用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列：

<TextViewandroid: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 計算器界面運行效果圖