ที่มาของบทความ: ผู้ที่ชื่นชอบคอมพิวเตอร์ ผู้แต่ง: Zhang Jian
ใครจะรู้ว่ามีการใช้ทรายและหินมากแค่ไหนในการสร้างหอคอยบาเบล ใครจะรู้ว่าต้องใช้เวลากี่วันและคืนในการสร้างกรุงโรม? สิ่งเดียวที่เรารู้ก็คือ หากไม่มีอิฐและหิน จะไม่มีกำแพงเมืองจีนที่ทอดยาวหลายพันไมล์ หากปราศจากก้อนหินและดินเหนียวที่สะสมไว้ จะไม่มีปิรามิดนิรันดร์ จะเห็นได้ว่าการเตรียมความรู้พื้นฐานเป็นสิ่งสำคัญสำหรับเราในการเรียนรู้สิ่งใดๆ ดังนั้น ให้เราเริ่มต้นด้วยการทำความเข้าใจฟังก์ชันพื้นฐานบางอย่างของ Swing และเริ่มโครงการอันยิ่งใหญ่ในการสร้างกรุงโรม!
คำนำ
Java Cafe เปิดมานานแล้ว ถ้าชอบรสชาติกาแฟของ Java อยู่แล้วอย่าลืมมาบ่อยๆ ครั้งนี้ เราได้เตรียมกาแฟหอมกรุ่นถ้วยใหญ่สำหรับทุกคน - จากการพัฒนาเกม "Lianliankan" เราจะได้เรียนรู้วิธีใช้ Swing ใน Java กับคุณ เมื่อคุณลิ้มรสกาแฟแก้วนี้อย่างระมัดระวัง คุณจะทำอย่างนั้น ค้นพบว่า Java ไม่เพียงแต่มีรสชาติที่เป็นเอกลักษณ์สำหรับกาแฟของฉันเท่านั้น แต่ฉันยังได้เรียนรู้วิธีการพัฒนาเกมระดับมืออาชีพด้วย มันเป็นสิ่งที่ดีที่สุดของทั้งสองโลกจริงๆ!
เพื่อให้เห็นภาพคร่าวๆ รูปภาพด้านล่างคือภาพหน้าจอของเกม คุณสามารถดาวน์โหลดเกมเพื่อทดลองใช้ได้ (ดาวน์โหลดโปรแกรมเกม ดาวน์โหลดไฟล์ต้นฉบับ) จากนั้นใช้ java -jar kyodai.jar เพื่อรันในโหมดบรรทัดคำสั่ง นอกจากนี้ คุณยังสามารถไปที่หน้าแรกของฉัน http://www.ismyway.com เพื่อดาวน์โหลดเกมนี้เวอร์ชันสแตนด์อโลนและเวอร์ชันมือถือเพื่อทดลองเล่น (ดูรูปที่ 1)
Java Cafe เคยแนะนำความรู้เกี่ยวกับ AWT มาก่อน แล้ว Swing กับ AWT ต่างกันอย่างไร? ใครก็ตามที่ศึกษา Java อาจเคยได้ยินหรือเคยเห็นคำว่า การควบคุมแบบเฮฟวี่เวท และ การควบคุมแบบไลท์เวท AWT คือสิ่งที่เรามักเรียกว่าการควบคุมแบบเฮฟวี่เวท และสวิงคือการควบคุมแบบไลท์เวท เราทุกคนรู้ดีว่าสโลแกนของ Java คือ "เขียนครั้งเดียว ทำงานได้ทุกที่" ซึ่งกำหนดให้เราใช้โค้ด Java ล้วนๆ ในโปรแกรมของเราให้มากที่สุดเท่าที่จะเป็นไปได้ น่าเสียดายที่ AWT อาศัยอินเทอร์เฟซกับแพลตฟอร์มดั้งเดิม ดังนั้นอินเทอร์เฟซที่สร้างด้วย AWT อาจดูแตกต่างออกไปเล็กน้อยตามระบบปฏิบัติการที่แตกต่างกัน Swing นั้นแตกต่างอย่างสิ้นเชิง Swing เขียนด้วยภาษา Java ล้วนๆ ดังนั้นอินเทอร์เฟซที่เขียนด้วย Swing จึงรับประกันรูปลักษณ์ที่เหมือนกันบนทุกแพลตฟอร์ม เคล็ดลับอีกอย่างหนึ่ง: ใน JDK เพื่อการสร้างความแตกต่างอย่างง่ายดาย ตัวควบคุม Swing ทั้งหมดจะขึ้นต้นด้วยตัวพิมพ์ใหญ่ J เช่น JButton (ค่าที่เทียบเท่ากันใน AWT คือ Button) เพื่อให้คุณสามารถแยกแยะตัวควบคุม Swing จากตัวควบคุม AWT ได้อย่างง่ายดาย
ประสบการณ์สวิงครั้งแรก
สำหรับผู้ที่ต้องการเรียนการเขียนโปรแกรม Swing เราได้เตรียมเคล็ดลับมาให้คุณโดยเฉพาะ ขั้นแรก จำเป็นอย่างยิ่งที่จะต้องดาวน์โหลดและอ่านโค้ด เนื่องจากนี่คือบทช่วยสอนเกี่ยวกับ Swing เราจึงพยายามอธิบายเนื้อหาที่เกี่ยวข้องกับ Swing ให้มากที่สุดเท่าที่จะเป็นไปได้ โดยทั่วไปเนื้อหาที่ไม่เกี่ยวข้องกับ Swing จะไม่ถูกกล่าวถึง เช่น ส่วนของอัลกอริทึม ประการที่สอง เนื่องจากข้อจำกัดด้านพื้นที่ จึงเป็นไปไม่ได้ที่จะเขียนโค้ดทุกส่วนของที่นี่ให้สมบูรณ์ ดังนั้นคุณจึงต้องเปรียบเทียบกับโค้ดที่สมบูรณ์ด้วย สุดท้าย เพื่อให้ทุกคนมุ่งเน้นไปที่การเรียนรู้ Swing ได้ง่ายขึ้น เราได้ใส่ทรัพยากรที่จำเป็นสำหรับการพัฒนาเกมไว้ในไฟล์ดาวน์โหลด หลังจากดาวน์โหลด คุณสามารถคอมไพล์และเรียกใช้และดูผลการดำเนินการได้
1. คอนเทนเนอร์ระดับบนสุด
คอนเทนเนอร์ระดับบนสุดคืออะไร? เมื่อเราใช้ Java สำหรับการเขียนโปรแกรมกราฟิก ไดอะแกรมจะถูกวาดที่ไหน? เราต้องการคอนเทนเนอร์ที่สามารถจัดเตรียมภาพวาดกราฟิกได้ คอนเทนเนอร์นี้เรียกว่าคอนเทนเนอร์ระดับบนสุด คอนเทนเนอร์ระดับบนสุดเป็นพื้นฐานสำหรับการเขียนโปรแกรมกราฟิก ทุกสิ่งที่เป็นกราฟิกจะต้องรวมอยู่ในคอนเทนเนอร์ระดับบนสุด ใน Swing เรามีคอนเทนเนอร์ระดับบนสุดสามคอนเทนเนอร์ที่สามารถใช้ได้ ได้แก่:
・JFrame: ใช้ในการออกแบบแอปพลิเคชันที่คล้ายกับรูปแบบหน้าต่างในระบบ Windows
・JDialog: คล้ายกับ JFrame ยกเว้น JDialog ที่ใช้ในการออกแบบกล่องโต้ตอบ
・JApplet: ใช้เพื่อออกแบบแอปเพล็ต Java ที่สามารถฝังในหน้าเว็บได้
หากเราจำเป็นต้องใช้ Swing เพื่อสร้างโปรแกรมคลาส window โค้ดของเราควรมีลักษณะดังนี้:
นำเข้า javax.swing.*;
KyodaiUI คลาสสาธารณะ
ขยาย JFrame {
-
-
2.การควบคุม
การควบคุมเป็นองค์ประกอบพื้นฐานที่ประกอบขึ้นเป็นอินเทอร์เฟซของแอปพลิเคชัน ปุ่ม กล่องข้อความ แถบความคืบหน้า ฯลฯ ล้วนแต่เป็นการควบคุม การควบคุม (ในที่นี้เราจะพูดถึงการควบคุมด้วยภาพเท่านั้น) สามารถแบ่งออกเป็นการควบคุมคอนเทนเนอร์และการควบคุมที่ไม่ใช่คอนเทนเนอร์ จริงๆ แล้ว คอนโทรลคอนเทนเนอร์คือคอนโทรลพิเศษที่สามารถมีคอนโทรลอื่นๆ ได้ ตัวอย่างเช่น คอนโทรล JPanel ใน Java ก็คือคอนโทรลคอนเทนเนอร์ เราสามารถวางคอนโทรลที่ไม่ใช่คอนเทนเนอร์ เช่น ปุ่มและกล่องข้อความลงใน JPanel ได้ด้วย -คอนเทนเนอร์คอนโทรล เช่น ปุ่มและกล่องข้อความใน JPanel วางคอนโทรล JPanel หลายอันไว้ในนั้น (เป็นที่น่าสังเกตว่าคอนเทนเนอร์ระดับบนสุดก็เป็นคอนโทรลประเภทคอนเทนเนอร์เช่นกัน แต่ละแอปพลิเคชันหน้าต่างมีและสามารถมีคอนเทนเนอร์ระดับบนสุดได้เพียงคอนเทนเนอร์เดียวเท่านั้น การควบคุม กล่าวอีกนัยหนึ่ง ไม่สามารถรวมคอนเทนเนอร์ระดับบนสุดไว้ในการควบคุมอื่น ๆ ได้)
มีคอนเทนเนอร์คอนโทรลมากมายใน Java นอกจาก JPanel ที่เพิ่งกล่าวถึงแล้ว ยังมี JTabbedPane, JScrollPane และอื่นๆ คอนโทรลที่ไม่ใช่คอนเทนเนอร์ ได้แก่ JButton, JLabel, JTextField เป็นต้น หากคุณต้องการเพิ่มการควบคุมให้กับการควบคุมประเภทคอนเทนเนอร์ คุณสามารถใช้เมธอด add(Component comp) เพื่อให้บรรลุเป้าหมายนี้ได้ เช่น:
แผง JPanel = JPanel ใหม่ ();
ปุ่ม JButton = JButton ใหม่ ();
แผง.เพิ่ม(ปุ่ม);
3. เค้าโครง
เค้าโครงคืออะไร? เค้าโครงเป็นระบบการจัดการอินเทอร์เฟซที่ใช้ใน Java เพื่อควบคุมการจัดเรียงและตำแหน่งของการควบคุม ผู้ที่เคยใช้ภาษาการพัฒนาการเขียนโปรแกรมด้วยภาพอื่นมักจะรู้สึกว่าการออกแบบอินเทอร์เฟซ Java นั้นน่าอึดอัดใจเมื่อสัมผัสครั้งแรก: ไม่มีวิธี WYSIWYG สำหรับการตั้งค่าพิกัดควบคุม! อย่างไรก็ตาม ปรากฎว่าระบบการจัดการเลย์เอาต์ที่ Java มอบให้นั้นสามารถตอบสนองความต้องการของเราได้เป็นอย่างดี และมีข้อได้เปรียบมากกว่าในด้านประสิทธิภาพข้ามแพลตฟอร์ม
เค้าโครงที่ใช้กันทั่วไปคือ:
・BorderLayout: ระบบการจัดการที่แบ่งอินเทอร์เฟซออกเป็นส่วนบน ล่าง ซ้าย ขวา และตรงกลาง ในเค้าโครง BorderLayout คุณสามารถวางตัวควบคุมได้สูงสุด 5 ตัวเท่านั้น ขอแนะนำให้ใช้ ระบบเค้าโครงอื่น ๆ
・GridLayout: GridLayout คือระบบการจัดการเลย์เอาต์ที่ตัดอินเทอร์เฟซผู้ใช้ให้เป็นเลย์เอาต์ที่เหมือนกระดานหมากรุก หากเราต้องการออกแบบซอฟต์แวร์เครื่องคิดเลขที่คล้ายกับซอฟต์แวร์ที่มาพร้อมกับ Windows GridLayout คือตัวเลือกที่ดีที่สุดอย่างไม่ต้องสงสัย
・FlowLayout: FlowLayout แตกต่างจากระบบการจัดการเค้าโครงสองประเภทข้างต้น ใน FlowLayout คุณไม่จำเป็นต้องระบุตำแหน่งที่จะวางตัวควบคุมแต่ละรายการ คุณเพียงแค่เพิ่มตัวควบคุมลงใน FlowLayout เท่านั้น และ FlowLayout จะวางตัวควบคุมเหล่านั้นตามลำดับ ลำดับที่คุณเพิ่มตัวควบคุม ตัวควบคุมจะตัดโดยอัตโนมัติหากมีเนื้อที่ไม่เพียงพอ
หลังจากมีความเข้าใจพื้นฐานเกี่ยวกับระบบการจัดการเลย์เอาต์เหล่านี้แล้ว เรามาเข้าสู่การออกแบบอินเทอร์เฟซด้วยกัน หลังจากสังเกตการตั้งค่าของ "Lianliankan" ในเกม QQ อย่างรอบคอบ เราจะพบว่าอินเทอร์เฟซทั้งหมดแบ่งออกเป็นสามส่วน ด้านบนคือพื้นที่เมนูระบบ พื้นที่ที่ใหญ่ที่สุดคือพื้นที่เกมของผู้ใช้ และยังมีการโต้ตอบกับผู้ใช้ด้วย พื้นที่ แต่ละพื้นที่ประกอบด้วยส่วนควบคุมต่างๆ
ด้วยการควบคุมมากมาย เราจะเริ่มจากตรงไหนดี? เนื่องจากสามารถวางตัวควบคุมอื่นๆ ไว้ในตัวควบคุมคอนเทนเนอร์ได้ เราเพียงแต่ต้องกำหนดตัวควบคุมคอนเทนเนอร์ที่จะวางก่อนเท่านั้น ตอนนี้เราทราบจำนวนการควบคุมคอนเทนเนอร์ที่เราต้องใช้แล้ว มาดูการเลือกระบบการจัดการเค้าโครงกันดีกว่า ใช้ GridLayout ไหม? ดูเหมือนว่าจะบังคับเล็กน้อยเมื่อใช้ FlowLayout? มีตัวเลือกที่ดีกว่านี้ไหม? อย่างไรก็ตาม ฉันคิดว่าคุณต้องคิดถึง BorderLayout ดังแสดงในรูปที่ 2 ด้านล่าง
ก่อนที่จะเริ่มต้นทุกคนจะต้องคำนึงถึงความจริงที่ว่าการออกแบบอินเทอร์เฟซจะต้องคำนึงถึงขนาดก่อนไม่ว่าจะเป็นขนาดของอินเทอร์เฟซโปรแกรมหลักหรือขนาดของแต่ละพื้นที่หากไม่ได้ออกแบบขนาดที่เหมาะสมก็จะเป็นอย่างมาก เจ็บปวดที่จะเปลี่ยนแปลงมันในอนาคต
ต่อไปนี้คือโปรแกรมต้นทางที่เกี่ยวข้อง:
นำเข้า java.awt.*;
นำเข้า javax.swing.*;
KyodaiUI คลาสสาธารณะขยาย JFrame {
KyodaUI สาธารณะ () {
this.setSize(780, 500); //กำหนดขนาดของแบบฟอร์มเป็น 780*500
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setResizable(false); //ไม่สามารถปรับขนาดแบบฟอร์มได้
this.setTitle("Lianliankan"); //ตั้งชื่อเรื่อง
แถบเครื่องมือ JPanel = JPanel ใหม่();
toolBar.setBackground(สี.สีขาว);
toolBar.setPreferredSize(มิติใหม่(780, 48));
JPanel actionPanel = JPanel ใหม่ (); // สร้างตัวควบคุมประเภท JPanel ใหม่
actionPanel.setBackground(Color.yellow); //ตั้งค่าสีพื้นหลัง
actionPanel.setPreferredSize(มิติข้อมูลใหม่ (160, 380)); //กำหนดขนาด
JPanel contentPanel = JPanel ใหม่();
contentPanel.setBackground(สี.สีน้ำเงิน);
contentPanel.setPreferredSize(มิติใหม่ (620, 380));
this.getContentPane().add(แถบเครื่องมือ, BorderLayout.NORTH);
this.getContentPane().add(actionPanel, BorderLayout.EAST);
this.getContentPane().add(contentPanel, BorderLayout.CENTER);
-
โมฆะคงที่สาธารณะ main (String [] args) พ่น HeadlessException {
KyodaiUI kyodaiUI = KyodaiUI(); ใหม่
kyodaiUI.show();
-
-
มาดูกันว่าโปรแกรมข้างต้นทำงานอย่างไร ประการแรก การขยาย JFrame บ่งชี้ว่าได้รับการสืบทอดมาจาก JFrame ซึ่งเป็นตัวควบคุมคอนเทนเนอร์ระดับบนสุดพื้นฐานที่สุด ที่จริงแล้ว ใน JDK การควบคุมที่ขึ้นต้นด้วยตัวอักษร J คือการควบคุมแบบสวิง จากนั้นตั้งค่าคุณสมบัติของคอนเทนเนอร์ setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) ใช้เพื่อบอกให้เครื่องเสมือน Java ปิดกระบวนการหน้าต่างเมื่อผู้ใช้คลิกปุ่ม "ปิด" ที่มุมขวาบนของแบบฟอร์ม หากคุณไม่ทำเช่นนี้ คุณจะพบว่าแม้ว่าคุณจะสามารถคลิกเพื่อปิดหน้าต่างได้ แต่โปรแกรมก็ไม่ออก ในโค้ดต่อไปนี้ เราเพิ่มคอนเทนเนอร์ Panel สามรายการลงในคอนเทนเนอร์ระดับบนสุด โปรดทราบว่าใน AWT เราสามารถเขียนเป็น add(toolBar, BorderLayout.NORTH) ได้โดยตรง แต่ใน Swing จะต้องเขียนเป็น getContentPane() add(toolBar, BorderLayout.NORTH) มิฉะนั้นโปรแกรมจะทำงาน ผิด.
ตอนนี้คุณสามารถคอมไพล์และรันเพื่อดูว่ามันเหมือนกับผลการรันของฉันหรือไม่ (ดูรูปที่ 3)
4. ชายแดน
แม้ว่าเราจะใช้สีพื้นหน้าที่แตกต่างกันเพื่อแยกแยะพื้นที่ที่แตกต่างกัน แต่ก็ไม่มีความรู้สึกถึงลำดับชั้น แต่จะสวยงามกว่ามากเมื่อมีเส้นขอบ
ใน Java ตัวควบคุม Swing ทั้งหมดที่ขึ้นต้นด้วย J สามารถใช้เมธอด setBorder เพื่อตั้งค่าเส้นขอบสำหรับตัวเองได้ มีเส้นขอบหลายประเภท ทั้งแบบเส้นตรง แบบยกเว้า และแบบว่าง คุณสามารถรวมเส้นขอบเหล่านี้เข้าด้วยกันเพื่อสร้างสไตล์ของคุณเองได้อย่างอิสระ ต้องสร้าง Borders ทั้งหมดโดยใช้วิธีคงที่ที่ให้ไว้ใน javax.swing.BorderFactory เช่น:
เส้นขอบชายแดน = BorderFactory.createBevelBorder(BevelBorder.LOWERED,
สีใหม่ (45, 92, 162),
สีใหม่ (43, 66, 97),
สีใหม่ (45, 92, 162),
สีใหม่ (84, 123, 200));
ตอนนี้เราเปลี่ยน toolBar.setBackground(Color.white) เป็น toolBar.setBorder(border) มีเอฟเฟกต์สามมิติปรากฏขึ้นแล้วหรือยัง?
การต่อสู้เชิงปฏิบัติ - เขียนชื่อของคุณเอง
ตอนนี้เรามีอินเทอร์เฟซที่ใช้งานได้ แม้ว่าจะไม่สามารถทำอะไรได้ แต่อย่าตกใจ กรุงโรมไม่ได้สร้างเสร็จภายในวันเดียว
ตอนนี้เรามาจัดเตรียมเมนู "เกี่ยวกับ" ในพื้นที่เมนูเพื่อแสดงข้อมูลโปรแกรม คุณไม่ต้องการให้ผู้อื่นทราบชื่อของคุณหรือไม่? สวิงเองมีปุ่มควบคุมสำเร็จรูป JButton เราเพียงแต่ต้องสร้างปุ่มใหม่: JButton about = new JButton("about"); ปุ่มนี้ควรวางไว้ในพื้นที่เมนูแทนที่จะเป็นที่อื่นอย่างไร? เราสามารถเพิ่มโค้ดต่อไปนี้: toolBar.add(about); เฮ้ ทำไมไม่มีการตอบกลับเมื่อคลิกที่ปุ่ม? เนื่องจากคุณไม่ได้บอกโปรแกรมว่าต้องทำอย่างไรเมื่อคุณคลิกปุ่ม ในการเพิ่มการตอบสนองต่อเหตุการณ์ให้กับปุ่ม ก่อนอื่นคุณต้องใช้ about.addActionListener(this) เพื่อบอกให้โปรแกรมฟังเหตุการณ์เมื่อกดปุ่ม เนื่องจาก ActionListener เป็นอินเทอร์เฟซของโปรแกรม เราจึงต้องดำเนินการเล็กน้อยด้วย การประกาศคลาส การแก้ไข: คลาสสาธารณะ KyodaiUI ขยาย JFrame ใช้งาน ActionListener {...} วัตถุประสงค์ของการนำอินเทอร์เฟซ ActionListener ไปใช้คือการบอกโปรแกรมว่าฉันต้องการจัดการเหตุการณ์ แน่นอน ในที่สุดเราก็ต้องเพิ่มโค้ดเพื่อตอบสนองต่อเหตุการณ์:
การกระทำที่เป็นโมฆะสาธารณะดำเนินการ (ActionEvent e) {
ถ้า (e.getSource() == เกี่ยวกับ) {
JOptionPane.showMessageDialog(นี่คือ "ชื่อของฉัน", "เกี่ยวกับ",
JOptionPane.INFORMATION_MESSAGE);
กลับ ;
-
-
ในหมู่พวกเขา e.getSource() แสดงถึงการควบคุมที่ทำให้เกิดเหตุการณ์ในปัจจุบัน เนื่องจากมักจะมีมากกว่าหนึ่งการควบคุมในโปรแกรมของเรา การควบคุมเหล่านี้จึงอาจสร้างเหตุการณ์ ดังนั้นเราจึงต้องใช้วิธีนี้เพื่อค้นหาการควบคุมที่สร้างเหตุการณ์
สรุป
มาทบทวนสิ่งที่เราเรียนรู้วันนี้กัน: อันดับแรก เราเข้าใจคอนเทนเนอร์ระดับบนสุด และเรายังรู้ว่าการควบคุมแบ่งออกเป็นการควบคุมคอนเทนเนอร์และการควบคุมที่ไม่ใช่คอนเทนเนอร์ สุดท้ายนี้ เรายังจัดการกับปุ่มต่างๆ ด้วย เหตุการณ์เล็กน้อย
ดำเนินไปโดยไม่ได้บอกว่าคุณเรียนรู้และฝึกฝนไปพร้อมๆ กัน ฉันขอฝากการบ้านเล็กๆ น้อยๆ ไว้ให้คุณเพื่อช่วยคุณรวบรวมสิ่งที่คุณได้เรียนรู้ในวันนี้: ปุ่มที่เราเพิ่มไว้ด้านบนนั้นอยู่ตรงกลางแถบเมนูและไม่สวยงาม กรุณาใส่ไว้ในลองทางซ้ายหรือขวา
สุดท้ายนี้ ฉันอยากจะให้ข้อมูลอ้างอิงที่ดีกว่าแก่คุณ:
●การสร้าง GUI ด้วย JFC/Swing
http://java.sun.com/docs/books/tutorial/uiswing/index.html
●กราฟิก 2D
http://java.sun.com/docs/books/tutorial/2d/index.html
●JDK API
http://java.sun.com/j2se/1.4.2/docs/api/index.html