Swing-布局管理器应用--WIN7上计算器的UI实现

学完了Swing布局管理器，为了加深理解我决定做一些UI的实现，那就从WIN7上的计算器开始吧！首先，我们来研究一下它的UI。该计算机的UI主要有3个，分别是标准型、科学型和程序员型，如下图所示。

 

 标准型UI

 

科学型UI

 

程序员型UI

首先分析标准型UI：

标准型UI分析

该UI除菜单栏外，分两部分。考虑到它们在不同的UI中都会复用，我们将其分别使用screenPanel和standardPanel来进行实现。screenPanel没什么好说的，使用一个按钮独占整个面板，并设置按钮文字右对齐即可。为了实现按钮的充满效果，srceenPanel需要使用BorderLayout，并将按钮位置设置为CENTER。

standardPanel则是标准的GridBagLayout样式，“MC”按钮位置为（0,0），“=”按钮独占2行1列，“0”按钮独占1行2列，其余按钮各只占1行1列。可以使用一个二维数组来定义这些键位，并在for循环中添加这些按钮。

接下来分析科学型UI：

科学型UI分析

窗体的整体布局和layout不变，而且显示部分不变，复用screePanel即可。下部为一个mainPanel，它内含scitificFunctionPanel和standardNumPanel。而scitificFunctionPanel又内含一个angelPanel。mainPanel也采用GridBagLayout，位置分别位于（0,0）和（1,0）。当然也可以采用BorderLayout，这两个子面板分别放置在WEST和CENTER，那么这样有一个问题，，全屏放大后缩放比例是不一样的，如下图：

使用BorderLayout时的UI放大效果图

而使用GridBagLayout就可以保证这两个子面板的缩放是完全平等的，缩放效果如下图：

使用GridBagLayout时的UI放大效果图

接下来分析程序员型UI：

程序员型UI分析

screenPanel保持不变，而mainPanel这次被划分成3部分，分别是binaryPanel、programFunctionPanel和standardNumPanel。它们分别使用GridBagLayout来实现。

bitPanel的布局分解如下：

bitPanel布局分析

整个界面可分割为32个bitPanel；其中，第0、2行的bitPanel由4个label组成（因为每一位数均具有独立的事件响应）；第1、3行的bitPanel只包含1个label。

programFunctionPanel的布局分解如下：

programFunctionPanel布局分析

可见，除（0,0）和（0,3）的位置上各为1个占据3行1列的panel外，其余位置均为1个button。Panel内包含4个combobox。

好啦，到现在所有的布局都分析完毕啦。下面是最终效果图：

标准型效果

标准型放大效果

科学型效果

科学型放大效果

程序员型效果

程序员型放大效果

具体的代码：

CalculatorUI.java