บทที่ 5 การออกแบบและกำหนดค่าเลย์เอาท์

5.1 Layout แบบต่างๆ เช่น Linear Layout, Relative Layout, Absolute layout, Frame Layout

Table Layout ,List-detail layout with ScrollView and LinearLayout

ในบทนี้จะได้ศึกษาถึงการใช้งานเลย์เอาต์แบบต่างๆ เพื่อใช้ในการออกแบบหน้าจอการใช้งาน

ของแอพพลิเคชัน ซึ่งในที่นี้ผู้เขียนขอเสนอเลย์เอาต์ที่สำาคัญจำานวน 5 รูปแบบคือ

• ลีเนียร์ เลย์เอาต์ (Linear Layout)
• รีเลทีฟ เลย์เอาต์ (Relative Layout)
• เฟรม เลย์เอาต์ (Frame Layout)
• แอบโซลูต เลย์เอาต์ (Absolute Layout)
• เทเบิล เลย์เอาต์ (Table Layout)

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

LinearLayout — การเรียงแบบแนวตรง

________________________________________________________________

ทำความรู้จักกับส่วนแสดงผลแบบ LinearLayout

ลีเนียร์ เลย์เอาต์ (Linear Layout) คือ เลย์เอาต์ที่มีการจัดเรียงอิลิเมนต์ที่อยู่ภายในเป็นแบบ

เส้นตรง เช่น เรียงในแบบตามแนวตั้ง (Vertical) หรือเรียงในแบบตามแนวนอน (Horizontal) โดยที่มีการกำาหนด

คุณสมบัติ (Property) android:orientation เพื่อให้เข้าใจง่ายที่สุด ลองมาดูแบบนี้ก่อน LinearLayout เป็นการจัดเรียงเสมือนว่าภายใต้กลุ่มมีการจัดเรียงเป็นแถวตรง ( 1 คอลัมน์ 1 แถว) สามารถสั่งให้ภายในจัดเรียงแนวนอนหรือแนงดิ่งได้

ส่วนแสดงผลแบบ LinearLayout หมายถึง ส่วนแสดงผลในแนวเส้นตรง โดยอยู่ในความรับผิดชอบ

ของอิลิเมนต์ <LinearLayout>…</LinearLayout> ซึ่งมี 2 แบบคือ

·แนวตั้ง อยู่ในความรับผิดชอบของแอตทริบิวต์ android:orientation=“vertical”

·แนวนอน อยู่ในความรับผิดชอบของแอตทริบิวต์ android:orientation=“horizontal”

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

ตัวอย่างต่อไปนี้ จะลองนำ Layout เดิมมาเรียงแบบแถวตรง 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”>

• เพิ่มคำสั่งตัว text และตัว Button เข้าไป

ตัวอย่างคำสั่งของ Text ในไฟล์ xml

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”สวัสดีแอนดรอย์”

android:textSize=”25dp”/>

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

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”สวัสดีแอนดรอย์”

android:textSize=”25dp”/>

<Button

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”ปุ่ม”/>

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

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

ต่อไปให้ใช้ code เดิม แต่ให้จัดเรียงจากแนวดิ่งให้เป็นแนวนอน โดยเปลี่ยนจาก 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”>

. — RelativeLayout อ้างอิงจากอันอื่น

ทำความจักกับส่วนแสดงผลแบบ RelativeLayout

ส่วนแสดงผลแบบ RelativeLayout เป็นส่วนแสดงผลเริ่มต้น เมื่อสร้างโปรเจ็กต์ Android ขึ้นมา ซึ่ง

อยู่ในความรับผิดชอบของอิลิเมนต์ <RelativeLayout>…</RelativeLayout>หลักการของการจัดส่วนแสดงผลแบบนี้ก็คือ เมื่อใช้ widget ใดๆ ก็ตามในส่วนแสดงผลจะอาศัยการอ้างอิงตำแหน่งระหว่างกัน เพื่อระบุตำแหน่งให้กับ widget แต่ละตัวนั่นเองรีเลทีฟ เลย์เอาต์ (Relative Layout) คือ เลย์เอาต์ที่มีการจัดเรียงอิลิเมนต์ที่อยู่ภายใน โดย

อ้างอิงตำแหน่งของอิลิเมนต์นั้นๆ กับอิลิเมนต์อื่นๆ ในเลย์เอาต์ หรืออาจจะอ้างอิงกับตัวเลย์เอาต์ที่อิลิเมนต์นั้นอยู่ภายในก็ได้ ซึ่งสามารถอ้างอิงผ่าน id ของอิลิเมนต์หรือเลย์เอาต์ ทั้งนี้การสร้างรีเลทีฟ เลย์เอาต์มีขั้นตอนต่างๆ ดังต่อไปนี เป็นการจัดต่ำแหน่งโดยสามารถอ้างอิงจากองค์ประกอบอันอื่น เช่น ปุ่ม login ในแนวดิ่งให้วางอยู่ใต้ช่องรับรหัสผ่านห่างลงมา 20 dp แนวนอนให้วางอยู่กลางจอ ซึ่งโดยรวมแล้วน่าจะเป็นระบบการจัดวางที่ยืดหยุ่นที่สุด มีข้อดีหลายอย่างซางจะกล่าวถึงต่อไป แต่ก็เป็นระบบที่ทำให้ปวดหัวอยู่บ้างมากพอสมควร เนื่องจากการวางที่หน้าจอ บางตัวจะดิ้นไปไม่อยู่ในตำแหน่งที่ต้องการ เช่นให้ทำหน้าจอ Loin แบบ RelaviteLayout

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

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>

เหตุที่ต้องทำตัวแรกให้พร้อมก่อน เพราะว่าองค์ประกอบตัวต่อๆ ไป โดยจะอ้างอิงจากตัวนี้เช่นกำหนดว่า กรอบรับ 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”

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” />

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

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

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:inputType=”textPassword” //input ชนิด Password

android:ems=”10"

android:layout_alignBaseline=”@+id/txtpassword” //แนวเดียวกับ Password

android:layout_toRigthOf=”@+id/txtusername” //ด้านซ้ายเสมอกับช่องรับ user

android:layout_alignParentRight=”true”/>

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

<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

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”

android:layout_width=”fill_parent”

android:gravity=”center”/>

</FrameLayout>

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

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

Absolute Layout

________________________________________________________

แอบโซลูต เลย์เอาต์ (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”

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>

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

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

Table Layout

__________________________________________________________________________________

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

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

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

<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”

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>

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

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

สรุปท้ายบท

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

กับผู้ใช้งาน (UI–User Interface) ให้สวยงามและใช้งานได้อย่างสะดวกดังนี้

ลิเนียร์ เลย์เอาต์ (Linear Layout) คือ ลย์เอาต์ที่มีการจัดวางอิลิเมนต์ต่างๆภายในเป็นแบบเส้นตรง

รีเลทีฟ เลย์เอาต์ (Relative Layout) คือ เลย์เอาต์ที่มีการจัดเรียงอิลิเมนต์โดยอ้างอิงตำแหน่ง

ของอิลิเมนต์นั้นๆ กับอิลิเมนต์อื่นๆ

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

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

ตามตำแหน่งจริงบนหน้าจอ

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