สร้าง user interface อย่างง่ายใน android studio ตอนที่ 1

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
android android studio user interface

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ android android studio user interface

ดูแล้ว 10,052 ครั้ง




เนื้อหาตอนนี้ เราจะใช้งาน Android Studio Layout Editor เพื่อสร้างแบบ layout ที่ประกอบด้วย text box และ
button ตามตัวอย่างรูปด้านล่าง
 
 

 
 
ต่อจากบทความเดิม
 
android studio สร้างอะไรมาให้ใน android project ที่เราสร้าง 
 
เรายังอยู่ที่ app ชื่อ study001
 
สำหรับหน้าตา user interface ใน android app นั้น จะสร้างโดยใช้รูปแบบลำดับขั้นของ layout (ViewGroup objects) 
และ widget (View objects) 
Layout เป็นส่วนที่ควบคุมการจัดการเกี่ยวกับการจัดตำแหน่งของ child view บนหน้าจอ 
Widget คือ UI component อย่างเช่น button และ text box 
ดูรูปแบบ โครงสร้างการจัดวางแบบลำดับขั้นของ layout ตามรูปด้านล่าง
 
 


 
 
Android ใช้งานรูปแบบภาษา XML ในการจัดการกับ ViewGroup และ View คลาส ดังนั้น เกือบทั้งหมด
ของ UI (user interface) จะอยู่ในรูปแบบของ XML ไฟล์  อย่างไรก็ตาม ในที่นี้ เราจะใช้วิธีการสร้าง layout โดยใช้
Android Layout Editor ซึ่งจะเป็นตัวไปสร้างรูปแบบ XML ให้เราอีกที โดยวิธีการจะง่ายดาย เพียงลางวาง และจัด
ตำแหน่ง view object ต่างๆ ตามต้องการ
 
 
 

การใช้งาน Layout Editor

เรายังอยู่ที่ app ชื่อ study001 ให้ทำตามขั้นตอนต่อไปนี้
1. ใน Android Stuido หน้าต่าง Project ให้เปิดไฟล์ app > res > layout > activity_main.xml
 
 


 
 
2. เพื่อให้หน้า Layout Editor มีพื้นที่แสดงชัดเจน ให้ซ่อนหน้าต่าง Project ไปก่อน โดยเลือก 
View > Tool Windows > Project (หรือเลือกไอคอน Project ที่อยู่ฝั่งซ้ายของ Android Studio)
3. ถ้าในหน้า Editor แสดง XML ซอร์สโค้ดอยู่ ให้คลิกที่แท็บ Design เพื่อให้แสดงมุมมอง ออกแบบ
4. คลิกเลือก Select Design Surface แล้วเลือก Blueprint
 
 


 
 
5. คลิกเลือก Show ในแถบเครื่องมือของ Layout Editor แล้วตรวจสอบว่า Show Constraints ถูกติ้กเลือก
6. ตรวจสอบให้ Autoconnect ถูกปิดไว้ โดยสังเกตจาก tooltip ข้อความที่ขึ้นแจ้งว่าเป็น Turn On Autoconnect 
(ซึ่งจะหมายถึงตอนนี้มันถูกปิดอยู่)
7. กำหนด Default Margins และ 16 
8. คลิก Device for Preview ในแถบเครื่องมือ แล้วเลือก 5.5, 1440 × 2560, 560dpi (Pixel XL).
 
หน้าตาของหน้า Editor จะแสดงคร่าวๆ ประมาณรูปด้านล่าง
 
 

 
 
 
หน้าต่างโครงสร้าง Component ที่แสดงด้านล่างขวา จะแสดงถึงรูปแบบของ layout แบบลำดับขั้น ในกรณีนี้จะพบว่า
root view จะเป็น ConstraintLayout และมี TextView อยู่ด้านใน
 
 


 
 
ConstraintLayout เป็น layout ที่กำหนดตำแหน่งของ view แต่ละตัว โดยขึ้นกับขอบเขตที่จำกัดของ view ที่อยู่ใกล้ 
และตัว layout หลัก  ในนี้ เราสามารถสร้าง layout ได้ทั้งแบบง่าย และแบบที่มีความซับซ้อนโดยใช้ 
view แบบลำดับขั้นแนวราบ เพื่อหลีกเลี่ยงการใช้งานในรูปแบบโครงสร้างตาข่ายหรือเป็นชั้นๆ 
อย่างที่แสดงในรูปที่ 2 ที่มี layout ซ้อนอยู่ใน layout อีกที ซึ่งรูปแบบดังกล่าวนี้จะมีผลให้ต้องใช้เวลาในการสร้าง UI เพิ่มขึ้น
 
