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 and Layout
การจัดวาง Layout ในหน้่า Frame สามารถใช้งานได้ทั้ง Frame ของ Swing JFrame (javax.swing.JFrame) และ Frame ของ AWT (java.awt.Frame)
Example 1 ตัวอย่างการใช้ Layout แบบ AbsoluteLayout
Syntax
getContentPane().setLayout(null);
สำหรับ AbsoluteLayout เป็น Layout ที่มีรูปแบบการอ้างอิงจากตำแหน่ง X,Y และปกติแล้วจะเป็นค่า Default ที่อยู่ในรูปแบบแบบบอง null Layout
MyMyForm.java
package com.java.myapp;
import java.awt.EventQueue;
import javax.swing.JButton;
import javax.swing.JFrame;
public class MyForm extends JFrame {
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
MyForm frame = new MyForm();
frame.setVisible(true);
}
});
}
/**
* Create the frame.
*/
public MyForm() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
setTitle("ThaiCreate.Com GUI Tutorial");
getContentPane().setLayout(null);
JButton btn1 = new JButton("Button 1");
btn1.setBounds(41, 29, 89, 23);
getContentPane().add(btn1);
JButton btn2 = new JButton("Button 2");
btn2.setBounds(126, 81, 89, 23);
getContentPane().add(btn2);
JButton btn3 = new JButton("Button 3");
btn3.setBounds(193, 134, 89, 23);
getContentPane().add(btn3);
JButton btn4 = new JButton("Button 4");
btn4.setBounds(298, 183, 89, 23);
getContentPane().add(btn4);
}
}
Output
ตัวอย่างของ Layout แบบ AbsoluteLayout ที่อ้างอิงจากตำแหน่ง X,Y ของ Frame
Example 2 ตัวอย่างการใช้ Layout แบบ GridLayout
Syntax
getContentPane().setLayout(new GridLayout(3, 2, 10, 10)); // 3x2
สำหรับ GridLayout จะเป็นรูปแบบการจัดส่ง Layout เป็นแบบ ตาราง
MyMyForm.java
package com.java.myapp;
import java.awt.EventQueue;
import javax.swing.JButton;
import javax.swing.JFrame;
import java.awt.GridLayout;
public class MyForm extends JFrame {
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
MyForm frame = new MyForm();
frame.setVisible(true);
}
});
}
/**
* Create the frame.
*/
public MyForm() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
setTitle("ThaiCreate.Com GUI Tutorial");
getContentPane().setLayout(new GridLayout(3, 2, 10, 10)); // 3x2
JButton btn1 = new JButton("Button 1");
getContentPane().add(btn1);
JButton btn2 = new JButton("Button 2");
getContentPane().add(btn2);
JButton btn3 = new JButton("Button 3");
getContentPane().add(btn3);
JButton btn4 = new JButton("Button 4");
getContentPane().add(btn4);
JButton btn5 = new JButton("Button 5");
getContentPane().add(btn5);
JButton btn6 = new JButton("Button 6");
getContentPane().add(btn6);
JButton btn7 = new JButton("Button 7");
getContentPane().add(btn7);
JButton btn8 = new JButton("Button 8");
getContentPane().add(btn8);
}
}
Output
ตัวอย่างของ Layout แบบ GridLayout จัดวางรูปแบบ Layout เป็นแบบตาราง
ในกรณ๊ที่เขียนผ่าน Tools ของ Eclipse และ Netbeans การปรับแต่ง Layout พวกนี้สามารถทำได้ง่ายมาก ๆ โดยการคลิกขวาที่ Frame ก็สามารถที่จะกำหนด Layout ได้ทันที
Eclipse IDE for Java GUI
สามารถคลิกขวาที่ Frame -> Set layout -> เลือก Layout ที่ต้องการ
เมื่อ View Code โปรแกรมก็จะ Generate Code ให้อัตโนมัติ
Netbeans IDE for Java GUI
สามารถคลิกขวาที่ Frame -> Set layout ->เลือก Layout ที่ต้องการ
เมื่อ View Code โปรแกรมก็จะ Generate Code ให้อัตโนมัติ
ใน Java GUI การจัดวาง Layout ในหน้า Frame จะมีอยู่ประมาณ 9-10 รูปแบบ และรูปแบบที่ได้รับความนิยมมากที่สุดก็น่าจะเป็นแบบ [b]AbsoluteLayout [/b]แต่ก็อยากจะแนะนำให้ศึกษารูปแบบอื่น ๆ เผื่อจะได้ใช้ประโยชน์จากมันด้วยเช่นเดียวกัน ซึ่งในหัวข้อนี้จะยกตัวอย่างสั้น ๆ การใช้ Layout ใน Java GUI หลากหลายรูปแบบ
Property & Method (Others Related) |
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2013-08-11 07:36:52 /
2017-03-27 17:04:40 |
|
Download : |
No files |
|
Sponsored Links / Related |
|
|
|
|
|
|
|