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

import java.awt.BorderLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.SwingConstants;

/*
* 主UI
*/
public class CalculatorUI extends JFrame {
JPanel contentPane;
private JMenuBar menuBar = new JMenuBar();// 菜单栏
private JButton screenButton = new JButton("0");// 结果显示栏
String[] menuViewItemNames = { "标准型", "科学型", "程序员" };
String[] menuNames = { "查看", "编辑", "帮助" };

MenuItemHandler menuItemHandler = new MenuItemHandler();

public CalculatorUI() {
// 设置窗体属性
setTitle("计算器");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);

// 添加菜单栏和菜单
setJMenuBar(menuBar);
for (String name : menuNames) {
JMenu menu = new JMenu(name);
menuBar.add(menu);
}

// “查看”菜单添加菜单项
for (String name : menuViewItemNames) {
JMenuItem menuItem = new JMenuItem(name);
menuItem.addActionListener(menuItemHandler);
menuBar.getMenu(0).add(menuItem);
}
}

public void setBasicPane() {
System.out.println("setBasicFrame called");
// 设为窗体默认面板
contentPane = new JPanel();
contentPane.setLayout(new GridBagLayout());
setContentPane(contentPane);

// 添加显示按钮
JPanel srceenPanel = new JPanel();
srceenPanel.setBorder(BorderFactory.createEmptyBorder(3, 3, 3, 3));
srceenPanel.setLayout(new BorderLayout());
srceenPanel.add(screenButton, BorderLayout.CENTER);
screenButton.setHorizontalAlignment(SwingConstants.RIGHT);// 文字右对齐

// 添加显示面板
contentPane.add(
srceenPanel,
new GBC(0, 0).setFill(GridBagConstraints.BOTH).setWeight(100,
100));
}

public void setStandardMode() {
System.out.println("切换到标准型");
setTitle("计算机-标准型");
setBasicPane();
StandardNumPanel standardPanel = new StandardNumPanel();
getContentPane().add(
standardPanel,
new GBC(0, 1).setFill(GridBagConstraints.BOTH).setWeight(100,
100));
showFrame();
}

public void setScitificMode() {
System.out.println("切换到科学型");
setTitle("计算机-科学型");
setBasicPane();
JPanel mainPanel = new JPanel();
mainPanel.setLayout(new GridBagLayout());
ScitificFunctionPanel scitificFunctionPanel = new ScitificFunctionPanel();
StandardNumPanel standardNumPanel = new StandardNumPanel();
mainPanel.add(
scitificFunctionPanel,
new GBC(0, 0).setFill(GridBagConstraints.BOTH).setWeight(100,
100));
mainPanel.add(
standardNumPanel,
new GBC(1, 0).setFill(GridBagConstraints.BOTH).setWeight(100,
100));
getContentPane().add(
mainPanel,
new GBC(0, 1).setFill(GridBagConstraints.BOTH).setWeight(100,
100));
showFrame();
}

public void setProgramerMode() {
System.out.println("切换到程序员型");
setBasicPane();
setTitle("计算机-程序员型");
// 添加binaryPanel
JPanel binaryPanel = new BinaryPanel();
getContentPane().add(
binaryPanel,
new GBC(0, 1).setFill(GridBagConstraints.BOTH).setWeight(100,
100).setInsets(5));
//构造mainPanel，使用ProgramFunctionPanel和StandardNumPanel填充
JPanel mainPanel = new JPanel();
mainPanel.setLayout(new GridBagLayout());
mainPanel.add(new ProgramFunctionPanel(), new GBC(0,0).setFill(GridBagConstraints.BOTH).setWeight(100,
100).setInsets(5));
mainPanel.add(new StandardNumPanel(), new GBC(1,0).setFill(GridBagConstraints.BOTH).setWeight(100,
100).setInsets(5));
//添加mainPanel
getContentPane().add(
mainPanel,
new GBC(0, 2).setFill(GridBagConstraints.BOTH).setWeight(100,
100));
showFrame();
}

public void calculateBinary() {

}

public void showFrame() {
pack();
setVisible(true);
}

