布局管理器之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); } 

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

/** * 处理按钮点击事件 */ @Override public 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             @Override

100             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     @Override

118     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 }

运行效果：