บทที่ 5 การออกแบบหน้ าจอด้ วยเลย์ เอาต์ ( Screen design with Layout)

สาระบทเรียน

1. การออกแบบหน้ าจอแบบลีเนียร์ เลย์เอาต์ (Linear Layout)

2. การออกแบบหน้ าจอแบบรี เลทีฟเลย์เอาต์ (Relative Layout)
3. การออกแบบหน้ าจอแบบเฟรมเลย์เอาต์ (Frame Layout)
4. การออกแบบหน้ าจอแบบแอบโซลูตเลย์เอาต์ (Absolute Layout)
5. การออกแบบหน้ าจอแบบเทเบิลเลย์เอาต์ (Table Layout)

จากที่ผ่านมาเมื่อมีองค์ประกอบหน้ าจอจานวนมากขึ ้น การกาหนดตาแหน่งจุดวางต้ องการคลิกลากๆ

วาง อาจไม่ได้ สมใจ เนื่องจากแต่ละตัวอาจเด้ งไปมา เนื่องจากเครื่ องทาการคานวณการจัดวางให้ ซึ่ง
อาจจะไม่ต้องตามที่ต้องการ โดยทางแก้ ไขจะต้ องกาหนดวิธีเอาเองโดยจะต้ องจัดเรี ยงกลุ่มองค์ประกอบ
ต่างๆ ด้ วยวิธีที่จะกล่าวต่อไปได้ แก่

การออกแบบหน้ าจอแบบลีเนียร์ เลย์ เอาต์ (LinearLayout )

ลีเนียร์ เลย์เอาต์คือเลย์เอาต์ที่มีการจัดเรี ยงอิลิเมนต์ที่อยู่ภายในเป็ นแบบเส้ นตรง เช่น เรี ยงในแบบตาม
แนวตัง้ (Vertical) หรื อเรี ยงในแบบตามแนวนอน (Horizontal) โดยกาหนดที่คุณสมบัติ (Property)
android:orientation ส่ ว น แ ส ด ง ผ ล แ บ บ ลี เ นี ย ร์ เ ล ย์ เ อ า ต์ จ ะ อ ยู่ ใ น อิ ลิ เ ม น ต์
<LinearLayout>...</LinearLayout> การกาหนดแนวมี 2 แบบคือ

แนวตัง้ กาหนดผ่านแอตทริ บวิ ต์ android:orientation=“vertical”

 82

แนวนอน กาหนดผ่านแอตทริบวิ ต์ android:orientation=“horizontal”

ตัวอย่ างการกาหนดแนวในลีเนียร์ เลย์ เอาต์

ตัวอย่างต่อไปจะลองนาเลย์เอาต์เดิมมาเรี ยงแบบแถวตรง linear แบบแนวดิง่ และแนวนอน โดยนา

ไฟล์ Layout activity_main.xml เดิมมาแก้ ไขตามนี ้
• เปลี่ยนจาก <android.support.constraint.ConstraintLayout ให้ เป็ น LinearLayout (2 จุดต้ นไฟล์
และท้ ายไฟล์ ) เริ่มต้ น เครื่ องจะสร้ างโครงสร้ างมาให้ ก่อนแบบ
<android.support.constraint.ConstraintLayout จะลองมาเปลี่ยนไปใช้ ไปใช้ แบบ LinearLayout
แทน
• เพิ่มบรรทัด android:orientation = “vertical” เพื่อต้ องการจัดให้ รุปตามแนวดิง่
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
• เพิ่มคาสัง่ สร้ าง TextView และตัว Button เข้ าไป
ตัวอย่างคาสัง่ ของ TextView ในไฟล์ xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="สวัสดีแอนดรอย์"
android:textSize="25dp"/>
 83

ตัวอย่างคาสัง่ สร้ าง Button ในไฟล์ xml

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ปุ่ ม"/>

ให้ พิมพ์ตามเพื่อทราบผลลัพธ์ที่ได้ จากการใช้ คาสัง่

