#21 การจัดการรูปแบบตัวอักษร

หน้าจอโปรแกรมเป็นส่วนสำคัญ เพราะผู้ใช้โปรแกรมจะใช้งานโปรแกรมของเราผ่านทางหน้าจอนี้ เราจะตกแต่งหน้าจอให้สวยงามมากขึ้น ด้วยการเปลี่ยนรูปแบบตัวอักษร และกำหนดขนาดของตัวอักษร ตามขั้นตอนดังนี้

 

ขั้นตอนการเปลี่ยนรูปแบบตัวอักษร

ในการเปลี่ยนรูปแบบตัวอักษร เราสามารถเลือกองค์ประกอบหน้าจอทั้งหมด และเปลี่ยนรูปแบบตัวอักษรทุกตำแหน่งพร้อมกันได้ โดยมีขั้นตอนดังนี้

 

1. คลิกเลือก Label ด้านบนสุด

th-java-java-gui-mvc-21-1

ภาพที่ 21-1 แสดงการคลิกเลือก Label

 

2. กดปุ่ม Shift บนคีย์บอร์ดค้างเอาไว้ และคลิกเลือกองค์ประกอบทั้งหมดบนหน้าจอ

th-java-java-gui-mvc-21-2

ภาพที่ 21-2 แสดงการกด Shift ค้างไว้และเลือกส่วนประกอบบนหน้าจอทั้งหมด

 

3. คลิกขวา จากนั้นเลือก Properties

th-java-java-gui-mvc-21-3

ภาพที่ 21-3 แสดงการกำหนดคุณสมบัติให้กับส่วนที่เลือก

 

4. จะปรากฏหน้าจอให้จัดการคุณสมบัติต่างๆ ของออบเจ็กต์ที่เราเลือกไว้

th-java-java-gui-mvc-21-4

ภาพที่ 21-4 แสดงการจัดการกับหลายๆ ออบเจ็กต์

 

5. คลิกที่ “...” หลังรายการ font

th-java-java-gui-mvc-21-5

ภาพที่ 21-5 แสดงการคลิกที่ ...

 

6. จะปรากฏหน้าจอให้จัดการตัวอักษรดังนี้

Font : เลือกชนิดตัวอักษรตามต้องการ

Font Style : เลือกรูปแบบตัวอักษรตามต้องการ

Size : เลือกขนาดเป็น 14 (ค่อยปรับเพิ่มภายหลัง)

th-java-java-gui-mvc-21-6

ภาพที่ 21-6 แสดงหน้าจอกำหนดคุณสมบัติตัวอักษร

 

Note:

สามารถดาวน์โหลดฟอนต์บุญจด (BoonJot) ได้ที่ คลิก

วิธีติดตั้งฟอนต์ คลิก

หรือเลือกใช้ฟอนต์ได้ตามต้องการ

 

7. เมื่อกำหนดค่าเสร็จแล้วคลิกที่ปุ่ม OK และคลิกปุ่ม Close

th-java-java-gui-mvc-21-7

ภาพที่ 21-7 แสดงการคลิกที่ปุ่ม “Close”

 

8. จะเห็นว่าการแสดงผลตัวอักษรเป็นไปตามที่เราต้องการแล้ว

th-java-java-gui-mvc-21-8

ภาพที่ 21-8 แสดงรูปแบบตัวอักษรเปลี่ยนไปตามที่กำหนด

 

 

ขั้นตอนการเพิ่มขนาดตัวอักษร

เราจะเพิ่มขนาดอักษรที่ Label ทั้ง 2 ตำแหน่ง ซึ่งมีขั้นตอนดังนี้

 

1. คลิกเลือก Label ด้านบน

th-java-java-gui-mvc-21-9

ภาพที่ 21-9 แสดงการคลิกที่ Label ด้านบน

 

2. กด Shift ค้างไว้ และคลิกเลือก Label ด้านล่าง

th-java-java-gui-mvc-21-10

ภาพที่ 21-10 แสดงการกด Shift ค้างไว้เลือกเลือก Label ด้านล่าง

 

3. คลิกขวา และเลือก Properties

th-java-java-gui-mvc-21-11

ภาพที่ 21-11 แสดงการกำหนดคุณสมบัติให้กับ Label ที่เลือก

 

4. จะปรากฏหน้าจอให้จัดการ Properties และคลิกที่ “...” หลัง font

th-java-java-gui-mvc-21-12

ภาพที่ 21-12 แสดงการคลิกที่ ...

 

5. เพิ่มขนาดอักษรเป็น 18

th-java-java-gui-mvc-21-13

ภาพที่ 21-13 แสดงการเพิ่มขนาดตัวอักษรตามต้องการ

 

6. คลิกที่ปุ่ม “OK” และปุ่ม “Close” ขนาดอักษรจะเพิ่มขึ้นตามที่เรากำหนด

 

ในตอนต่อไปเราจะเปลี่ยนข้อความบน Button และ Label กันค่ะ  😛 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