Android Layout
แอพพลิเคชั่น Android สิ่งหนึ่งที่สำคัญคือ Layout หรือหน้าตาของแอพ ที่สวยงาม น่าใช้ และสะดวกต่อการใช้ ซึ่งมีอยู่หลายรูปแบบด้วยกัน
ก่อนอื่นเรามารู้จักกับคำว่า “ Layout ” กันก่อนดีกว่า
Layout คือการออกแบบโครงสร้างของหน้าตา User interface ของ app widget ไม่ว่าจะเป็นการจัดวางภาพ ตัวอักษรตลอดจนสิ่งประกอบอื่น ๆ มาประกอบกัน
สามารถสร้างได้ 2 วิธี คือ
- สร้างโดย XML Layout
- สร้างโดยการเขียนโปรแกรม Runtime พื้นฐาน
การสร้าง Layout โดย XML Layout
วิธีนี้จะดีตรงที่ว่า เวลาเราจะแก้ UI ไม่จําเป็นต้องแก้โค้ดเลย และยังทำให้มองเห็นโครงสร้างของ UI ได้ง่ายอีกด้วย
คำสั่งเบื้องต้นของ XML มีดังนี้
android:id เป็น ID ที่เฉพาะของแต่ละ View
android:layout_width กำหนดความกว้างของ layout สามารถกำหนดได้ดังนี้
- android:layout_width=”wrap_content” เปลี่ยนความกว้างตามความยาวของ เนื้อหาใน view
- android:layout_width=”match_parent “ เปลี่ยนความกว้างตาม parent view
android:layout_height กำหนดความสูง layout
android:layout_weight ค่าอัตราส่วน (ratio) ที่เราต้องการกำหนด เทียบกับ layout ของ Parent เช่น
ถ้าจะใช้บอกความสูง โดยให้สูงเป็นครึ่งหนึ่งของ parent จะได้
android:layout_height=”0dp”
Layout_weight=”0.5”
ถ้าใช้บอกความกว้าง โดยให้กว้างเป็นครึ่งหนึ่งของหน้าจอ parent จะได้
android:layout_width=”0dp”
Layout_weight=”0.5”
หากเราตั้ง LinearLayout แบบ vertical เมื่อเราใช้ layout_weight เราต้องปรับ layout_height เป็น 0dp และหากเราตั้งแบบhorizontal เราก็ต้องปรับ layout_width เป็น 0dp เช่นเดียวกัน
android:layout_marginTop กำหนดช่องว่างของด้านบน ของ layout
android:layout_marginBottom กำหนดช่องว่างของด้านล่าง ของ layout เป็นการเว้นระยะด้านล่าง ระหว่างตัว View กับระยะของ Parent
android:layout_marginLeft กำหนดช่องว่างของด้านซ้าย ของ layout
android:layout_marginRight กำหนดช่องว่างของด้านขวา ของ layout
android:layout_x กำหนดค่าตำแหน่งแกน x ของ layout
android:layout_y กำหนดตำแหน่งค่าแกน y ของ layout
Android:padding เอาไว้สำหรับเว้นระยะ ระหว่าง content กับขอบ border ของ View โดยเป็นการกำหนดทุกด้าน กำหนดแยกเฉพาะแต่ละด้าน
- android:paddingLeft
- android:paddingRight
- android:paddingTop
- android:paddingBottom
layout_gravity เป็นการปรับตำแหน่งของ layout หรือ view นั้น ๆ
gravity เป็นการกำหนดตำแหน่งเนื้อหาภายใน View หรือ Layout สามารถกำหนดได้หลายค่า โดยเชื่อมด้วยเครื่องหมาย “ | “ (vertical bar) ค่าที่กำหนดได้คือ
ตัวอย่าง
การสร้าง Layout โดยการเขียนโปรแกรม Runtime พื้นฐาน
วิธีนี้ไม่จำเป็นต้องเจาะจงตำแหน่งหรือจะใช้ View อะไรล่วงหน้า โปรแกรมจะคำนวณแล้วกำหนดเองว่า จะวางอะไร วางไว้ตรงไหนเอง แต่ก็มีความยากกว่าวิธี XML เพราะการไปเขียนลงในโปรแกรม ต้องใช้จินตนาการถึงรูปแบบที่จะออกมาสูงมาก
รูปแบบต่างๆของ View Group มีดังนี้
- Absolute Layout จัดรูปแบบของสิ่งต่างๆให้อยู่ในตำแหน่ง แกน X และแกน Y ตามที่ต้องการโดยที่หน้าจอจะต้องมีจุด x,y ที่ชัดเจน
หมายเหตุ ใน Android V4.x ถูกยกเลิกใช้ แต่ให้ใช้ RelativeLayout แทน
2. Frame Layout จัดรูปแบบของสิ่งของต่างๆ ในรูปแบบของ Frame ทำให้ widget ต่างๆ สามารถซ้อนทับกันแบ่งเป็น layout ได้ y
3. Linear Layout จัดรูปแบบขององค์ประกอบต่างๆให้อยู่ในแนวเดียวกัน โดยจัดได้ทั้งแบบ horizontal (แนวนอน) และvertical (แนวตั้ง) หรือจะจัดให้อยู่ทั้งแนวตั้งแนวนอนผสมกันก็ได้
4. Relative Layout จัดรูปแบบของวัตถุใน layout โดยวัตถุแต่ละอันสามารถอ้างอิงตำแหน่งของกันและกันได้ เป็น layout ที่มีความยืดหยุ่นสูงมาก
5. Table Layout เป็นการจัดรูปแบบของวัตถุ โดยการกำหนดเป็น Row และ column
