Các component trong Java Swing được chia làm hai loại là container và children, trong
đó container là loại component dùng để chứa các component khác, ví dụ như JFrame, JPanel… còn children là các component như JLabel, Jbutton, JTextField… khi chúng ta đặt các component con lên các container thì việc đặt và sắp xếp theo vị trí nào đó và
nó được gọi là Layout.
The LayoutManagers được dùng để sắp xếp các điều khiển theo từng nhóm cụ thể. LayoutManager là một interface. Layout managers có các lớp sau:
java.awt.BorderLayout java.awt.FlowLayout java.awt.GridLayout java.awt.CardLayout java.awt.GridBagLayout javax.swing.BoxLayout javax.swing.GroupLayout javax.swing.ScrollPaneLayout javax.swing.SpringLayout Hình 3.6: Các lớp của Swing
KHOA CÔNG NGHỆ THÔNG TIN 39
BORDERLAYOUT
BorderLayout sắp xếp các điều khiển vào 5 vùng: north, south, east, west and center.
Mỗi vùng chỉ chứa một điều khiển.
Cú pháp:
BorderLayout(): tạo border layout mà không có khoảng trống giữa các điều khiển. JBorderLayout(int hgap, int vgap): tạo border layout vớikhoảng trống ngang và dọc giữa các điều khiển.
Hằng số được sử dụng với hàm là:
public static final int NORTH public static final int SOUTH public static final int EAST public static final int WEST public static final int CENTER
Ví dụ: Tạo 5 buttons và đặt chúng vào 5 vùng
Hình 3.7: Ví dụ BorderLayout
Mã chương trình:
import java.awt.*; import javax.swing.*;
KHOA CÔNG NGHỆ THÔNG TIN 40 JFrame f;
Border(){
f=new JFrame();
JButton b1=new JButton("NORTH");; JButton b2=new JButton("SOUTH");; JButton b3=new JButton("EAST");; JButton b4=new JButton("WEST");; JButton b5=new JButton("CENTER");; f.add(b1,BorderLayout.NORTH); f.add(b2,BorderLayout.SOUTH); f.add(b3,BorderLayout.EAST); f.add(b4,BorderLayout.WEST); f.add(b5,BorderLayout.CENTER); f.setSize(300,300); f.setVisible(true); }
public static void main(String[] args) { new Border();
} }
FLOWLAYOUT
Flow Layout bố trí các Component trong Container theo dòng, từ trái sang phải theo thứ tự thêm vào.Tạo dòng mới khi kích thước dòng còn lại không đủ chứa
Component thêm vào. Flow Layout bố trí vị trí các Component phụ thuộc vào kích thước của Container. Mỗi dòng của các Component được window mặc định canh giữa theo chiều ngang . Có thể điều chỉnh canh trái hoặc phải.
KHOA CÔNG NGHỆ THÔNG TIN 41
Cú pháp:
FlowLayout(): tạo flow layout với lề được canh giữa.
FlowLayout(int align): tạo flow layout với lề được cho.
FlowLayout(int align, int hgap, int vgap): creates a flow layout with the given alignment and the given horizontal and vertical gap.
Hằng số được sử dụng với hàm:
public static final int LEFT public static final int RIGHT public static final int CENTER public static final int LEADING public static final int TRAILING
Ví dụ: Thiết kế giáo diện như hình sau.
Hình 3.8: Ví dụ FlowLayout
Mã chương trình
import java.awt.*; import javax.swing.*;
public class MyFlowLayout{ JFrame f;
KHOA CÔNG NGHỆ THÔNG TIN 42 f=new JFrame();
JButton b1=new JButton("1"); JButton b2=new JButton("2"); JButton b3=new JButton("3"); JButton b4=new JButton("4"); JButton b5=new JButton("5");
f.add(b1);f.add(b2);f.add(b3);f.add(b4);f.add(b5);
f.setLayout(new FlowLayout(FlowLayout.RIGHT)); //setting flow layout of right alignment
f.setSize(300,300); f.setVisible(true); }
public static void main(String[] args) { new MyFlowLayout();
} }
GRIDLAYOUT
GridLayout dùng để tạo lưới chứa đựng các điều khiển.
Cú pháp:
GridLayout(): tạo lưới chỉ với 1 cột, 1 dòng.
GridLayout(int rows, int columns): tạo lưới với rows dòng và columns cột không có khoảng trống.
GridLayout(int rows, int columns, int hgap, int vgap): tạo lưới với rows dòng và columns cột có khoảng trống đứng vgap và khoảng trống ngang hgap.
KHOA CÔNG NGHỆ THÔNG TIN 43 Hình 3.9: Ví dụ GridLayout Mã chương trình: import java.awt.*; import javax.swing.*;
public class MyGridLayout{ JFrame f;
MyGridLayout(){ f=new JFrame();
JButton b1=new JButton("1"); JButton b2=new JButton("2"); JButton b3=new JButton("3"); JButton b4=new JButton("4"); JButton b5=new JButton("5"); JButton b6=new JButton("6"); JButton b7=new JButton("7"); JButton b8=new JButton("8"); JButton b9=new JButton("9");
KHOA CÔNG NGHỆ THÔNG TIN 44 f.add(b1);f.add(b2);f.add(b3);f.add(b4);f.add(b5);
f.add(b6);f.add(b7);f.add(b8);f.add(b9);
f.setLayout(new GridLayout(3,3));
//setting grid layout of 3 rows and 3 columns
f.setSize(300,300); f.setVisible(true); }
public static void main(String[] args) { new MyGridLayout();
} }
GRIDBAGLAYOUT
Lớp Java GridBagLayout được sử dụng để căn chỉnh các điều khiển theo chiều dọc, chiều ngang hoặc dọc theo đường cơ sở của chúng.
Các điều khiển có thể không có cùng kích thước. Mỗi đối tượng GridBagLayout duy trì một lưới ô hình chữ nhật động. Mỗi điều khiển chiếm một hoặc nhiều ô được gọi là vùng hiển thị của nó. Mỗi control liên kết một phiên bản của GridBagConstraints. Với sự trợ giúp của đối tượng ràng buộc, chúng ta sắp xếp vùng hiển thị của điều khiển trên lưới. GridBagLayout quản lý kích thước ưu tiên và tối thiểu của từng thành phần để xác định kích thước của thành phần.
KHOA CÔNG NGHỆ THÔNG TIN 45 Hình 3.10: Ví dụ GridBagLayout Mã chương trình: import java.awt.Button; import java.awt.GridBagConstraints; import java.awt.GridBagLayout; import javax.swing.*;
public class GridBagLayoutExample extends JFrame{ public static void main(String[] args) {
GridBagLayoutExample a = new GridBagLayoutExample(); }
public GridBagLayoutExample() {
GridBagLayoutgrid = new GridBagLayout();
GridBagConstraints gbc = new GridBagConstraints(); setLayout(grid);
setTitle("GridBag Layout Example");
GridBagLayout layout = new GridBagLayout(); this.setLayout(layout);
gbc.fill = GridBagConstraints.HORIZONTAL; gbc.gridx = 0;
KHOA CÔNG NGHỆ THÔNG TIN 46 gbc.gridy = 0;
this.add(new Button("Button One"), gbc); gbc.gridx = 1;
gbc.gridy = 0;
this.add(new Button("Button two"), gbc); gbc.fill = GridBagConstraints.HORIZONTAL; gbc.ipady = 20;
gbc.gridx = 0; gbc.gridy = 1;
this.add(new Button("Button Three"), gbc); gbc.gridx = 1;
gbc.gridy = 1;
this.add(new Button("Button Four"), gbc); gbc.gridx = 0;
gbc.gridy = 2;
gbc.fill = GridBagConstraints.HORIZONTAL; gbc.gridwidth = 2;
this.add(new Button("Button Five"), gbc); setSize(300, 300); setPreferredSize(getSize()); setVisible(true); setDefaultCloseOperation(EXIT_ON_CLOSE); } } BOXLAYOUT
KHOA CÔNG NGHỆ THÔNG TIN 47
Cú pháp
BoxLayout(Container c, int axis) Hằng số
public static final int X_AXIS public static final int Y_AXIS public static final int LINE_AXIS public static final int PAGE_AXIS
Ví dụ: Sắp xếp các điều khiển theo Y_AXIS
Hình 3.11: Ví dụ BoxLayout
Mã chương trình:
import java.awt.*; import javax.swing.*;
public class BoxLayoutExample1 extends Frame { Button buttons[];
KHOA CÔNG NGHỆ THÔNG TIN 48 public BoxLayoutExample1 () {
buttons = new Button [5];
for (int i = 0;i<5;i++) {
buttons[i] = new Button ("Button " + (i + 1)); add (buttons[i]);
}
setLayout (new BoxLayout (this, BoxLayout.Y_AXIS)); setSize(400,400);
setVisible(true); }
public static void main(String args[]){
BoxLayoutExample1 b=new BoxLayoutExample1(); }
}
GROUPLAYOUT
GroupLayout gom nhóm các điều khiển và sắp xếp chúng vào các nhóm phân cấp.
Cú pháp
GroupLayout(Container host) tạo GroupLayoutcho Container cụ thể. createSequentialGroup() tạo và trả về SequentialGroup.
createParallelGroup(GroupLayout.Alignment alignment, boolean resizable):
tạo và trả về ParallelGroup.
Ví dụ: Thiết kế giao diện như hình sau
Hình 3.12: Ví dụ GroupLayout
KHOA CÔNG NGHỆ THÔNG TIN 49 public class GroupExample {
public static void main(String[] args) {
JFrame frame = new JFrame("GroupLayoutExample");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Container contentPanel = frame.getContentPane();
GroupLayout groupLayout = new GroupLayout(contentPanel);
contentPanel.setLayout(groupLayout);
JLabel clickMe = new JLabel("Click Here"); JButton button = new JButton("This Button"); groupLayout.setHorizontalGroup( groupLayout.createSequentialGroup() .addComponent(clickMe) .addGap(10, 20, 100) .addComponent(button)); groupLayout.setVerticalGroup( groupLayout.createParallelGroup(GroupLayout.Alignment.BASELINE) .addComponent(clickMe) .addComponent(button)); frame.pack(); frame.setVisible(true); } } CARDLAYOUT
CardLayout quản lý các thành phần điều khiển và chỉ cho một điều khiển được hiển thị. CardLayout xem mỗi điều khiển như là một thẻ.
KHOA CÔNG NGHỆ THÔNG TIN 50
CardLayout(): tạo một card layout không có khoảng trống ngang và dọc.
CardLayout(int hgap, int vgap): tạo một card layout có khoảng trống ngang và dọc. Ví dụ Hình 3.13: Ví dụ CardLayout Mã chương trình: import java.awt.*; import java.awt.event.*; import javax.swing.*;
public class CardLayoutExample extends JFrame implements ActionListener{ CardLayout card;
JButton b1,b2,b3; Container c;
KHOA CÔNG NGHỆ THÔNG TIN 51
c=getContentPane();
card=new CardLayout(40,30);
//create CardLayout object with 40 hor space and 30 ver space c.setLayout(card); b1=new JButton("Apple"); b2=new JButton("Boy"); b3=new JButton("Cat"); b1.addActionListener(this); b2.addActionListener(this); b3.addActionListener(this); c.add("a",b1);c.add("b",b2);c.add("c",b3); }
public void actionPerformed(ActionEvent e) { card.next(c);
}
public static void main(String[] args) {
CardLayoutExample cl=new CardLayoutExample(); cl.setSize(400,400);
cl.setVisible(true);
cl.setDefaultCloseOperation(EXIT_ON_CLOSE); }
KHOA CÔNG NGHỆ THÔNG TIN 52
SCROLLPANELAYOUT
JScrollPaneLayout chịu trách nhiệm về chín thành phần: một khung nhìn, hai thanh cuộn, tiêu đề hàng, tiêu đề cột và bốn thành phần "góc".
Cú pháp
JScrollPane() tạo JScrollPane
Ví dụ Hình 3.14: Ví dụ ScrollPaneLayout Mã chương trình: import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JScrollPane;
public class ScrollPaneDemo extends JFrame {
public ScrollPaneDemo() { super("ScrollPane Demo");
ImageIcon img = new ImageIcon("child.png");
JScrollPane png = new JScrollPane(new JLabel(img));
KHOA CÔNG NGHỆ THÔNG TIN 53 setSize(300,250);
setVisible(true); }
public static void main(String[] args) { new ScrollPaneDemo();
} }
SPRINGLAYOUT
SpringLayout sắp xếp các điều khiển của vùng chứa được liên kết của nó theo một tập hợp các ràng buộc. Các ràng buộc không là gì ngoài khoảng cách ngang và dọc giữa hai cạnh thành phần. Mọi ràng buộc được đại diện bởi một đối tượng
SpringLayout.Constraint.
Mỗi điều khiển của một vùng chứa SpringLayout, cũng như bản thân vùng chứa, có
chính xác một tập các ràng buộc được liên kết với chúng.
Mỗi vị trí cạnh phụ thuộc vào vị trí của cạnh kia. Nếu một ràng buộc được thêm vào để tạo cạnh mới hơn ràng buộc trước đó sẽ bị loại bỏ. SpringLayout không tự động đặt vị trí của các thành phần mà nó quản lý.
Cú pháp
SpringLayout.Constraints tạo đối tượng Constraints giúp quản lý kích thước và sự thay đổi vị trí cả các điều khiển.
Ví dụ
Hình 3.15: Ví dụ SpringLayout
Mã chương trình:
KHOA CÔNG NGHỆ THÔNG TIN 54 import javax.swing.JFrame;
import javax.swing.JLabel; import javax.swing.JTextField; import javax.swing.SpringLayout; public class MySpringDemo {
private static void createAndShowGUI() {
JFrame frame = new JFrame("MySpringDemp");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container contentPane = frame.getContentPane(); SpringLayout layout = new SpringLayout(); contentPane.setLayout(layout);
JLabel label = new JLabel("Label: ");
JTextField textField = new JTextField("My Text Field", 15); contentPane.add(label); contentPane.add(textField); layout.putConstraint(SpringLayout.WEST, label,6,SpringLayout.WEST, contentPane); layout.putConstraint(SpringLayout.NORTH, label,6,SpringLayout.NORTH, contentPane); layout.putConstraint(SpringLayout.WEST, textField,6,SpringLayout.EAST, label); layout.putConstraint(SpringLayout.NORTH, textField,6,SpringLayout.NORTH, contentPane); layout.putConstraint(SpringLayout.EAST, contentPane,6,SpringLayout.EAST, textField); layout.putConstraint(SpringLayout.SOUTH, contentPane,6,SpringLayout.SOUTH, textField);
KHOA CÔNG NGHỆ THÔNG TIN 55 frame.pack();
frame.setVisible(true); }
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() { public void run() {
createAndShowGUI(); }
}); } }