冒泡排序的可视化体现

　　《冒泡排序的可视化体现》北大青鸟武汉宏鹏光谷校区为了方便学员的学习，以及能够更加直观的了解排序和程序执行想结合的过程，这里会简单地实现冒泡排序的可视化，而整个界面会分为两个部分：界面左侧是可视化排序部分，右侧是冒泡排序的代码。具体如下图示：

　　程序的关键点主要有两点：

　　1. 如何在页面上表示出排序程序的运行过程。

　　2. 如何将排序程序的运行过程和可视化排序结合起来，保持状态一致。

　　我的解决方法如下：

　　我采用了JList去模拟程序的执行，JList有一个setSelectedIndex的方法，能高亮显示指定的行。通过改变selectedIndex的值，能够达到模拟程序执行的效果。在这个过程中，记录下两个循环的索引状态值，根据这些状态值去调整可视化排序。

　　具体的程序页面和程序如下：

　　初始页面：

　　设定程序运行速度并点击Start开始

　　程序运行的中间过程

　　结束界面

package my.visualization.sort.bubble; import java.awt.Container;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import javax.swing.ButtonGroup;import javax.swing.JFrame;import javax.swing.JMenu;import javax.swing.JMenuBar;import javax.swing.JMenuItem;import javax.swing.JRadioButtonMenuItem; /** * * @author Eric * @version 1.0 * */public class BubbleSortVisualizationFrame extends JFrame { private static final long serialVersionUID = -6725108659717827278L; private Container contentPane; /** * 设置三个Menu Item，分别用于开始程序，调整运行的速度以及退出程序 * */ private JMenuItem startMI = new JMenuItem("Start"); private JMenu speedMenu = new JMenu("Speed"); private JMenuItem exitMI = new JMenuItem("Exit"); /** * 设定5个速度级别 */ private JRadioButtonMenuItem speedMI1 = new JRadioButtonMenuItem("Speed1", true); private JRadioButtonMenuItem speedMI2 = new JRadioButtonMenuItem("Speed2", false); private JRadioButtonMenuItem speedMI3 = new JRadioButtonMenuItem("Speed3", false); private JRadioButtonMenuItem speedMI4 = new JRadioButtonMenuItem("Speed4", false); private JRadioButtonMenuItem speedMI5 = new JRadioButtonMenuItem("Speed5", false); public int speedFlag = 1; /** * 冒泡排序可视化的Panel */ private BubbleSortPanel panel; public BubbleSortVisualizationFrame(){ setTitle("可视化排序之冒泡排序"); setSize(700, 400); setResizable(false); JMenuBar menuBar = new JMenuBar(); setJMenuBar(menuBar); JMenu setMenu = new JMenu("Set"); setMenu.setMnemonic('s'); menuBar.add(setMenu); setMenu.add(startMI); setMenu.addSeparator(); setMenu.addSeparator(); setMenu.add(speedMenu); setMenu.addSeparator(); setMenu.add(exitMI); ButtonGroup group = new ButtonGroup(); group.add(speedMI1); group.add(speedMI2); group.add(speedMI3); group.add(speedMI4); group.add(speedMI5); speedMenu.add(speedMI1); speedMenu.add(speedMI2); speedMenu.add(speedMI3); speedMenu.add(speedMI4); speedMenu.add(speedMI5); startMI.addActionListener(new StartAction()); speedMI1.addActionListener(new SpeedAction()); speedMI2.addActionListener(new SpeedAction()); speedMI3.addActionListener(new SpeedAction()); speedMI4.addActionListener(new SpeedAction()); speedMI5.addActionListener(new SpeedAction()); exitMI.addActionListener(new ExitAction()); contentPane = getContentPane(); panel = new BubbleSortPanel(this); contentPane.add(panel); startMI.setEnabled(true); } private class StartAction implements ActionListener { public void actionPerformed(ActionEvent event) { startMI.setEnabled(false); panel.timer.start(); } } private class ExitAction implements ActionListener { public void actionPerformed(ActionEvent event) { System.exit(0); } } private class SpeedAction implements ActionListener { public void actionPerformed(ActionEvent event) { Object speed = event.getSource(); if (speed == speedMI1) { speedFlag = 1; } else if (speed == speedMI2) { speedFlag = 2; } else if (speed == speedMI3) { speedFlag = 3; } else if (speed == speedMI4) { speedFlag = 4; } else if (speed == speedMI5) { speedFlag = 5; } panel.timer.setDelay(1000 - 200 * (speedFlag - 1)); } } }package my.visualization.sort.bubble;import java.awt.BorderLayout;import java.awt.Color;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.io.Serializable;import java.util.ArrayList;import java.util.List;import java.util.Random; import javax.swing.JList;import javax.swing.JPanel;import javax.swing.JScrollPane;import javax.swing.Timer; public class BubbleSortPanel extends JPanel{ private static final long serialVersionUID = -9149581857139587792L; private static final String[] code = { "public void bubbleSort(int[] data) { ", " for (int i = 0; i < data.length - 1; i++) {", " for (int j = 0; j < data.length - i - 1; j++) {", " if (data[j] > data[j + 1]) { ", " int temp = data[j + 1]; ", " data[j + 1] = data[j]; ", " data[j] = temp; ", " } ", " } ", " } ", " } " }; /** * 初始化10个数据 */ private List<NumberRectangle> numbers = initialNumberRectangles(); private JList codeList = new JList(code);; public TimerAction timerAction; public Timer timer; public BubbleSortVisualizationFrame frame; public BubbleSortPanel(BubbleSortVisualizationFrame frame) { timerAction = new TimerAction(); timer = new Timer(1000, timerAction); codeList.setSelectedIndex(1); JScrollPane scrollPane1 = new JScrollPane(codeList); this.setLayout(new BorderLayout()); this.add(scrollPane1, BorderLayout.EAST); this.frame = frame; } /** * 判断排序是否已经结束 */ private boolean completed = false; public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D) g; drawNumberRectangles(g2); } private void drawNumberRectangles(Graphics2D g2){ for(NumberRectangle rectangle: numbers){ rectangle.draw(g2); } } int outerLoop = 0; int innerLoop = 0; int selectedIndex = 1; private class TimerAction implements ActionListener, Serializable { private static final long serialVersionUID = -8671813189049345697L; public void actionPerformed(ActionEvent event) { if (completed) { return; } switch(selectedIndex){ case 1: if(outerLoop<10){ innerLoop = 0; codeList.setSelectedIndex(selectedIndex++); }else{ selectedIndex = 10; } break; case 2: if(innerLoop < 10 - outerLoop -1){ numbers.get(innerLoop).setColor(Color.RED); numbers.get(innerLoop+1).setColor(Color.BLUE); codeList.setSelectedIndex(selectedIndex++); }else{ outerLoop++; selectedIndex =1; } break; case 3: if(numbers.get(innerLoop).getValue()>numbers.get(innerLoop+1).getValue()){ codeList.setSelectedIndex(selectedIndex++); }else{ numbers.get(innerLoop+1).setColor(Color.GREEN); numbers.get(innerLoop).setColor(Color.GREEN); innerLoop++; selectedIndex = 2; } break; case 4: codeList.setSelectedIndex(selectedIndex++); break; case 5: codeList.setSelectedIndex(selectedIndex++); break; case 6: codeList.setSelectedIndex(selectedIndex); int tempValue1 = numbers.get(innerLoop).getValue(); int tempValue2 = numbers.get(innerLoop+1).getValue(); numbers.get(innerLoop+1).setValue(tempValue1); numbers.get(innerLoop).setValue(tempValue2); numbers.get(innerLoop+1).setColor(Color.GREEN); numbers.get(innerLoop).setColor(Color.GREEN); selectedIndex = 2; innerLoop++; break; case 10: if(selectedIndex ==10){ completed = true; codeList.setSelectedIndex(selectedIndex); } break; default: break; } repaint(); } } private List<NumberRectangle> initialNumberRectangles(){ List<NumberRectangle> list = new ArrayList<NumberRectangle>(); /** * 随机产生10个数组 */ Random random = new Random(); for(int i=1; i<=10;i++){ list.add(new NumberRectangle(i,1,random.nextInt(15)+1, Color.GREEN)); } return list; } }package my.visualization.sort.bubble; import java.awt.Color;import java.awt.Graphics2D;import java.awt.geom.Rectangle2D; public class NumberRectangle { private int x; private int y; private int value; private Color color; public NumberRectangle() { } public NumberRectangle(int x, int y, int value, Color color) { this.x = x; this.y = y; this.color = color; this.value = value; } public void draw(Graphics2D g2) { int clientX = 30 + x * 30; int clientY = 20 + y * 10; Rectangle2D.Double rect = new Rectangle2D.Double(clientX, clientY, 20, value * 20); g2.setPaint(color); g2.fill(rect); g2.setPaint(Color.BLACK); g2.draw(rect); g2.drawString(String.valueOf(value), clientX, clientY - 10); } /** * @return the color */ public Color getColor() { return color; } /** * @param color * the color to set */ public void setColor(Color color) { this.color = color; } /** * @return the x */ public int getX() { return x; } /** * @param x * the x to set */ public void setX(int x) { this.x = x; } /** * @return the y */ public int getY() { return y; } /** * @param y * the y to set */ public void setY(int y) { this.y = y; } /** * @return the value */ public int getValue() { return value; } /** * @param value * the value to set */ public void setValue(int value) { this.value = value; } }package my.visualization.sort.bubble; import javax.swing.JFrame; public class SortApplication { @SuppressWarnings("deprecation") public static void main(String[] args) { BubbleSortVisualizationFrame frame = new BubbleSortVisualizationFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.show(); }}