public static void main(String[] args) {
// TODO Auto-generated method stub

CalculatorUI frame = new CalculatorUI();
// frame.setScitificMode();
frame.setProgramerMode();
// frame.setStandardMode();
// frame.setSize(200, 200);
// frame.setVisible(true);
}

class MenuItemHandler implements ActionListener {
public void actionPerformed(ActionEvent e) {
if (e.getSource() instanceof JMenuItem) {
JMenuItem menuItem = (JMenuItem) e.getSource();
String name = menuItem.getText();
if (name != null && name.equals("标准型")) {

setStandardMode();
} else if (name != null && name.equals("科学型")) {
setScitificMode();
} else if (name != null && name.equals("程序员")) {
setProgramerMode();
// System.out.println("切换到程序员");
}
}
}
}

class BitButtonHandler implements ActionListener {
public void actionPerformed(ActionEvent e) {
if (e.getSource() instanceof JButton) {
JButton button = (JButton) e.getSource();
String text = button.getText();
String newText = text.equals("0") ? "1" : "0";
button.setText(newText);
// 计算数值并更新显示屏
calculateBinary();
}
}
}
}

StandardNumPanel.java

import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.JButton;
import javax.swing.JPanel;

public class StandardNumPanel extends JPanel {

public StandardNumPanel() {
// 设置窗体layout
setLayout(new GridBagLayout());

// add buttons
String[][] btnStrings = { { "MC", "MR", "MS", "M+", "M-" },
{ "←", "CE", "C", "+-", "sqrt" },
{ "7", "8", "9", "/", "%" }, { "4", "5", "6", "*", "1/x" },
{ "1", "2", "3", "-", "=" }, { "0", "0", ".", "+", "=" } };

boolean isBtnEqualsNeedsAdded = true;
boolean isBtnPlusNeedsAdded = true;

for (int i = 0; i < btnStrings.length; i++) {
for (int j = 0; j < btnStrings[0].length; j++) {
if (btnStrings[i][j].equals("=") && isBtnEqualsNeedsAdded) {
add(new JButton(btnStrings[i][j]), new GBC(j, i , 1, 2)
.setFill(GridBagConstraints.BOTH).setInsets(3)
.setWeight(100, 100));
isBtnEqualsNeedsAdded = false;
continue;
}
if (btnStrings[i][j].equals("0") && isBtnPlusNeedsAdded) {
add(new JButton(btnStrings[i][j]), new GBC(j, i , 2, 1)
.setFill(GridBagConstraints.BOTH).setInsets(3)
.setWeight(100, 100));
isBtnPlusNeedsAdded = false;
continue;
}
add(new JButton(btnStrings[i][j]), new GBC(j, i , 1, 1)
.setFill(GridBagConstraints.BOTH).setInsets(3)
.setWeight(100, 100));
}
}
}

public static void main(String[] args) {
// TODO Auto-generated method stub
}
}

ScitificFunctionPanel.java

import java.awt.BorderLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.ButtonGroup;
import javax.swing.JButton;
import javax.swing.JPanel;
import javax.swing.JRadioButton;

public class ScitificFunctionPanel extends JPanel {

public ScitificFunctionPanel() {
// 设置窗体layout
setLayout(new GridBagLayout());

// 用于放置“度”、“弧度”、“梯度”这三个按钮
JPanel angelPanel = new JPanel();
BoxLayout boxLayout = new BoxLayout(angelPanel, BoxLayout.X_AXIS);
angelPanel.setLayout(boxLayout);
angelPanel.setBorder(BorderFactory.createEtchedBorder());
JRadioButton angelButton = new JRadioButton("度");
JRadioButton radianButton = new JRadioButton("弧度");
JRadioButton gradientButton = new JRadioButton("梯度");

ButtonGroup buttonGroup = new ButtonGroup();
buttonGroup.add(angelButton);
buttonGroup.add(radianButton);
buttonGroup.add(gradientButton);

angelPanel.add(angelButton);
angelPanel.add(Box.createHorizontalGlue());
angelPanel.add(radianButton);
angelPanel.add(Box.createHorizontalGlue());
angelPanel.add(gradientButton);

// 添加角度面板
add(angelPanel, new GBC(0, 0, 5, 1).setFill(GridBagConstraints.BOTH)
.setInsets(5).setWeight(100, 100));

// 添加按钮
String[][] btnStrings = { { "", "Inv", "In", "(", ")" },
{ "Int", "sinh", "sin", "x^2", "n!" },
{ "dms", "cosh", "cos", "x^y", "y√x" },
{ "π", "tanh", "tan", "x^3", "3√x" },
{ "F-E", "Exp", "Mod", "log", "10^x" } };

for (int i = 0; i < btnStrings.length; i++) {
for (int j = 0; j < btnStrings[0].length; j++) {
JButton button = new JButton(btnStrings[i][j]);
add(button,
new GBC(j, i + 1, 1, 1)
.setFill(GridBagConstraints.BOTH).setInsets(5)
.setWeight(100, 100));
if (i + j == 0)
button.setEnabled(false);
}
}

}

public static void main(String[] args) {
// TODO Auto-generated method stub

}

}