ทดสอบรันหรื อกดที่ Design เพื่อจอภาพที่ได้ จะพบว่าองค์ประกอบจะเรี ยงกันเป็ นแถวตามตาม

แนวดิง่
 84

ต่อไปให้ ใช้ รหัสคาสัง่ เดิม แต่เปลี่ยนแนวจากแนวดิง่ ให้ เป็ นแนวนอน โดยเปลี่ยนจาก Vertical มา
เป็ น Horizontal แทน แล้ วลองรันดู พร้ อมสังเกตุผลลัพธ์ที่ได้ มา

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

การออกแบบหน้ าจอแบบรีเลทีฟเลย์ เอาต์ (Relative Layout)

เป็ นลักษณะหน้ าจอที่ตาแหน่งที่อยูแ่ ต่ละอีลิเมนต์(หน่วยแสดงผล) จะอ้ างอิงจากอีลิเมนต์อื่น

 85

ส่วนแสดงผลแบบรี เลทีฟเลย์เอาต์ เป็ นส่วนแสดงผลที่ กาหนดให้ ตอนเริ่ มต้ นเมื่อสร้ างโปรเจ็กต์ แอน
ดรอยด์ขึ ้นมาด้ วยอิลิเมนต์ <RelativeLayout>...</RelativeLayout> มีการจัดเรี ยงอิลิเมนต์ที่อยู่ภายใน
โดยอ้ างอิงตาแหน่งของอิลิเมนต์นนๆ ั ้ กับอิลิเมนต์อื่นๆ ในเลย์เอาต์ หรื ออาจจะอ้ างอิงกับตัวเลย์เอาต์ที่อิลิ
เมนต์นนอยู
ั ้ ่ภายในก็ได้ ซึ่งสามารถอ้ างอิงผ่านไอดี (id) ของอิลิเมนต์หรื อเลย์เอาต์ เช่น ปุ่ ม login ใน
แนวดิ่งให้ วางอยู่ใต้ ช่องรับรหัสผ่านห่างลงมา 20 dp แนวนอนให้ วางอยู่กลางจอ ซึ่งโดยรวมแล้ วน่าจะเป็ น
ระบบการจัดวางที่ยืดหยุน่ ที่สดุ มีข้อดีหลายอย่าง

ตัวอย่ างการออกแบบหน้ าจอด้ วยรีเลทีฟเลย์ เอาต์

1. เริ่มจากการวางอิลิเมนต์หลักก่อน โดยพิมพ์โค๊ ตข้ างล่าง หรื อคลิกลากไปวางตาแหน่งที่ต้องการ

จากนันพิ
้ มพ์รายละเอียดเพิ่มดังตัวอย่าง
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/txtusername"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="40dp"
android:text="Username"
android:textSize="20sp" />
</RelativeLayout>
 86

เหตุที่ต้องทาอิลิเมนต์หลักก่อน เพราะว่าองค์ประกอบตัวต่อๆ ไป โดยจะอ้ างอิงจากอิลิเมนต์นี ้เช่น

กาหนดว่ากรอบรับ username ให้ วางไว้ ด้านขวามือข้ อความ username และให้ วางเสมอระดับเดียวกัน
2. วาง EditText เป็ นช่องรับ username โดยอ้ างอิงว่า ให้ อยูข่ วามือของข้ อความ Username จากข้ อ1
และอยูเ่ สมอแนวเดียวกันกับ Username

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/txtusername"
android:layout_toRightOf="@+id/txtusername"
android:layout_alignParentRight="true"/>

3. วางข้ อความ Password โดยอ้ างอิงว่า ให้ อยู่ด้านล่างข้ อความ Username และด้ านซ้ ายเสมอเป็ น
แนวเดียวกับ Username ด้ วย ดังนี ้
<TextView
android:id="@+id/txtusername"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="40dp"
android:text="Username"
android:textSize="20sp" />
<TextView
android:id="@+id/txtpassword"
 87

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txtusername"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="30dp"
android:text="Password"
android:textSize="20sp" />

