目录
- 任务目标
- 任务分析
- 任务实施
任务目标
使用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 计算器界面运行效果图