BinaryPanel.java

import java.awt.FlowLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.util.ArrayList;
import java.util.List;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class BinaryPanel extends JPanel{

List<JPanel> bitPanelList = new ArrayList<JPanel>();

public BinaryPanel(){
setLayout(new GridBagLayout());
setBorder(BorderFactory.createEtchedBorder());
for (int i = 0; i < 4; i++) {
for (int j = 0; j < 8; j++) {
if (i == 0 || i == 2) {
// 建立一个面板并设置为左对齐的flowLayout，它容纳4个label
JPanel bitPanel = new JPanel();
FlowLayout flowLayout = new FlowLayout();
flowLayout.setAlignment(FlowLayout.LEFT);
flowLayout.setHgap(0);
bitPanel.setLayout(flowLayout);
bitPanel.setName(String.valueOf(bitPanelList.size()));
bitPanelList.add(bitPanel);
// 添加4个label
for (int k = 0; k < 4; k++) {
JLabel label = createBitLabel();
String buttonName = String.valueOf(k);
label.setName(buttonName);
//label.setText(buttonName);
bitPanel.add(label);
System.out.println("add createBitButton of "
+ buttonName);

}
// 将包含4个button的小面板作为一个单元格添加到binaryPanel
add(bitPanel,
new GBC(j, i).setFill(GridBagConstraints.BOTH)
.setWeight(100, 100).setInsets(5));
} else if (i == 1) {
String[] texts = { "63", null, null, null, "47", null,
null, "     32" };
for (int k = 0; k < texts.length; k++) {
JLabel indexLabel = new JLabel();
if (texts[k] == null)
continue;
indexLabel.setText(texts[k]);
add(indexLabel,    new GBC(k, i).setFill(GridBagConstraints.BOTH)
.setWeight(100, 100).setInsets(5));
}

} else if (i == 3) {
String[] texts = { "31", null, null, null, "15", null,
null, "       0" };
for (int k = 0; k < texts.length; k++) {
JLabel indexLabel = new JLabel();
if (texts[k] == null)
continue;
indexLabel.setText(texts[k]);
add(indexLabel,
new GBC(k, i).setFill(GridBagConstraints.BOTH)
.setWeight(100, 100).setInsets(5));
}
}
}
}
}

private JButton createBitButton() {
JButton bitButton = new JButton();
bitButton.setText("0");
bitButton.setEnabled(false);
return bitButton;
}

private JLabel createBitLabel() {
JLabel bitLabel = new JLabel();
bitLabel.setText("0");

// bitLabel.setEnabled(false);
return bitLabel;
}

public static void main(String[] args) {
// TODO Auto-generated method stub
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new BinaryPanel());
frame.pack();
frame.setVisible(true);
}

}

ProgramFunctionPanel.java

import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;

import javax.swing.BorderFactory;
import javax.swing.BoxLayout;
import javax.swing.ButtonGroup;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JRadioButton;

