基于Android平台利用表格布局制作简易计算器界面

周辉奎

摘   要：Android程序设计中，有6大布局方法。文章重点论述了基于Android平台利用表格布局来制作一个简易的计算器界面，涉及详细的操作步骤，对计算器界面进行有效美化和优化，并做出总结。

关键词：Android程序设计;表格布局;计算器界面

1    布局介绍

在Android程序设计中，有6大布局方法，分别是线性布局LinearLayout、相对布局RelativeLayout、表格布局TableLayout、帧布局FrameLayout、网格布局GridLayout和绝对布局AbsoluteLayout。选定了布局方法，再往布局里面插入一个个的控件，当然如果是复杂的界面，还会涉及布局之间的嵌套，也就是布局里还有布局。

Android界面开发一般是通过XML布局文件来实现的，比如activity_main.xml，该文件在项目文件里的路径是E：＼ECLIPSE JAVA＼Test1＼res＼layout＼activity_main.xml。如果Android程序APP涉及多個界面，那么还要另外再新建多个相应的布局界面。新建：右击项目文件里的layout，选择New—Android XML File，再输入布局文件名，要求文件名以小写字母开头进行命名，其他字符只能包含小写字母、数字0～9或下划线，如果布局文件名包括其他字符都会报错。最后，根据界面的特点，选择适配的布局方法，默认的是线性布局LinearLayout（常用方法），也可以选择相对布局RelativeLayout或者其他布局方法，从而新建好一个布局文件[1]。

新建完布局文件后，项目中可能会存在多个布局文件，设置程序运行后，首次看到的界面为某布局文件test1.xml。打开后台Java Activity代码，该文件位于项目文件里的路径是在E：＼ECLIPSE JAVA＼Test1＼src＼com＼example＼test1＼MainActivity.java，修改其中的代码setContentView（R.layout.activity_main），改成setContentView（R.layout.test）。

新建完布局文件后，就可以对布局文件进行设计。常见的设计方法有两种：（1）利用可视化的界面Graphical Layout进行控件的拖拽，然后在属性栏修改布局和控件的相关属性，如宽度、高度、字体大小、文字内容、背景颜色、文字颜色等属性，方便、快捷。（2）利用代码界面进行代码的编写，对程序的编写能力要求较高，但是通过长期的训练，可以大大提升程序的编码能力，以及软件开发能力，所以笔者强烈建议通过代码编写界面来开发Android程序APP的界面。如果是初学者，建议还是先用第一种方法，利用可视化的界面进行控件的拖拽，简单明了、方便快捷，可以增强开发设计APP界面的自信心，建议后期采用第二种方法，对自己的专业能力也是一个提高的过程。

2    表格布局概述

表格布局（TableLayout）是让控件以表格的形式来排版件的，只要将控件放在单元格中，控件就可以整齐的按行和列进行排列。如果某Android程序APP界面的排版是非常规整的，具有明显的行和列之分，就可以选择利用表格布局为技术来设计与制作。在TableLayout中，行数由TableRow对象控制的，即布局中有多少TableRow对象，就有多少行。在TableRow控件里再设置列，如android：layout_column=“0”，表示表示在第1列（下标从0开始）。注意表格布局不能跨行，但可跨列android：layout_span=“列数”。

常用属性：android：stretchColumns=“1”，表示第2列拉伸（拉伸后，该行所有控件占满屏幕宽度。）若某行有多个控件被拉伸，则用逗号分开。如android：stretchColumns=“2，3”，表示第3列、第4列拉伸（拉伸后，该行所有控件占满屏幕宽度）。

3    利用Android表格布局制作计算器界面

本文以制作一个简易的计算器界面为案例，来讲解其中的制作要领，如图1所示。由于计算器界面的按钮排版布局特点是非常明显的，排列是非常规整的，具有明显的行和列之分，所以可以选择利用表格布局为技术来设计与制作[2]。

将计算器界面中的按钮全部用表格布局来制作，计算器界面的详细制作步骤如下：

（1）先把文本控件TextView拖进来，设置好高度android：layout_height="wrap_content"和宽度android：layout_width="wrap_content"，高度和宽度都是包裹文字内容，即文字多长则显示多长，最后设置右对齐android：gravity="right"，设置好文本内容android：text="90"。

（2）因为在表格布局中的每一行按钮都是水平拉伸占满整个屏幕的宽度，所以需在表格布局里增加一条代码，android：stretchColumns="0，1，2，3"，其中0，1，2，3分别表示第1列到第4列全部被拉伸。

（3）因为该界面存在5行按钮，而在表格布局中TableRow标签表示一行，所以表格布局代码里有5段TableRow标签，即有5段……布局代码，表示该表格布局文件有5行。

（4）因为每一行都是居中对齐的，故应该在5段TableRow标签里各增加一条代码android：gravity="center_horizontal"。

（5）因为第一行有4个按钮，故在第一段TableRow标签里有4段代码，分别表示4个按钮，设置好按钮的内容android：text。第2行到第4行按钮的制作方法如同第1行一样。

（6）对于第5行的“清除”按钮，因为其占了1行4列，涉及跨列，故应该在该TableRow标签里增加一条代码android：layout_span="4"。

4    对计算器界面进行美化、优化

由于Android自带的按钮不够美观，为了制作出更好的人机交互友好界面，可以通过以下步骤对原计算器界面进行美化、优化。

（1）可以利用Photoshop图片设计软件，手工制作两张美观点的按钮背景图片。

（2）除了“清除”按钮用soil_backgroud_content2.9.png背景图片，其他的按钮背景图片统一用cheng.jpg。

（3）两种图片分别存放在E：＼ECLIPSE JAVA＼Test1＼res＼drawable-hdpi＼路径里面。

（4）调整所有按钮的文本颜色为白色，即android：textColor="#FFFFFF"。

（5）设置“清除”按钮的高度android：layout_height="wrap_content"和宽度android：layout_width="wrap_content"，高度和宽度都是包裹文字内容，即文字多长则显示多长。

（6）设置其他按钮的高度android：layout_height="60dp"和宽度android：layout_width="60dp"。

（7）設置“清除”按钮的背景图片，即android： background="@drawable/soil_backgroud_content2"。

（8）设置其他按钮的背景图片，即android：back-ground="@drawable/cheng"。

5    结语

在Android程序的界面设计中，布局方法有6种方法，应该根据界面的不一样特点，选择相适合的布局方法。有时，同一个界面，可以采取多个布局方法来排版。对于一些复杂的界面，还会涉及布局之间的嵌套，应该灵活应变进行选择判断。

[参考文献]

[1]朱生，牟星亮，单康康.基于Android平台的应用程序开发研究[J].网络安全技术与应用，2013（10）：46-47.

[2]刘开元.（简易）计算器的编程设计[J].数字技术与应用，2018（2）：174-175.