對於選項卡這個概念大家可能不會陌生，就是在一個窗口中可以切換顯示多頁不同的內容，但同一時間只能是其中的某一頁可見的，這樣的一個個的頁面就是選項卡。
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 }
運行效果：
