โดยปกติแล้วเวลาเราออกแบบฟอร์มหรือส่วนติดต่อกับผู้ใช้ (Graphic User Interface) ในฟอร์มหนึ่งก็จะประกอบไปด้วย คอมโพเนนท์ต่างๆ เพื่อรอรับค่าหรือโต้ตอบกับผู้ใช้ เช่น ฺพวก Button, Listbox, Editbox, Combobox และอื่นอีกมากมาย เวลาเราอยากได้คอมโพเน้นท์พวกนี้ ก็เพียงแค่ ลาก และ ก็วาง ลงบนฟอร์มเท่านั้น แต่ปัญหาคือเมื่อเวลาเราขยายหรือขนาดของฟอร์มหลักสังเกตุว่าตำแหน่งของคอมโพเน้นท์ที่เราวางลงไป มันอยู่ตำแหน่งเดิมหรือนิ่งๆ ไม่ได้ขยับตามซึ่งบางทีเราเองอยากให้มันขยับ หรือปรับตำแหน่งตามขนาดของฟอร์มด้วย หรือบางที่เราต้องการให้คอมโพเน้นท์บางตัวอยู่ ณ ตำแหน่งนั้นๆของฟอร์มตลอดไม่ว่าจะเกิดอะไรขึ้นกับฟอร์ม ในครั้งนี้เราจะมาเรียนรู้การจัดการกับตำแหน่งและขนาดของคอมโพเน้นท์บนฟอร์มกันครับ.....^_^
1. การยืด การหด ของคอมโพเน้นท์
Property ในการจัดการกับการย่อ ขยาย ยืด หด ของคอมโพเน้นท์ใน Delphi ชื่อว่า Anchors มาดูกันเลยครับ ให้เราสร้างโปรเจคขึ้นมาตัวหนึ่ง แล้ววางคอมโพเน้นท์พื้นฐานลงไปครับ เช่น Button Listbox
ทีนี้ผมลองขยายขนาดของฟอร์มดูครับ สังเกตว่า Listbox กับ Buton มันไม่ขยับตาม (โดยปกติมันก็ไม่ขยับอยู่แล้วครับ)
แต่ครั้งนี้ผมต้องการให้มันขยายตามฟอร์มหลัก ผมก็สามารถทำได้โดยไปกำหนด Property ที่มีชื่อว่า Anchors ครับ
พอเรากำหนด ค่าของ Property "Anchors" ตามภาพด้านบนแล้ว ที่นี้พอเรายืดหดฟอร์มจะมีผลกับ Listbox และ Button ตามค่าที่เรากำหนดเลยครับ
คุณสมบัติของ Property "Anchors" คือ กำหนดให้แต่ละด้านของคอมโพเน้นท์ "ยึดเกาะ" กับฟอร์มหรือไม่ อย่างเช่น ใน Listbox ตอนแรกที่เราลากมาวางบนฟอร์มค่าของ Anchors ที่กำหนดคือ akLeft และ akTop เป็น True (ยืดด้านบนและซ้ายไว้) ส่วน akRight และ akBottom เป็น False (ไม่ยึดเกาะทั้งขวาและลาง) สังเกตว่าในตอนแรกเมื่อเราขยายฟอร์มลงมามุมล่างขวา Listbox มันไม่ขยับตาม เพราะว่า akRight และ akBottom มีค่าเป็น False หรือสั่งไม่ให้มันยึดนั่นเอง ไม่ว่าเราจะขยายขนาดฟอร์มให้ใหญ่แค่ไหน ด้านขวาและล่างของ Listbox ก็จะไม่มีทางขยับตาม ต่อมาเราได้เปลี่ยนแปลงค่า akRight และ akBottom ให้เป็น True จะสังเกตว่าพอเราขยายฟอร์ม ด้านขวาและล่างของ Listbox จะยืดเกาะหรือขยับตามฟอร์มแม่นั้นไปครับ ในส่วนของปุ่ม Button ก็คล้ายกันครับ คือ เราเปลี่ยนให้มัน "ยึดด้านขวาและบน" และ "ปล่อยด้านซ้ายและล่าง" จะทำให้ขนาดของปุ่มไม่เปลี่ยนแปลงตามฟอร์ม เพราะเราไม่ได้ยืดด้านซ้ายและล่างไว้นั่นเองครับ
Property ในการจัดการกับการจัดวางแนวตั้งแนวนอนของคอมโพเน้นท์ใน Delphi ชื่อว่า Align มาดูกันเลยครับ ให้เราวางคอมโพเน้นแล้วกำหนดค่า Property "Align" ของคอมโพเน้นท์ต่างๆ ตามรูปด้านล่างนี้ สังเกตว่าในตอนที่เราวางคอมโพเน้นท์หนึ่งๆ ลงบนฟอร์มในขณะ Property Align จะมีค่าเป็น alNone โดย Default แต่หลังจากที่เราเปลี่ยนแปลงค่าของ Align ทำให้ตำแหน่งของคอมโพเน้นท์เปลี่ยนไปทันที
ทีนี้เราลองขยายขนาดของฟอร์มดูครับ สังเกตว่าตำแหน่งและขนาดของปุ่ม Button ไม่มีผลการเปลี่ยนแปลงแต่อย่างใด ส่วนตำแหน่งของ Memo1 จะเลื่อนไปตามขนาดของฟอร์มและอยู่ด้านขวาของฟอร์มเสมอ ในส่วนของคอมโพเน้นท์อีก 3 ตัวที่เหลือก็เช่นเดียวกันคือจะอยู่ ณ ตำแหน่งนั้นตลอดไม่ว่าจะยืดหรือหดฟอร์ม ที่เป็นเช่นนั้นเพราะว่า เมื่อมีการกำหนด Property Align ค่าของ Property Anchors จะเปลี่ยนแปลงตาม ลองกด F11 แล้วสังเกตุค่า Anchors ที่ แท็บ Object Inspector ดูได้ครับ
นอกจาก Memo1 จะอยู่แนวขวาของฟอร์มตลอดแล้ว ทีนี้เรามาทำให้ Memo1 ขยายขนาดตามฟอร์มกันบ้าง ก็ใช้ Anchors ตามที่ได้กล่าวมาแล้วก่อนหน้านี้เลยครับ คือเราต้องสั่งให้ด้านซ้ายของ Memo1 "ยึดกับฟอร์มไว้" ครับ แล้วลองขยายดูครับ
เป็นยังงัยบ้างครับ ไม่ยากใช่มั้ยครับ สำหรับคนที่เพิ่งเริ่มศึกษา Delphi อาจจะยังไม่รู้ตรงนี้ครับ ก็คิดว่าคงเป็นประโยชน์อยู่บ้าง ตอนผมศึกษาแรกๆ ก็งงๆ อยู่เหมือนกัน กว่าจะเข้าใจตรงนี้ได้
ศึกษาเพิ่มเติมได้ครับที่ Mobile Tutorial: Using Layout to Adjust Different Form Sizes or Orientations (iOS and Android)
สำหรับท่านใดที่ต้องการศึกษาการพัฒนาโปรแกรมด้วย Delphi อย่างรวดเร็ว ลัดสั้น ตรงจริง ผมขอแนะนำให้ศึกษาจากสื่อการสอนของบริษัท เดลส์เน็ท เอ็นเทอร์ไพรส์ จำกัด (www.delsnet.com) ครับ ส่วนตัวผมก็เริ่มต้นจากตรงนั้น จนวันนี้เขียนโปรแกรมด้วย Delphi มาโดยตลอด จนเขียนโปรแกรมหารายได้เสริมตอนเรียนมหาลัยได้สบายๆ เลยครับ เพราะเข้าใจและทำตามเองได้ครับ
ขอบคุณครับ
ตอบลบ