布局管理器之CardLayout(卡片布局管理器)

对于选项卡这个概念大家可能不会陌生，就是在一个窗口中可以切换显示多页不同的内容，但同一时间只能是其中的某一页可见的，这样的一个个的页面就是选项卡。

CardLayout就是类似的这样一个布局管理器，它能够让多个组件共享同一个显示空间，共享空间的组件之间的关系就像重叠在一起的一幅扑克牌，组件重叠在一起，初始时显示该空间中第一个组件，通过CardLayout类提供的方法可以切换该空间中显示的组件。

下面我们来看一个例子，实现CardLayout布局管理器的使用。

创建一个使用CardLayout布局的面板：

// 卡片布局管理器private CardLayout cardLayout;// 使用卡片布局管理器的面板private JPanel cardPnl;cardLayout = new CardLayout();cardPnl = new JPanel(cardLayout);

向面板中添加几张图片，因为面板使用卡片布局，所以所添加的图片是重叠在一起的：

/* 向面板中添加几张图片 */for (int i = 0; i < 8; i++) {    final int j = i + 1;    // 将图片绘制到面板中    JPanel img = new JPanel() {        private static final long serialVersionUID = 1L;        @Override        protected void paintComponent(Graphics g) {            g.drawImage(                    Toolkit.getDefaultToolkit().getImage(                            "images/Freedom" + j + ".gif"), 0, 0, null);        }    };    // 将图片面板添加到使用了CardLayout的容器面板中    cardPnl.add("Freedom" + j, img);}

添加两个按钮，用于显示上一张图片与下一张图片，并为按钮注册事件监听器，处理事件的方法：

/** * 处理按钮点击事件 */@Overridepublic void actionPerformed(ActionEvent e) {    String cmd = e.getActionCommand(); // 获取是何种操作    if ("next".equals(cmd)) // 显示下一张图片        cardLayout.next(cardPnl); // 切换下一个选项卡    else if ("previous".equals(cmd)) // 显示上一张图片        cardLayout.previous(cardPnl); // 切换上一个选项卡}

我们可以通过调用CardLayout的next()方法翻转到指定容器的下一张卡片，如果当前的可见卡片是最后一个，则翻转到布局的第一张卡片。同样，也可以使用previout()方法翻转到指定容器的前一张卡片。除了这两个方法外，还有last()、first()方法可以翻转到最后一张、第一张卡片，我们也可以直接使用show()方法翻转到指定名称的卡片。

完整示例代码：

  1 package cardLayout;  2   3 import java.awt.BorderLayout;  4 import java.awt.CardLayout;  5 import java.awt.Graphics;  6 import java.awt.Toolkit;  7 import java.awt.event.ActionEvent;  8 import java.awt.event.ActionListener;  9  10 import javax.swing.JButton; 11 import javax.swing.JFrame; 12 import javax.swing.JPanel; 13 import javax.swing.JTextField; 14  15 /** 16  * 测试卡片布局管理器 如果插入图片的名字不相同的话，就要用多个面板去绘制，因为一个面板只装一张图。名字相同就可以用循环。 17  *  18  * @author hellokitty燕 19  * 20  */ 21 public class CardLayoutDemo2 extends JFrame implements ActionListener { 22  23     private static final long serialVersionUID = 1L; 24  25     private CardLayout cardLayout;// 卡片布局管理器 26     private JPanel jPanel;// 使用卡片布局管理器的面板 27     private JTextField jTextField;// 用于你输入的跳转页面 28  29     public CardLayoutDemo2() { 30  31         setTitle("布局管理器之CardLayout"); 32         setSize(600, 600); 33         setDefaultCloseOperation(EXIT_ON_CLOSE); 34         setLocationRelativeTo(null); 35  36         /* 创建两个按钮，添加到窗体底部，默认窗体布局采用BorderLayout */ 37         JPanel jp = new JPanel();// 面板默认布局使用FlowLayout 38  39         JButton up = new JButton("上一张"); 40         JButton next = new JButton("下一张"); 41         jTextField = new JTextField("2"); 42         JButton go = new JButton("go"); 43  44         jp.add(up); 45         jp.add(next); 46         jp.add(jTextField); 47         jp.add(go); 48         // 注册按钮监听事件 49  50         up.addActionListener(this); 51         next.addActionListener(this); 52         go.addActionListener(this); 53         this.add(jp, BorderLayout.SOUTH); 54  55         /* 创建使用CardLayout布局管理器的容器 */ 56         cardLayout = new CardLayout(); 57         jPanel = new JPanel(cardLayout); 58  59         /* 向面板中添加几张图片 */ 60  61         // 将图片绘制到面板中 / 62         JPanel images = new JPanel() { 63             private static final long serialVersionUID = 1L; 64  65             @Override 66             protected void paintComponent(Graphics g) { 67                 super.paintComponent(g); 68                 g.drawImage( 69                         Toolkit.getDefaultToolkit().getImage( 70                                 "src/images/sprite.png"), 200, 100, this); 71  72             } 73  74         }; 75         // 将图片面板添加到使用了cardLayout容器面板中 76  77         jPanel.add("sprite", images); 78  79         JPanel img = new JPanel() { 80  81             private static final long serialVersionUID = 1L; 82  83             @Override 84             protected void paintComponent(Graphics g) { 85                 super.paintComponent(g); 86                 g.drawImage( 87                         Toolkit.getDefaultToolkit().getImage( 88                                 "src/images/Freedom1.gif"), 200, 100, this); 89             } 90  91         }; 92  93         jPanel.add("Freedom1", img); 94  95         JPanel im = new JPanel() { 96  97             private static final long serialVersionUID = 1L; 98  99             @Override100             protected void paintComponent(Graphics g) {101                 super.paintComponent(g);102                 g.drawImage(103                         Toolkit.getDefaultToolkit().getImage(104                                 "src/images/sprite1.png"), 200, 100, this);105             }106 107         };108         jPanel.add("sprite1", im);109 110         // 将使用了CardLayout的面板添加到窗体中显示111         this.add(jPanel, BorderLayout.CENTER);112 113         setVisible(true);114 115     }116 117     @Override118     public void actionPerformed(ActionEvent e) {119         String cmd = e.getActionCommand();120         if ("下一张".equals(cmd)) {121             cardLayout.next(jPanel); // 切换下一个选项卡122         } else if ("上一张".equals(cmd)) {123             cardLayout.previous(jPanel);// 切换上一个选项卡124         } else if ("go".equals(cmd)) {125             cardLayout.show(jPanel, "Freedom" + jTextField.getText());//这个主要是用于名字相似的图片，如果你想跳转的图片名字不一样的话，你就可以去把图片的名字改成相似的。126         }127 128     }129 130     public static void main(String[] args) {131         new CardLayoutDemo2();132     }133 }

运行效果：