4. วาง EditText เป็ นช่องรับ password โดยอ้ างอิงว่า ให้ อยู่ขวามือและฐานแนวเดียวกับ password
ข้ อ 3 และด้ านซ้ ายจัดให้ อยูเ่ สมอแนวเดียวกับช่องรับ username ข้ อ 1

<EditText //ช่องรับ password

android:layout_width="wrap_content"
android:layout_height="wrap_content"

5. วางปุ่ ม Sign in โดยอ้ างอิงกับ Password หรื อจะอ้ างอิงกับ Username ก็ได้ โดยใช้ หลักการ
เดียวกัน
 88

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/edit_password"
android:layout_centerHorizontal="true"
android:text="Sing In"/>

โดยลักษณะการอ้ างอิงจะเป็ นทอดๆ ตามลูกศร ดังรูป โดยขณะนี ้เราให้ Username เป็ นตัวหลัก ถ้ าขยับ
Username ตัวอื่นก็จะขยับลงทังแผง
้ เมื่อ run จะได้ ผลตามภาพด้ านล่าง
 89

การออกแบบหน้ าจอแบบเฟรมเลย์ เอาต์ (Frame Layout)

เฟรมเลย์เอาต์ (Frame Layout) คือเลย์เอาต์ที่มีการจัดวางอิลิเมนต์ตา่ งๆ เป็ นชันๆ ้ โดยจะเริ่ มวางอิลิ

เมนต์ที่มุมซ้ ายด้ านบนของเลย์เอาต์เสมอ จากนันจะน
้ าอิลิเมนต์ที่สร้ างทีหลังมาวางไว้ บนสุด ซึ่งการวาง
แบบนี ้จะเรี ยกอีกอย่างหนึง่ ว่า การวางแบบสแต็ค ทังนี
้ ้การสร้ างเฟรมเลย์เอาต์มีขนตอนต่
ั้ างๆ ดังต่อไปนี ้

ตัวอย่ างการออกแบบหน้ าจอด้ วยเฟรมเลย์ เอาต์

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="@android:drawable/alert_dark_frame"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="สวัสดีแอนดรอย์ KU"
android:textSize="24sp"
android:textColor="#ffff"
android:layout_height="fill_parent"
 90

android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>

และเมื่อดูกราฟิ กในแอนดรอยด์จะพบว่า Graphical Layout จะเห็นอิลิเมนต์ตา่ งๆ ซ้ อนกันอยู่ เป็ นชันๆ

้ ซึง่
เป็ นลักษณะของเฟรมเลย์เอาต์และเมื่อรันก็จะแสดงผลลัพธ์ ตามภาพ
 91

การออกแบบหน้ าจอแบบแอบโซลูตเลย์ เอาต์ (Absolute Layout)

แอบโซลูตเลย์เอาต์คือ เลย์เอาต์ที่มีการจัดวางอิลิเมนต์ ตา่ งๆ ที่อยู่ภายในตามตาแหน่งจริ งบนหน้ าจอ

โดยกาหนดตาแหน่งของอิลิเมนต์ผ่านพร็ อพเพอร์ ตี ้ android:layout_x และ android:layout_y สาหรับการ
สร้ างแอบโซลูตเลย์เอาต์มีขนตอนต่
ั้ างๆ ดังต่อไปนี ้

ตัวอย่ างการออกแบบหน้ าจอด้ วยแอบโซลูตเลย์ เอาต์ เลย์ เอาต์

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/next"
android:text="Next"
android:layout_x="10px"
android:layout_y="5px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_x="19dp"
android:layout_y="74dp"
android:text="First Name"
android:textSize="18sp"
 92

android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_x="140dp"
android:layout_y="54dp"
android:width="300px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_x="22dp"
android:layout_y="137dp"
android:text="Last Name"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_x="143dp"
android:layout_y="117dp"
android:width="300px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</AbsoluteLayout>
และเมื่อดูกราฟิ กในแอนดรอยด์จะพบว่า Graphical Layout จะเห็นอิลิเมนต์ตา่ งๆ ซ้ อนกันอยู่ เป็ นชันๆ
้ ซึง่
เป็ นลักษณะของแอบโซลูตเลย์เอาต์
 93