public class ProgramFunctionPanel extends JPanel{

public ProgramFunctionPanel(){
// 设置窗体layout
setLayout(new GridBagLayout());
add(createRadixPanel(), new GBC(0,0, 1, 3).setWeight(100, 100).setFill(GridBagConstraints.BOTH));
add(createBytePanel(), new GBC(0,3, 1, 3).setWeight(100, 100).setFill(GridBagConstraints.BOTH));

String textString [][] = {
{null, "", "Mod","A"},
{null, "(", ")","B"},
{null, "RoL", "RoR","C"},
{null, "Or", "Xor","D"},
{null, "Lsh", "Rsh","E"},
{null, "Not", "And","F"},};

for (int i = 0; i< textString.length; i++) {
for (int j = 0; j< textString[i].length; j++) {
String text = textString[i][j];
if(text != null){
JButton button = new JButton(text);
if(text.equals(""))
button.setEnabled(false);
add(button, new GBC(j, i).setWeight(100, 100).setFill(GridBagConstraints.BOTH).setInsets(5));
//System.out.printf("add btn at (%d,%d)\n", j,i);
}
}
}
}

private JPanel createRadixPanel()
{
JPanel radixPanel = new JPanel();

BoxLayout boxLayout=new BoxLayout(radixPanel, BoxLayout.Y_AXIS);
radixPanel.setLayout(boxLayout);
radixPanel.setBorder(BorderFactory.createEtchedBorder());
String [] radixStrings = {"十六进制", "十进制","八进制","二进制"};
ButtonGroup btnGroup = new ButtonGroup();
for (String radixString : radixStrings) {
JRadioButton radioButton = new JRadioButton(radixString);
//注册事件
btnGroup.add(radioButton);
radixPanel.add(radioButton);
}
return radixPanel;
}

private JPanel createBytePanel()
{
JPanel bytePanel = new JPanel();
BoxLayout boxLayout=new BoxLayout(bytePanel, BoxLayout.Y_AXIS);
bytePanel.setLayout(boxLayout);
bytePanel.setBorder(BorderFactory.createEtchedBorder());
String [] byteStrings = {"四字", "双字","字","字节"};
ButtonGroup btnGroup = new ButtonGroup();
for (String byteString : byteStrings) {
JRadioButton radioButton = new JRadioButton(byteString);
//注册事件
btnGroup.add(radioButton);
bytePanel.add(radioButton);
}
return bytePanel;
}

public static void main(String[] args) {
// TODO Auto-generated method stub
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new ProgramFunctionPanel());
frame.pack();
frame.setVisible(true);
}

}

GBC.java

import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;

/*
* GBC.java,source code from java核心技术 卷1 基础知识,P381
*/

public class GBC extends GridBagConstraints{
/*
* constructs a GBC with a given gridx and gridy position and all other grid
* bag constraint values set to the default
* @param gridx the gridx position
* @param gridy the gridy position
*/
public GBC(int gridx, int gridy){
this.gridx = gridx;
this.gridy = gridy;
}

public GBC(int gridx, int gridy, int gridWidth, int gridHeight){
this.gridx = gridx;
this.gridy = gridy;
this.gridwidth = gridWidth;
this.gridheight = gridHeight;
}

/*
* sets the anchor
* @param anchor the anchor style
* @return this object for further modification
*/

public GBC setAnchor(int anchor){
this.anchor = anchor;
return this;
}

/*
* sets the fill direction
* @param fill the fill direction
* @return this object for further modification
*/

public GBC setFill(int fill){
this.fill = fill;
return this;
}

/*
* sets the cell weights
* @param weightx the cell weight in x direction
* @param weighty the cell weight in y direction
* @return this object for further modification
*/

public GBC setWeight(int weightx, int weighty){
this.weightx = weightx;
this.weighty = weighty;
return this;
}

/*
* sets the insets of this cell
* @param insets distance ths spacing to use in all directions
* @return this object for further modification
*/

public GBC setInsets(int distance){
this.insets = new Insets(distance, distance, distance, distance);
return this;
}

/*
* sets the insets of this cell
* @param top distance ths spacing to use on top
* @param bottom distance ths spacing to use on bottom
* @param left distance ths spacing to use to the left
* @param right distance ths spacing to use to the  right
* @return this object for further modification
*/

public GBC setInsets(int top, int left,int bottom,int right){
this.insets = new Insets(top, left, bottom, right);
return this;
}

/*
* sets the Ipad of this cell
* @param Ipad distance ths spacing to use in all directions
* @return this object for further modification
*/

public GBC setIpad(int ipadx, int ipady){
this.ipadx = ipadx;
this.ipadx = ipadx;
return this;
}
}