Java GUI Layout

กรกฎาคม 18, 2018 9:48 am โดย admin
0
17

Java GUI Layout ในการเขียน Java GUI สิ่งแรกที่เราจะพบกับหน้าจอของ Frame คือ Layout ซึ่ง Layout เป็นรูปแบบการจัดวางตำแหน่งของ Component Controls ต่าง ๆ เช่น Layout สามารถจัดวางพวก Control ในรูปแบบของตำแหน่ง X,Y คือจัดวางในตรงไหนของ Frame ก็ได้ โดยอ้างอิงจากตำแหน่ง ในแกน X และแกน Y ของ Frame และนอกจากนี้ยังมี Layout ในรูปแบบอื่น ๆ เช่น Grid (เป็นแบบตาราง) , Flow (จัดเรียงตามลำดับ) แต่ปกติแล้ว Layout ที่เราได้ใช้บ่อย ๆ และคุ้นเคยน่าจะเป็นแบบ X,Y (AbsoluteLayout) และภายใน Frame หรือ Panel แต่ล่ะตัวก็สามารถจะมีได้หลาย ๆ Layout

Java GUI Layout

Java GUI and Layout

การจัดวาง Layout ในหน้่า Frame สามารถใช้งานได้ทั้ง Frame ของ Swing JFrame (javax.swing.JFrame) และ Frame ของ AWT (java.awt.Frame)

Example 1 ตัวอย่างการใช้ Layout แบบ AbsoluteLayout

Syntax

1.getContentPane().setLayout(null);

สำหรับ AbsoluteLayout เป็น Layout ที่มีรูปแบบการอ้างอิงจากตำแหน่ง X,Y และปกติแล้วจะเป็นค่า Default ที่อยู่ในรูปแบบแบบบอง null Layout

MyMyForm.java

01.package com.java.myapp;
02. 
03.import java.awt.EventQueue;
04. 
05.import javax.swing.JButton;
06.import javax.swing.JFrame;
07. 
08.public class MyForm extends JFrame {
09. 
10./**
11.* Launch the application.
12.*/
13.public static void main(String[] args) {
14.EventQueue.invokeLater(new Runnable() {
15.public void run() {
16.MyForm frame = new MyForm();
17.frame.setVisible(true);
18.}
19.});
20.}
21. 
22./**
23.* Create the frame.
24.*/
25.public MyForm() {
26.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
27.setBounds(100100450300);
28.setTitle("ThaiCreate.Com GUI Tutorial");
29. 
30.getContentPane().setLayout(null);
31. 
32.JButton btn1 = new JButton("Button 1");
33.btn1.setBounds(41298923);
34.getContentPane().add(btn1);
35. 
36.JButton btn2 = new JButton("Button 2");
37.btn2.setBounds(126818923);
38.getContentPane().add(btn2);
39. 
40.JButton btn3 = new JButton("Button 3");
41.btn3.setBounds(1931348923);
42.getContentPane().add(btn3);
43. 
44.JButton btn4 = new JButton("Button 4");
45.btn4.setBounds(2981838923);
46.getContentPane().add(btn4);
47. 
48. 
49.}
50.}

Output

Java GUI Layout

ตัวอย่างของ Layout แบบ AbsoluteLayout ที่อ้างอิงจากตำแหน่ง X,Y ของ Frame


Example 2 ตัวอย่างการใช้ Layout แบบ GridLayout

Syntax

1.getContentPane().setLayout(new GridLayout(321010)); // 3x2

สำหรับ GridLayout จะเป็นรูปแบบการจัดส่ง Layout เป็นแบบ ตาราง

MyMyForm.java

01.package com.java.myapp;
02. 
03.import java.awt.EventQueue;
04. 
05.import javax.swing.JButton;
06.import javax.swing.JFrame;
07.import java.awt.GridLayout;
08. 
09.public class MyForm extends JFrame {
10. 
11./**
12.* Launch the application.
13.*/
14.public static void main(String[] args) {
15.EventQueue.invokeLater(new Runnable() {
16.public void run() {
17.MyForm frame = new MyForm();
18.frame.setVisible(true);
19.}
20.});
21.}
22. 
23./**
24.* Create the frame.
25.*/
26.public MyForm() {
27.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
28.setBounds(100100450300);
29.setTitle("ThaiCreate.Com GUI Tutorial");
30. 
31.getContentPane().setLayout(new GridLayout(321010)); // 3x2
32. 
33.JButton btn1 = new JButton("Button 1");
34.getContentPane().add(btn1);
35. 
36.JButton btn2 = new JButton("Button 2");
37.getContentPane().add(btn2);
38. 
39.JButton btn3 = new JButton("Button 3");
40.getContentPane().add(btn3);
41. 
42.JButton btn4 = new JButton("Button 4");
43.getContentPane().add(btn4);
44. 
45.JButton btn5 = new JButton("Button 5");
46.getContentPane().add(btn5);
47. 
48.JButton btn6 = new JButton("Button 6");
49.getContentPane().add(btn6);
50. 
51.JButton btn7 = new JButton("Button 7");
52.getContentPane().add(btn7);
53. 
54.JButton btn8 = new JButton("Button 8");
55.getContentPane().add(btn8);
56. 
57.}
58. 
59.}

Output

Java GUI Layout

ตัวอย่างของ Layout แบบ GridLayout จัดวางรูปแบบ Layout เป็นแบบตาราง

ในกรณ๊ที่เขียนผ่าน Tools ของ Eclipse และ Netbeans การปรับแต่ง Layout พวกนี้สามารถทำได้ง่ายมาก ๆ โดยการคลิกขวาที่ Frame ก็สามารถที่จะกำหนด Layout ได้ทันที

Eclipse IDE for Java GUI

Java GUI Layout

สามารถคลิกขวาที่ Frame -> Set layout -> เลือก Layout ที่ต้องการ

Java GUI Layout

เมื่อ View Code โปรแกรมก็จะ Generate Code ให้อัตโนมัติ

Netbeans IDE for Java GUI

Java GUI Layout

สามารถคลิกขวาที่ Frame -> Set layout ->เลือก Layout ที่ต้องการ 

Java GUI Layout

เมื่อ View Code โปรแกรมก็จะ Generate Code ให้อัตโนมัติ

แหล่งที่มา : thaicreate.com/java/java-gui-layout