基于Android计算器功能的实现(6)

（2）直接用代码生成用户界面。

（3）通过实现用户界面接口形成自定义的用户界面组件。

每种方式各有自己的优缺点及使用环境，下面将结合本文界面实现逐一介绍。 （1）XML文件生成

根据MVC原则，UI应该与程序逻辑相分离，因此，在XML中定义UI结构是强烈推荐的。常用的方式是用图形化的方式来编写布局Layout，这些布局保存在XML文件中，然后编译成资源，在程序中Activity通过setContentView()方法来加载，然后通过findViewByld()方式来获得每一个界面组件的引用。实现过程及步骤。在layout文件夹下定义自己的XML页面，如计算器属性界面的实现如下所示。

xmlns:android=\

android:orientation=\android:layout_width=\ android:layout_height=\ android:background=\>

android:orientation=\ android:layout_weight=\>

android:layout_height=\ android:layout_width=\

android:layout_width=\ android:layout_height=\ android:text=\

android:layout_weight=\ />

………………………

用XML实现用户界面具有以下优点：

a）XML文件结构清晰，易于扩展，系统可扩展性好。

b) 用户界面与业务逻辑完全分离，降低了系统界面与业务逻辑的耦合性。 c）XML文件简单易懂，可维护性好。

23

缺点是：XML文件构建的界面已在配置文件中实现，无法在系统运行时动态更新页面。 （2）用户界面在程序代码实现

对于一些开发者而言，喜欢最直观的方式，既代码中动态生成的方式。这种方式和XML定义是完全等价的。在程序中代码构建的方式还可以在系统运行时动态更改页面布局及效果。页面的各种组件的创建及布局在代码中手动构建过程如下：

AbsoluteLayout= new AbsoluteLayot(this); layout.setBackgroundColor(Color.GRAY); canvasview = new CanvasView(this); layout.addView(canvasview, param); titleView = new TextView(this);

titleLayout.addView(titleView,titleViewLayoutParams);

（3）用户自定义页面组件

由于Android应用程序中的用户界面都是View及View的各个子类如Button,TextView等子View及各种容器ViewGroup如LinearLayout、RealtiveLayout等ViewGroup构成。因此要实现自己定制化的界面及页组件只需要继承View类。自定义组件的步骤是：

a）创建类，并继承Android.view.View。

b) 重写构造函数，wtNumber()、wtOperater()等方法。 c) 注册构件到页面布局文件中。

4.3.3 Android用户界面的实现

每一个应用程序，我们都要设计一个图标，可以说图标是应用程序的名片，好的图标能够很快地吸引用户。

本人在网上寻找了一个图标作为计算器应用的图标，图标如图4-3所示。

图4-3 计算器图标的设计

由于不同的android手机有着不同的分辨率，将不同分辨率的图标图片放置在相应位置，如图4-4所示。

24

图4-4 不同分辨率图标的放置

drawable-hdpi中放置分辨率最高的图标，drawable-mdpi中放置分辨率中等的图标，drawable-ldpi中放置分辨率最低的图标。

图标图片大小的要求如图4-5所示：

图4-5 图标图片大小

在AndroidManifest.xml文件中进行修改，修改情况如下：

其他设置保持不变。

在value中的String.xml中加入app_name，代码为：

结果如图4-6所示：

图4-6 桌面图标显示结果

25

界面设计应该尽量简洁而美观，应该具有良好的交互性。当然，我们每个人可以根据自己的喜好来进行设计，根据我个人的喜好，我最终设计出来的计算器界面如图4-7所示：

图4-7 界面设计结果

从上图中，我们可以很直观的看到，从上到下分别是：显示模块、输入模块、计算模块。 （1）输入模块，主要描述了计算器键盘以及键盘的监听即主要负责读取用户的键盘输入以及响应触屏的按键，当用户点击按键或者屏幕的时候监听器会去调用相应的处理办法，具体的处理办法会在相关的地方进行说明。在本项目中，在触屏上提供了各种功能的按键，分别是C，0，1，2，3，4，5，6，7，8，9，+，-，×，÷，=，Delete, CE。

在整体界面的设置中，我还为各个按键的设置中我还设置了字体的大小，字体的颜色，分别用下列语句实现：

字体大小：android:textSize=\字体颜色：android:textColor = \界面背景：android:background=\

（2）显示模块，主要描述了计算器的显示区，即该区域用于显示用户输入的数据以及最终的计算结果和一些其他信息。显示模块还设置了显示的字体，大小，颜色，同时还设置了显示字体的颜色。具体设置如下代码：

android:layout_width=\ android:layout_height=\ android:gravity=\

android:text=\

android:textSize=\

26

android:layout_marginBottom=\ android:layout_marginLeft=\ android:layout_marginRight=\ android:editable=\ android:cursorVisible=\ android:layout_weight=\ />

显示区中使用的是基于增强型的图形用户界面EditText，利用此类的功能，在显示模块中完成了以上设置。显示模块声明了这些设置，在用户使用系统的时候，会在协同布局设置一同完成以上设置，使用户在使用的时候可以直观的看到显示区的样子。

一般情况下都会选择差不多的字体，所以此处选择的字体和键盘上显示的字体其实是一样的，但是事实上系统中进行了两次声明，即逻辑上这是两种不同的字体，以及设置字符串text为空。显示区和输入模块中的表格一样，同样分别设置了最小显示以及完美显示这两种状态。然后声明了显示区的画法，画法中包括了显示区的两个矩形组成的显示框，显示框的颜色和大小以及显示框中显示的文字所使用的字体，还有文字在显示框中的位置。最后设置了计算模块中的变量得到以及改变显示中所显示的内容的方法，当显示中的内容发生变化时，系统会运行repaint命令来重画显示区，由于使用的是比较低级的方法，所以只能通过整个显示区来实现显示更新这个命令。这样虽然和使用高级的方法相比速度上可能有点慢，但是由于时间相差的不是很多，在用户的正常使用中是不会有所感觉的。以上就是显示模块的具体实现流程，具体的实现方法请参照附件1中的代码。

在我的设计中，将综合使用LinearLayout、TableLayout、EditText和TextView等UI布局和控件来实现计算器的界面。其中，整个界面的布局为LinearLayout，按钮的布局需要对EditText和Button的一些属性进行相关设置，以使得它们满足我们的需要。

具体设计如图4-8所示：

27