และเมื่อรันก็จะแสดงผลลัพธ์ ตามภาพ

การออกแบบหน้ าจอแบบเทเบิลเลย์ เอาต์ (Table Layout)

เทเบิลเลย์เอาต์คือเลย์เอาต์ที่มีการจัดวางอิลิเมนต์ตา่ งๆ เป็ นแบบตาราง

 94

โดยที่คอนโทรลแต่ละส่วนจะถือว่าเป็ น 1 คอลัมน์ นอกจากนี ้ยังสามารถเพิ่มแถวใหม่โดยเพิ่มแท็ก

TableRow

ตัวอย่ างการออกแบบหน้ าจอด้ วยเทเบิลเลย์ เอาต์

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="Username :"
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<EditText android:id="@+id/editText1"
android:layout_width="200dip"
android:layout_height="wrap_content">
</EditText>
</TableRow>
<TableRow android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="Password :"
android:id="@+id/textView2"
android:layout_width="wrap_content"
 95

android:layout_height="wrap_content">
</TextView>
<EditText android:id="@+id/editText2"
android:layout_width="200dip"
android:layout_height="wrap_content">
</EditText>
</TableRow>

<TableRow
android:layout_height= "wrap_content"
android:layout_width= "wrap_content"
android:id= "@+id/tableRow3">
<TextView android:text=""
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<Button android:layout_width="wrap_content"
android:text="Login"
android:id="@+id/button1"
android:layout_height="wrap_content">
</Button>
</TableRow>
</TableLayout>

และเมื่อดูกราฟิ กในแอนดรอยด์จะพบว่า Graphical Layout จะเห็นอิลิเมนต์ตา่ งๆ ซ้ อนกันอยู่ เป็ นชันๆ

้ ซึง่
เป็ นลักษณะของเทเบิลเลย์เอาต์
 96

และเมื่อรันก็จะแสดงผลลัพธ์ตามภาพ

จากบทนี ้ที่ผา่ นมาจะเป็ นการอธิบายถึงการใช้ งานเลย์เอาต์สาหรับออกแบบหน้ าจอแอพพลิเคชันเพื่อจัด

วางชิ ้นส่วนต่างๆ จอภาพ (UI–User Interface) ให้ สวยงามและใช้ งานได้ อย่างสะดวก สามารถสรุปได้ ดงั นี ้
ลิเนียร์ เลย์เอาต์คือ เลย์เอาต์ที่มีการจัดวางอิลิเมนต์ตา่ งๆภายในเป็ นแบบเส้ นตรง
รี เลทีฟเลย์เอาต์คือเลย์เอาต์ที่มีการจัดเรี ยงอิลิเมนต์โดยอ้ างอิงตาแหน่งของอิลิเมนต์นนๆ
ั ้ กับอิลิเมนต์
อื่นๆ
เฟรมเลย์เอาต์คือเลย์เอาต์ที่มีการจัดวางอิลิเมนต์ตา่ งๆ เป็ นชันๆ ้
แอบโซลูตเลย์เอาต์คือเลย์เอาต์ที่มีการจัดวางอิลิเมนต์ตา่ งๆ ที่อยูภ่ ายในตามตาแหน่งจริงบนหน้ าจอ
เทเบิลเลย์เอาต์ คือเลย์เอาต์ที่มีการจัดวางอิลิเมนต์ตา่ งๆ เป็ นแบบตาราง
 97

แบบฝึ กหัดท้ ายบท

1. Layout มีกี่รูปแบบ พร้ อมให้ แสดงความหมายต่างๆ

2. ให้ นิสิตสร้ าง Layout พร้ อมทังเขี
้ ยนคาสัง่ xml ตามรูป โดยใช้ LinearLayout , Relative Layout
พร้ อมแสดงผลลัพธ์ที่ได้

3. ให้ นิสิตสร้ าง Layout ตามภาพนี ้ โดยให้ เขียนในรูปแบบ Linear Layout , Relative Layout ,
Frame Layout, Absolute Layout, Table Layout