ยกตัวอย่าง ดูภาพประกอบ 
    - View A แสดงโดยห่างจากขอบด้านบนของ layout หลัก 16dp
    - View A แสดงโดยห่างจากขอบด้านซ้ายของ layout หลัก 16dp
    - View B แสดงขยับออกจากทางด้านขวา View A เท่ากับ 16dp
    - View B ถูกจัดตำแหน่งอยู่ไว้อยู่เหนือ View A
 

 
 
ในลำดับต่อไป เราจะสร้างรูปแบบของ layout คล้ายกับแนวทางข้างต้น 
 
 

การเพิ่ม text box

1. เริ่มต้น เราต้องทำการลบส่วนต่างๆ ที่อยู่บน layout เดิมออกก่อน ดังนั้น ให้คลิกที่ TextView ใน Component Tree
แล้วกดปุ่ม Delete กล่าวคือ ให้เราลบ TextView ที่แสดงข้อความ Hello World ออกก่อน
2. ในเครื่องมือ ให้คลิกเลือก Text จากนั้นจะขึ้นส่วนจัดการเกี่ยวกับ text มาให้เราเลือก
3. ให้เลือก Plain Text โดยลากมาวางในหน้าต่าง Design Editor โดยวางบริเวณแภวๆ ด้านบนของ layout 
ส่วนที่เราลากมาใช้งานนี้คือ EditText widget ที่ใช้สำหรับรับการกรอกข้อมูลจากผู้ใช้ หรือเข้าใจง่ายๆ ก็คือ input text
ที่ใช้กันในรูปแบบ html
4. คลิกที่ view ในหน้าต่าง Design Editor ซึ่งก็คือ EditText ที่เราเพิ่งลากมาวาง เราจะเห็น ส่วนจัดการการปรับขนาด
แสดงขึ้นในแต่ละมุมของ view (รูปสี่เหลี่ยม) และมีจุดตรึงกำหนดขอบเขตอยู่แต่ละด้าน (รูปวงกลม) เพื่อให้การจัดการ
ทำได้ง่ายขึ้น เราอาจจะต้องทำการ Zoom การแสดงใน Editor ไปพร้อมๆ กับการปรับแต่ง
5. คลิก แล้วค้างจุดตรึงในส่วนด้านบน แล้วลากขึ้นไปจนติดกับด้านบนของ layout จากนั้นให้ปล่อย  จะเห็นว่าเกิด
การจำกัดขอบเขตขึ้น เพราะเราได้กำหนดไว้ว่า ให้ view มีค่า margin จากด้านบนของ layout เท่ากับ 16dp
6. ในทำนองเดียวกัน ในฝั่งซ้ายก็จะเกิดการจำกัดขอบเขตขึ้น เมื่อมีการกำหนด view ไปในฝั่งด้านซ้ายของ layout 
 
ผลลัพธ์ที่ได้จะมีลักษณะดังรูปภาพประกอบ
 
 
 


 

การเพิ่ม button

1. ในเครื่องมือให้คลิกเลือก Buttons
2. ลาก  Button เข้ามาใน design editor แล้ววางลงไปใกล้กับฝั่งด้านซ้ายของ layout
3. กำหนดขอบเขตจากฝั่้งด้านซ้ายของ button กับฝั่งด้านขวาของ text box





 
4. เพื่อจัดการ view ในการจัดเรียงในแนวนอน เราอาจจะต้องสร้างการจำกัดหรือควบคุมผ่าน text baseline กล่าวคือ
เราต้องการให้ข้อความที่แสดงใน button และข้อความที่แสดงใน text box อยู่ในแนวเดียวกับ ดังนั้นให้เราคลิกที่ button
แล้วคลิกเลือก Edit Baseline จะขึ้นจุดตรึง baseline แสดงใน button ให้คลิกค้างแล้วลากไปที่ baseline ที่แสดงใน
text box 
 
ผลลัพธ์ที่ได้ จะแสดงดังรูปภาพประกอบ
 
 


 
 
อ่านต่อที่บทความต่อไป 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