Android App Development ฉบับสมบูรณ์

สรุปท้ายบท

ในบทน้เี ป็นการทบทวนให้ผูอ้ ่านไดศ้ ึกษาขนั้ ตอนการพฒั นาแอพพลเิ คชัน และไดล้ องเขยี นโปรแกรม
กำ� หนดการท�ำงานของแอพพลเิ คชนั จริงๆ ซง่ึ ถอื เป็นพน้ื ฐานทส่ี �ำคญั ในการพัฒนาแอพพลิเคชนั ในบทต่อไป

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

หลงั จากผู้อา่ นทดลองพัฒนาแอพพลิเคชนั เปลยี่ นค่าระยะทางจากไมล์เป็นกิโลเมตร และในทำ� นอง
กลับกนั เรยี บรอ้ ยแล้ว แบบฝึกหดั ในสว่ นน้ีใหผ้ ้อู า่ นพฒั นาแอพพลเิ คชนั ดงั นี้

z พัฒนาแอพพลิเคชันส�ำหรับเปล่ียนค่าเงินจากค่าเงินสกุลบาท (฿) เป็นค่าเงินสกุลดอลลาร์ ($)
และให้สามารถแปลงกลบั กันได้

z พฒั นาแอพพลเิ คชนั สำ� หรบั เปลย่ี นค่าอณุ หภมู ิจากเซลเซียส (Celsius) เป็นฟาเรนไฮต์ (Fahren-
heit) และให้สามารถแปลงกลับกนั ได้

z พัฒนาแอพพลิเคชนั เครอื่ งคดิ เลขขนาดเลก็ อยา่ งง่าย ท่ีสามารถบวก ลบ คณู และหารได้ โดย
มีกล่องขอ้ ความ 2 กลอ่ งส�ำหรับรับตวั เลข และปุ่มใหเ้ ลือกในการประมวลผล จากนั้นให้ผลลพั ธ์
แสดงออกทางหนา้ จอตามล�ำดับ

90 Android App Development ฉบับสมบูรณ์

5

การสร้างส่วนติดต่อกับผู้ใช้ (User Interface)

ในบทน้ีมีจุดประสงค์เพ่ือให้ผู้อ่านมีความคุ้นเคยกับส่วนต่อประสานกับผู้ใช้ หรือยูไอ (UI–User
Interface) ส�ำหรบั ใช้ในการพัฒนาแอพพลิเคชนั

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

ตัวอย่างแอพพลเิ คชันที่ใชง้ าน UI–User Interface

ในหัวข้อน้ีผู้เขียนจะออกแบบแอพพลิเคชันอย่างง่าย
เพ่ือใชใ้ นการอธบิ ายการใช้งานววิ ชนดิ ตา่ งๆ ท่มี คี วามจ�ำเป็นในการ
พฒั นาแอพพลเิ คชนั เบอ้ื งตน้ ไดแ้ ก่ TextView, EditText, ImageView,
Button และ ImageButton ซงึ่ ผเู้ ขยี นจะยงั ไมข่ อกลา่ วถงึ การเขยี น
โปรแกรมทซี่ บั ซ้อนแต่อยา่ งใด โดยมหี น้าตาของโปรแกรมดังนี้

หนา้ จอของแอพพลเิ คชันทจี่ ะพฒั นาในบทนี้

ววิ (View) คอื ส่วนประกอบตา่ งๆ ของหน้าจอทใ่ี ช้ส�ำหรบั สร้างสว่ นเช่อื มต่อกับผู้ใช้งาน เช่น ส่วนที่
ผู้อ่านใช้งาน Button และ EditText ในบทท่ีผ่านมา เป็นต้น

เร่ิมต้นสร้างโปรเจ็กต์

ข้ันตอนแรกในการพัฒนาแอพพลิเคชันทุกคร้ังก็คือ การสร้างโปรเจ็กต์ ซ่ึงผู้อ่านสามารถท�ำได้ตาม
ข้นั ตอนดงั ต่อไปน้ี
1. เปิดโปรแกรม Eclipse
2. คลิกเมนู File > New > Android 2 เลือก

Project

3. จะปรากฏไดอะล็อกบ็อกซ์ New Android Project เพือ่ กำ� หนดรายละเอยี ดตา่ งๆ ของโปรเจก็ ต์
4. ต้ังช่อื โปรเจก็ ต์ ในท่ีนต้ี ้ังช่ือว่า UI Guideline
5. ในส่วนของ Contents คลกิ เลือก Create new project in workspace เพือ่ สร้างโปรเจก็ ต์ใหม่
6. คลกิ เครอื่ งหมายถกู หนา้ Use default location เพอ่ื พฒั นาแอพพลเิ คชนั ในตำ� แหนง่ ทอี่ ยเู่ ดยี วกนั

กบั โปรเจก็ ต์ Eclipse
92 Android App Development ฉบับสมบูรณ์

7. คลิกปมุ่ 4 ตง้ั ชอ่ื โปรเจก็ ต์

เลือก 5
เลอื ก 6

7 คลิก
8. จะปรากฏไดอะล็อกบอ็ กซ์ New Android Project ในสว่ นท่ี 2 สำ� หรบั เลือกเวอรช์ นั ของ Android
9. คลกิ เลอื กเวอรช์ นั ของ Android ทจี่ ะพัฒนา ในทน่ี ้เี ลือก 4.0.3
10. คลิกปมุ่

เลอื ก 9

10 คลกิ

บทท่ี 5 การสร้างส่วนติดต่อกับผู้ใช้ (User Interface) 93

11. จะปรากฏไดอะลอ็ กบ็อกซ์ New Android Project ในสว่ นท่ี 3 ส�ำหรับกำ� หนดรายละเอียดของ
แอพพลเิ คชัน
12. ตัง้ ชอื่ ของแอพพลเิ คชันคอื UI Guideline
13. ช่ือแพค็ เกจจะอยใู่ นรปู แบบของ xxx.xxx... ซ่ึงในทนี่ ้ตี งั้ ชื่อแพ็คเกจเป็น com.ui.guideline
14. ต้งั ช่ือ Activity ในท่ีนี้ตัง้ ชือ่ เป็น UIGuidelineActivity
15. ในสว่ นของ Minimum SDK: คลกิ เลอื กเวอรช์ นั 15 ซงึ่ เปน็ เวอรช์ นั เดยี วกนั กบั API Level ทเ่ี ลอื ก
ในขอ้ 9
16. คลกิ ปมุ่ ซึง่ ถือเปน็ อนั เสร็จสิ้นการสรา้ งโปรเจก็ ต์

12 ต้งั ชอ่ื แอพพลิเคชัน
13 ตง้ั ช่อื แพค็ เกจ
14 ต้งั ช่อื แอ็คทวิ ติ ้ี

15 เลอื กเวอร์ชัน

16 คลกิ
17. จะปรากฏโปรเจก็ ตท์ ่ี Package Explorer ซ่งึ แสดงถงึ โครงสร้างของโปรเจก็ ตท์ ไ่ี ดส้ ร้างขึ้นมา

หลงั จากทส่ี รา้ งโปรเจ็กตเ์ สรจ็ สน้ิ แลว้ ไฟล์ UIGuidelineActivity.java จะเปน็ ไฟลห์ ลกั ท่ีใชส้ ำ� หรบั การ
เขยี นโคด้ ในแอพพลเิ คชนั นี้ และไฟล์ main.xml นนั้ มไี วเ้ พอื่ ใชใ้ นการออกแบบ UI ซงึ่ ใชใ้ นการกำ� หนดโครงสรา้ ง
ของหนา้ จอบนโทรศัพท์เคล่อื นท่แี อนดรอยด์
94 Android App Development ฉบับสมบูรณ์

TextView : แสดงข้อความ

TextView เป็นอิลิเมนต์ท่ีท�ำหน้าที่แสดงข้อความ และผู้อ่าน
สามารถสลับไปท่ีโหมด XML เพ่ือก�ำหนดคุณสมบัติของ TextView ได้
นอกจากนี้ผู้อ่านยังสามารถท่ีจะเปล่ียนแบบอักษร (Font) ได้ตามต้องการ
อีกดว้ ย

ตวั อย่างแอพพลิเคชนั ท่ีใชง้ าน TextView

การก�ำหนดคุณสมบัติ TextView

ให้ผูอ้ า่ นเพมิ่ อิลิเมนต์ TextView ลงในหน้าจอแอพพลิเคชนั ดว้ ยวธิ ลี ากวางดงั นี้

ลากวาง

จะไดโ้ ค้ด XML ดงั นี้

บทท่ี 5 การสร้างส่วนติดต่อกับผู้ใช้ (User Interface) 95

ผู้อา่ นสามารถกำ� หนดคุณสมบัติอืน่ ๆ เพิม่ เติมให้อลิ เิ มนต์ TextView ได้ โดยเพมิ่ แอตทริบวิ ต์เข้าไป
ดว้ ยโคด้ XML ยกตวั อย่างเชน่

z android:textColor ก�ำหนดสขี องขอ้ ความ เชน่ “#FFFFFF”
z a ndroid:textSize กำ� หนดขนาดตัวอกั ษร เชน่ “20sp”
z android:gravity ก�ำหนดการจดั วางแนวของข้อความ เชน่ “Top”
z android:layout_width กำ� หนดความกว้างของกล่องข้อความ เช่น “100dip”
z android:layout_height=“wrap_content” ก�ำหนดความสงู ของกลอ่ งขอ้ ความ เช่น “120dip”
จะได้โค้ด XML ดังนี้

กำ�หนดคุณสมบตั ขิ อง
TextView
สามารถใชภ้ าษาไทยได้

เม่ือผู้อา่ นกลับมายังหน้าแสดงผล จะไดห้ นา้ จอแอพพลิเคชนั ดังน้ี

การเปลี่ยนแบบอักษรส�ำหรับ TextView

โดยปกติแล้วแบบอักษร (Font) มาตรฐานของแอนดรอยด์ไม่ค่อยจะมีความสวยงามมากนัก ดังน้ัน
เพ่ือให้แอพพลิเคชันมีความน่าสนใจ จึงจ�ำเป็นต้องใช้แบบอักษรที่สวยงาม ท้ังน้ีผู้อ่านไม่สามารถเปล่ียนแบบ
อักษรไดด้ ้วยโค้ดในไฟล์ XML โดยตรง

96 Android App Development ฉบับสมบูรณ์

สำ� หรบั ข้นั ตอนการเปลี่ยนแบบอักษรน้ันมดี งั ต่อไปน้ี
1. คดั ลอกแบบอกั ษรทต่ี อ้ งการไปเกบ็ ไวใ้ นสว่ นของ assets (ในทน่ี ใี้ ชไ้ ฟลแ์ บบอกั ษรชอื่ akhanake.ttf)

1 เพ่ิมไฟล์แบบอักษร

2. เพ่ิมอิลเิ มนต์ TextView ในหน้าจอ และก�ำหนดคุณสมบตั ดิ งั นี้ (ในที่น้ีก�ำหนด id เป็น Custom-
FontText)

กำ�หนดคณุ สมบตั ิของ
TextView

ได้ผลลพั ธ์ดังนี้

บทท่ี 5 การสร้างส่วนติดต่อกับผู้ใช้ (User Interface) 97

3. แกไ้ ขโคด้ โปรแกรมในไฟล์ Java ในทนี่ ค้ี อื ไฟล์ UIGuidelineActivity.java เพอื่ กำ� หนดแบบอกั ษร
ให้กับอิลิเมนต์ TextView ดงั นี้

เขียนโคด้ เพิ่มเตมิ

เขียนโคด้ เพมิ่ เติม

4. รันแอพพลิเคชันเพือ่ ทดสอบการทำ� งาน จะได้ผลลัพธ์ดังรูป

นอกจากอิลเิ มนต์ TextView แล้ว ผอู้ า่ นยังสามารถเรียกใช้งาน
เมธอด setTypeface() เพ่อื ก�ำหนดแบบอักษรของอลิ เิ มนต์ EditText และ
Button ไดเ้ ช่นเดียวกัน

EditText : รับข้อความ

EditText เป็นอิลิเมนต์ที่ทำ� หน้าที่รับข้อความจากผู้ใช้เพ่ือนำ� ไป
ใชง้ าน ซ่ึงการใช้งาน EditText มีขนั้ ตอนดงั ต่อไปนี้

ตวั อยา่ งแอพพลเิ คชันที่ใชง้ าน EditText

98 Android App Development ฉบับสมบูรณ์

1. เพิม่ อิลเิ มนต์ EditText จาก Text Fields ลงในหนา้ จอดว้ ยวธิ กี ารลากวาง
1 ลากวาง

2. ผอู้ า่ นสามารถกำ� หนดคณุ สมบตั ขิ องอลิ เิ มนต์ EditText โดยการเพม่ิ แอตทรบิ วิ ตต์ า่ งๆ ไดเ้ ชน่ เดยี ว
กับการกำ� หนดคุณสมบัตขิ องอิลเิ มนต์ TextView เชน่ กำ� หนดขนาดตวั อักษร กำ� หนดสีตัวอักษร
เป็นต้น ซึง่ มีโค้ด XML ดังนี้

3. แกไ้ ขโคด้ ในไฟล์ Java เพอ่ื ใชง้ านขอ้ มลู จากอลิ เิ มนต์ EditText โดยอา้ งองิ ไปยงั อลิ เิ มนต์ EditText
โดยใช้ id และเรยี กใชเ้ มธอด getText() ดงั โคด้ ตอ่ ไปนี้

EditText edittext1 = (EditText) findViewById(R.id.editText1);
String text = edittext1.getText().toString();

บทท่ี 5 การสร้างส่วนติดต่อกับผู้ใช้ (User Interface) 99

ImageView : แสดงรูปภาพ

ImageView เปน็ วิวทท่ี ำ� หนา้ ท่แี สดงรปู ภาพบนหน้าจอ ซึ่งมีข้ันตอนการใช้งานดังต่อไปน้ี

ตัวอยา่ งแอพพลิเคชันที่ใช้งาน ImageView

1. คัดลอกรูปภาพท่ีต้องการเข้ามาไว้ใน
ส่วนของ res/drawable-hdpi ในทนี่ ี้
สามารถลากรูปที่ต้องการมาวางใน
โฟลเดอร์ได้เลย

1 เพิม่ รปู ภาพ

2. เพ่ิม ImageView ด้วยวิธีการลาก
วางจาก Images & Media ลงบน
หนา้ จอ

2 ลากวาง

100 Android App Development ฉบับสมบูรณ์

3. จะปรากฏหน้าต่างส�ำหรับเลือก 3 เลือก
รูปภาพ ให้ผู้อ่านเลือกรูปภาพท่ี
ตอ้ งการ

4. คลิกปมุ่

4 คลกิ

5. จะปรากฏหน้าจอแอพพลิเคชัน
ดังรปู

ท้งั นผ้ี อู้ า่ นสามารถก�ำหนดคณุ สมบัติของ ImageView ด้วยโคด้ XML ได้เช่นกัน

Button : ปุ่ม

Button เป็นอิลิเมนต์ท่ีท�ำหน้าท่ีแสดงปุ่มบนหน้าจอ ซึ่งผู้อ่าน
สามารถเพ่ิมอิลิเมนต์ Button ในหน้าจอได้โดยใช้วิธีการลากวางได้
เชน่ เดยี วกบั TextView, EditText และ ImageView ในทน่ี ผ้ี เู้ ขยี นจะไมอ่ ธบิ าย
การก�ำหนดคุณสมบัติต่างๆ ของอิลิเมนต์ Button แต่จะอธิบายการเพ่ิม
อเี วนต์ (Event) ให้กับอลิ เิ มนต์ Button ซึง่ มคี วามส�ำคญั อยา่ งมากในการ
พฒั นาแอพพลเิ คชัน

ตัวอยา่ งแอพพลเิ คชนั ท่ีใช้งาน Button 101
บทท่ี 5 การสร้างส่วนติดต่อกับผู้ใช้ (User Interface)

การเพิ่มอีเวนต์ (Event) ให้ Button

ในทีน่ ้ีจะสรา้ งปุ่มหน่ึงปุ่มเพ่อื ใช้ในการเปลย่ี นรปู ภาพของ ImageView ที่เพม่ิ เขา้ ไปในหวั ขอ้ ท่ผี ่านมา
และเขียนโปรแกรมต่อจากหัวขอ้ ดงั กลา่ ว โดยมีขน้ั ตอนดังตอ่ ไปนี้

1. คดั ลอกรูปภาพทต่ี อ้ งการเข้ามาไว้ในส่วนของ res/drawable-hdpi อีกหน่งึ รปู ภาพ

1 เพิม่ รปู ภาพ

2. เพมิ่ อิลิเมนต์ Button ลงในหนา้ จอโดยวิธลี ากวาง และก�ำหนด id ในทนี่ ก้ี ำ� หนดเปน็ button1

2 ลากวาง

ได้โค้ด XML ดงั น้ี

102 Android App Development ฉบับสมบูรณ์

3. เขียนโคด้ เพิ่มในไฟล์ Java ในท่นี ้คี อื ไฟล์ UIGuidelineActivity.java เพื่อเพมิ่ Event ใหก้ ับป่มุ กด
(button1) โดยกำ� หนดให้เปลย่ี นรปู ภาพของ ImageView เมอื่ คลิกปมุ่ ซ่งึ มโี คด้ ดังนี้

package com.ui.guideline;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class UIGuidelineActivity extends Activity {
/** Called when the activity is first created. */
int current_img;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Typeface tf = Typeface.createFromAsset(getAssets(), "akhanake.ttf");
TextView tv = (TextView) findViewById(R.id.CustomFontText);
tv.setTypeface(tf);

Button button = (Button) findViewById(R.id.button1); กำ�หนดรปู ภาพ
current_img = R.drawable.android_design; สรา้ ง Event Click
button.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

ImageView my_android = (ImageView) findViewById(R.id.imageView1);

if (current_img == R.drawable.android_design){ เปลี่ยนรปู ภาพ

my_android.setImageDrawable(getResources().getDrawable(

R.drawable.android_design_green));

current_img = R.drawable.android_design_green;

}else{

my_android.setImageDrawable(getResources().getDrawable(

R.drawable.android_design));

current_img = R.drawable.android_design;

}

}

});

}

}

บทท่ี 5 การสร้างส่วนติดต่อกับผู้ใช้ (User Interface) 103

4. รันแอพพลิเคชันแล้วลองคลิกปุ่ม จะสังเกตเห็นได้ว่ารูปภาพเปล่ียนจากรูปแอนดรอยด์สีน้�ำเงิน
เปน็ สเี ขียวดังรปู

4.2 เปล่ียนรูป

4.1 คลิก

ImageButton : ปุ่มรูปภาพ

อลิ เิ มนต์ ImageButton จะแตกตา่ งจากอลิ เิ มนต์
Button คือ อิลิเมนต์ Button เป็นปุ่มข้อความ ส่วน
อิลเิ มนต์ ImageButton จะเป็นปุ่มรูปภาพ ซง่ึ การใช้งาน
อิลิเมนต์ ImageButton สามารถท�ำได้เช่นเดียวกับ
อิลิเมนตอ์ นื่ ๆ ดงั น้ี

ตัวอย่างแอพพลเิ คชันท่ีใชง้ าน ImageButton

1. คัดลอกรูปภาพท่ีต้องการใช้สร้างปุ่มเข้ามา
ไว้ในส่วนของ res/drawable-hdpi

เพิ่มรปู ภาพ 1

104 Android App Development ฉบับสมบูรณ์

2. เพิ่มอิลเิ มนต์ ImageButton ดว้ ยวธิ ีลากวาง
2 ลากวาง

3. จะปรากฏหน้าต่างให้เลือกรูปส�ำหรบั ปมุ่ กด ให้ผ้อู า่ นเลือกรปู ภาพทต่ี ้องการ
4. คลกิ ป่มุ

3 เลอื ก
4 คลิก

บทท่ี 5 การสร้างส่วนติดต่อกับผู้ใช้ (User Interface) 105

5. จะได้ผลลพั ธด์ ังรปู

ส�ำหรบั การสร้างอีเวนตใ์ ห้กบั ImageButton กส็ ามารถท�ำไดเ้ ชน่ เดยี วกบั Button ในทีน่ ผ้ี เู้ ขยี นจงึ ขอ
ขา้ มรายละเอยี ดในสว่ นนีไ้ ป

สรุปท้ายบท

ในบทนี้เปน็ การอธิบายถงึ การพฒั นาแอพพลิเคชนั เพื่อเชอ่ื มต่อกับสว่ นติดตอ่ กับผใู้ ช้งาน (UI–User
Interface) ซง่ึ ถือเป็นส่วนสำ� คัญส�ำหรับใหผ้ ใู้ ช้งานสามารถใชแ้ อพพลเิ คชนั ไดอ้ ย่างสะดวกน่นั เอง ซ่งึ ในบทนจี้ ะ
แนะน�ำอลิ ิเมนต์เปน็ แนวทางดังนี้

z TextView สำ� หรบั แสดงขอ้ ความ
z EditText สำ� หรบั รับข้อความ
z ImageView ส�ำหรับแสดงรปู ภาพ
z Button ส�ำหรบั แสดงปมุ่
z ImageButton ส�ำหรับแสดงปมุ่ รปู ภาพ

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

หลงั จากผอู้ ่านทดลองใช้งานอลิ ิเมนต์ต่างๆ เรียบร้อยแลว้ ให้ผอู้ ่านทำ� แบบฝกึ หัดดงั นี้
z ศึกษาการใชง้ านอิลิเมนตใ์ ดๆ เพม่ิ อีก 3 ตวั เช่น RadioButton เป็นตน้
z ใหผ้ ู้อ่านพฒั นาแอพพลิเคชันส�ำหรับแสดงข้อมูลช่ือ รหัสประจ�ำตวั ประชาชน รูปถา่ ย เม่อื คลกิ ปุ่ม

ที่กำ� หนด
z ใหผ้ ู้อ่านพฒั นาแอพพลิเคชัน โดยน�ำอลิ ิเมนต์ที่ศกึ ษาเพิ่มเตมิ ในหัวข้อท่ี 1 มาประกอบด้วย
106 Android App Development ฉบับสมบูรณ์

6

รู้จักการใช้งานเลย์เอาต์ (Layout)

ในบทนี้ผู้อ่านจะได้ศึกษาถึงการใช้งานเลย์เอาต์แบบต่างๆ เพื่อใช้ในการออกแบบหน้าจอการใช้งาน
ของแอพพลเิ คชนั ซง่ึ ในทีน่ ผี้ ้เู ขียนขอเสนอเลย์เอาต์ท่ีสำ� คัญจำ� นวน 5 รปู แบบคือ

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

Linear Layout

ลีเนียร์ เลย์เอาต์ (Linear Layout) คือ เลย์เอาต์ที่มีการจัดเรียงอิลิเมนต์ท่ีอยู่ภายในเป็นแบบ
เสน้ ตรง เชน่ เรยี งในแบบตามแนวตงั้ (Vertical) หรอื เรยี งในแบบตามแนวนอน (Horizontal) โดยทม่ี กี ารกำ� หนด
คณุ สมบตั ิ (Property) android:orientation ซึง่ มีขนั้ ตอนต่างๆ ดงั ตอ่ ไปนี้

1. สรา้ งไฟล์ XML ขึน้ มาใหม่ โดยคลิกเมนู File > New > Android XML File

1 เลือก

2. จะปรากฏไดอะลอ็ กบอ็ กซ์ New Android 5 ตัง้ ช่อื เลือก 3
XML File ข้นึ มา เลือก 4

3. ในส่วนของ Resource Type: ให้คลิก 6 คลิก
เลอื ก Layout

4. ในส่วนของ Project: ให้คลิกเลือก UI
Guideline

5. ตงั้ ชื่อไฟล์ XML ในทีน่ ีต้ ัง้ ชื่อวา่ linear
6. คลิกปุ่ม
7. จะปรากฏหน้าต่าง Layout ทางด้านขวามือ

7 หน้าตา่ ง Layout

8. ผอู้ า่ นสามารถสลบั จากรปู แบบ Graphical Layout เพอื่ แกไ้ ขโคด้ XML ได้ โดยคลกิ แทบ็ linear.xml
ซึ่งมโี ค้ด xml ดังน้ี

8 คลิก

108 Android App Development ฉบับสมบูรณ์

9. คลกิ ที่ Form Widgets
10. เลอื กอิลเิ มนต์ตา่ งๆ มาวางในหน้าจอแอพพลเิ คชัน ในที่นจ้ี ะสร้างปุม่ กด (Button) 2 ปุ่ม

คลกิ 9

10 ลากวาง

11. ให้ผอู้ ่านคลิกแทบ็ linear.xml
12. จะปรากฏโค้ด android:orientation=“vertical” ซง่ึ เปน็ การจัดวางป่มุ ในแนวต้ัง

12 แสดงโค้ด

11 คลกิ
13. ผอู้ า่ นสามารถเปลย่ี นใหป้ มุ่ วางเรยี งกนั ในแนวนอน โดยแกไ้ ขโคด้ จาก android:orientation=“veritcal”

เปน็ android:orientation=“horizontal”
13 แก้ไขโคด้

บทท่ี 6 รู้จักการใช้งานเลย์เอาต์ (Layout) 109

14. คลกิ แท็บ Graphical Layout เพือ่ ดหู น้าจอแอพพลิเคชนั

14 คลิก
15. ผอู้ า่ นสามารถสร้าง Linear Layout หลายๆ อลิ ิเมนต์ซ้อนกนั ได้ โดยตวั อยา่ งนี้จะเพ่ิม EditText

เขา้ ไปแลว้ จดั วางใหด้ ูสวยงาม ซง่ึ มีโคด้ XML ดงั นี้

กำ�หนดคุณสมบัตขิ อง
EditText
กำ�หนดคณุ สมบัติของ
Button ตัวที่ 1
กำ�หนดคณุ สมบัติของ
Button ตวั ท่ี 2

110 Android App Development ฉบับสมบูรณ์

16. คลกิ แท็บ Graphical Layout เพื่อดหู น้าจอที่ได้จากการเพม่ิ โคด้ XML ดงั รปู

16 คลิก

Relative Layout

รีเลทีฟ เลย์เอาต์ (Relative Layout) คือ เลย์เอาต์ท่ีมีการจัดเรียงอิลิเมนต์ที่อยู่ภายใน โดย
อ้างอิงต�ำแหน่งของอิลิเมนต์น้ันๆ กับอิลิเมนต์อื่นๆ ในเลย์เอาต์ หรืออาจจะอ้างอิงกับตัวเลย์เอาต์ท่ีอิลิเมนต์
นั้นอยู่ภายในก็ได้ ซึ่งสามารถอ้างอิงผ่าน id ของอิลิเมนต์หรือเลย์เอาต์ ทั้งน้ีการสร้างรีเลทีฟ เลย์เอาต์มี
ข้นั ตอนต่างๆ ดังตอ่ ไปน้ี

1. สร้างไฟล์ XML ขึ้นมาใหม่ โดยคลกิ เมนู File > New > Android XML File

1 เลือก

บทท่ี 6 รู้จักการใช้งานเลย์เอาต์ (Layout) 111

2. จะปรากฏไดอะล็อกบ็อกซ์ เลอื ก 2.1
New Android XML File และ
ก�ำหนดคุณสมบตั ดิ ังน้ี

2.3 ต้งั ช่อื เลือก 2.2
2.4 เลอื ก

3. จะปรากฏหน้าต่าง Layout 2.5 คลกิ
ทางด้านขวามอื 3 หน้าตา่ ง Layout

4. คลิกแท็บ relative.xml เพ่อื แกไ้ ขโค้ด XML ดังน้ี

4.2 แกไ้ ขโคด้
4.1 คลกิ

112 Android App Development ฉบับสมบูรณ์

5. คลิกแทบ็ Graphical Layout จะปรากฏอิลเิ มนต์ตา่ งๆ ทซี่ อ้ นกนั อยู่ดงั รปู

5.2 แสดงผล

5.1 คลกิ

6. แก้ไขโค้ดในไฟล์ XML 6.1 เลือก
อีกคร้ัง เพื่อจัดต�ำแหน่ง 6.2 แก้ไขโค้ด
อิลิเมนต์ต่างๆ ในที่นี้จะให้
TextView อยู่ด้านบนสุด 7.2 แสดงผล
ถัดลงมาเป็น CheckBox
และ Button ซ่ึง Button
จะอยดู่ า้ นขวาของ CheckBox

7. คลกิ แทบ็ Graphical Layout
ก็จะปรากฏอิลิเมนต์ต่างๆ
จดั เรียงกันดงั รูป

7.1 คลิก 113
บทท่ี 6 รู้จักการใช้งานเลย์เอาต์ (Layout)

Frame Layout

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

1. สร้างไฟล์ XML ข้ึนมาใหม่ โดยคลิกเมนู File > New > Android XML File

1 เลอื ก

2. จะปรากฏไดอะล็อกบ็อกซ์ New Android XML File และกำ� หนดคณุ สมบตั ดิ ังนี้

2.3 ตั้งชื่อ 2.1 เลือก
2.4 เลอื ก 2.2 เลือก

2.5 คลิก

114 Android App Development ฉบับสมบูรณ์

3. จะปรากฏหนา้ ตา่ ง Layout ทางดา้ นขวามอื
3 หน้าตา่ ง Layout

4. คลกิ แท็บ frame.xml เพ่ือแก้ไขโคด้ XML ดังน้ี

4.1 คลกิ 4.2 แกไ้ ขโคด้
5. คลกิ แทบ็ Graphical Layout จะ 5.2 แสดงผล

เห็นอิลิเมนต์ต่างๆ ซ้อนกันอยู่
เป็นชั้นๆ ซ่ึงเป็นลักษณะของ
Frame Layout

5.1 คลกิ 115
บทท่ี 6 รู้จักการใช้งานเลย์เอาต์ (Layout)

Absolute Layout

แอบโซลูต เลย์เอาต์ (Absolute Layout) คือ เลย์เอาต์ท่ีมีการจัดวางอิลิเมนต์ต่างๆ ท่ีอยู่
ภายในตามตำ� แหนง่ จริงบนหนา้ จอ โดยก�ำหนดต�ำแหน่งของอลิ ิเมนตผ์ า่ นพรอ็ พเพอรต์ ้ี android:layout_x และ
android:layout_y ส�ำหรบั การสร้างแอบโซลตู เลย์เอาตม์ ีขั้นตอนตา่ งๆ ดงั ตอ่ ไปน้ี

1. สรา้ งไฟล์ XML ขึ้นมาใหม่ โดยคลกิ เมนู File > New > Android XML File

1 เลอื ก

2. จะปรากฏไดอะล็อกบ็อกซ์ New Android XML File และก�ำหนดคุณสมบตั ดิ ังนี้

2.3 ตั้งช่อื 2.1 เลอื ก
2.4 เลือก 2.2 เลอื ก

2.5 คลิก

116 Android App Development ฉบับสมบูรณ์

3. จะปรากฏหนา้ ตา่ ง Layout ทางด้านขวามือ
3 หนา้ ตา่ ง Layout

4. คลกิ แท็บ absolute.xml เพ่ือแกไ้ ขโค้ด XML ดงั นี้

4.2 แก้ไขโค้ด

4.1 คลกิ 5.2 แสดงผล
5. คลกิ แทบ็ Graphical Layout

จะเห็นอิลิเมนต์ต่างๆ ซ้อน
กันอยู่ ซ่ึงเกิดจากการท่ียัง
ไม่ได้ก�ำหนดต�ำแหน่งให้กับ
แตล่ ะอิลิเมนต์

5.1 คลิก 117
บทท่ี 6 รู้จักการใช้งานเลย์เอาต์ (Layout)

6. แก้ไขโค้ดในไฟล์ XML อีกครั้ง เพ่ือจัดต�ำแหน่งของแต่ละอิลิเมนต์ โดยเพ่ิมพร็อพเพอร์ต้ี
android:layout_x และ android:layout_y

6.2 แก้ไขโคด้

6.1 คลิก
7. คลิกแทบ็ Graphical Layout จะเห็นอิลิเมนตต์ ่างๆ จดั เรยี งกันดังรูป

7.2 แสดงผล

7.1 คลิก

118 Android App Development ฉบับสมบูรณ์

Table Layout

เทเบิล เลย์เอาต์ (Table Layout) คือ เลย์เอาต์ท่ีมีการจัดวางอิลิเมนต์ต่างๆ เป็นแบบตาราง
โดยท่ีคอนโทรลแต่ละสว่ นจะถือว่าเป็น 1 คอลัมน์ นอกจากน้ียงั สามารถเพ่ิมแถวได้โดยการเพิ่มแทก็ TableRow
ส�ำหรบั การสร้างเทเบลิ เลย์เอาตม์ ีขั้นตอนดังตอ่ ไปนี้

1. สร้างไฟล์ XML ข้ึนมาใหม่ โดยคลกิ เมนู File > New > Android XML File

1 เลอื ก

2. จะปรากฏไดอะลอ็ กบ็อกซ์ New Android XML File และก�ำหนดคณุ สมบัติดงั น้ี

2.3 ตัง้ ชอ่ื 2.1 เลือก
2.4 เลือก 2.2 เลอื ก

2.5 คลกิ

บทท่ี 6 รู้จักการใช้งานเลย์เอาต์ (Layout) 119

3. จะปรากฏหนา้ ตา่ ง Layout ทางดา้ นขวามือ
3 หน้าต่าง Layout

4. แกไ้ ขโคด้ ในไฟล์ table.xml ดงั น้ี

<?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> ในแถวที่ 1
<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"> ในแถวท่ี 2
</TextView>
<EditText android:id="@+id/editText2"

android:layout_width="200dip"

android:layout_height="wrap_content">

</EditText>

</TableRow>

120 Android App Development ฉบับสมบูรณ์

<TableRow android:layout_height=”wrap_content” กำ�หนดคณุ สมบตั แิ ละอลิ เิ มนต์
android:layout_width=”wrap_content” ในแถวที่ 3
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>

5. คลิกแทบ็ Graphical Layout จะเห็นอลิ ิเมนต์ต่างๆ จดั เรยี งกนั ดังรูป

5.2 แสดงผล

5.1 คลกิ

สรุปท้ายบท

ในบทนี้เป็นการอธิบายถึงการใช้งานเลย์เอาต์ส�ำหรับออกแบบแอพพลิเคชัน เพื่อจัดวางส่วนติดต่อ
กับผู้ใช้งาน (UI–User Interface) ให้สวยงามและใช้งานได้อยา่ งสะดวกดังนี้

z ลเี นยี ร์ เลยเ์ อาต์ (Linear Layout) คอื เลยเ์ อาตท์ มี่ กี ารจดั เรยี งอลิ เิ มนตท์ อี่ ยภู่ ายในเปน็ แบบเสน้ ตรง
z รเี ลทีฟ เลย์เอาต์ (Relative Layout) คือ เลยเ์ อาต์ทม่ี กี ารจดั เรยี งอลิ เิ มนตโ์ ดยอ้างองิ ต�ำแหนง่

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

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

บทท่ี 6 รู้จักการใช้งานเลย์เอาต์ (Layout) 121

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

z อธบิ ายความเหมอื นและความแตกตา่ งกนั ระหวา่ งเฟรม เลยเ์ อาต์ (Frame Layout) และแอบโซลตู
เลย์เอาต์ (Absolute Layout)

z จงอธบิ ายวา่ หากตอ้ งการพฒั นาแอพพลเิ คชนั เครอื่ งคดิ เลข จะตอ้ งใชง้ านเลยเ์ อาต์ (Layout) อะไร
เพราะอะไร

z ใหผ้ อู้ า่ นออกแบบแอพพลเิ คชนั โดยใชง้ านเลยเ์ อาต์ (Layout) ทแ่ี ตกตา่ งกนั จำ� นวน 3 แอพพลเิ คชนั

122 Android App Development ฉบับสมบูรณ์

7

รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ

ในบทท่ี 5 และบทที่ 6 ผู้อ่านได้ศึกษาการใช้งานอิลิเมนต์และเลย์เอาต์พ้ืนฐานกันไปแล้ว ในบทนี้
ผอู้ า่ นจะไดศ้ กึ ษาถงึ การใชง้ านววิ กรปุ๊ (ViewGroup) ชนดิ ตา่ งๆ ซง่ึ เปน็ พน้ื ฐานทสี่ ำ� คญั อกี เรอ่ื งหนงึ่ ในการออกแบบ
และพฒั นาแอพพลิเคชนั บนระบบ Android

ววิ กรปุ๊ (ViewGroup) เปน็ ววิ ทร่ี วมอลิ เิ มนตต์ า่ งๆ เชน่ TextView, EditText และ CheckBox ไวภ้ ายใน
ซง่ึ ในบทนจี้ ะขอยกตวั อยา่ งอลิ เิ มนตบ์ างตวั ทมี่ กี ารใชง้ านบอ่ ยครงั้ รวมถงึ อธบิ ายการประยกุ ตใ์ ชว้ วิ กรปุ๊ ชนดิ ตา่ งๆ
ซ่ึงประกอบดว้ ย ListView, ScrollView, Image Switcher View, Options Menu และ TabWidget

ในที่นี้ขั้นตอนบางขั้นตอนที่เคยอธิบายไว้ในบทท่ีผ่านมา ผู้เขียนจะไม่ขออธิบายซ้�ำ ซึ่งผู้อ่านสามารถ
ศึกษาได้จากบทที่ผ่านมา เช่น ขั้นตอนการสร้างโปรเจ็กต์, ขั้นตอนการเพิ่มไฟล์ XML เป็นต้น

ListView

ListView เป็นการแสดงหลายๆ อิลเิ มนต์
ท่ีอยู่ภายในแบบรายการตามแนวต้ัง โดยมีข้ันตอน
การสรา้ งดงั ต่อไปนี้

1. สรา้ งไฟล์ XML ขน้ึ มาใหม่ โดยคลกิ
เมนู File > New > Android XML File

1 เลอื ก

2. จะปรากฏไดอะล็อกบอ็ กซ์ New Android XML File ข้นึ มา
3. ต้งั ช่ือไฟล์เป็น listview และก�ำหนดคุณสมบัตดิ ังน้ี

3.3 ต้งั ช่ือ 3.1 เลือก
3.4 เลอื ก 3.2 เลือก

4. แก้ไขโค้ด XML ในไฟล์ list- 3.5 คลิก
view.xml โดยเพิ่มอิลิเมนต์ 4 แกไ้ ขโค้ด
ListView และกำ� หนด id เปน็
listView1 ดงั รูป

5. คลกิ แทบ็ Graphical Layout
เพ่ือดหู นา้ จอแอพพลิเคชัน

5.2 แสดงผล

5.1 คลิก

124 Android App Development ฉบับสมบูรณ์

6. เขียนโคด้ Java กำ� หนดการทำ� งานของแอพพลิเคชนั ในไฟล์ UIGuidelineActivity.java ดงั นี้

package com.ui.guideline;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class UIGuidelineActivity extends Activity {
/** Called when the activity is first created. */
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.listview);
ListView list_view1;
final String page_name[] = { "Linear Layout", "Ralative Layout",
"Frame Layout", "Absolute Layout", "Table Layout" };
list_view1 = (ListView) findViewById(R.id.listView1);
ArrayAdapter<String> array_adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, page_name);
list_view1.setAdapter(array_adapter);
list_view1.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> arg0, View arg1, int num,

long arg3) {

Toast.makeText(getBaseContext(), page_name[num],

Toast.LENGTH_LONG).show();

switch (num + 1) {

case 1:

setContentView(R.layout.linear);

break;

case 2:

setContentView(R.layout.relative);

break;

case 3: กำ�หนดรูปแบบการแสดง Layout
setContentView(R.layout.frame);

break;

case 4:

setContentView(R.layout.absolute);

break;

case 5:

setContentView(R.layout.table);

break;

}

}

});

}

}

จากโค้ดจะเปน็ การแสดงรายการ Layout ชนดิ ต่างๆ ตามทผ่ี อู้ า่ นได้เคยเรยี นร้ใู นบทที่ผ่านมา และ
เมื่อคลกิ ท่ี Layout ชนิดใด โปรแกรมกจ็ ะเปลี่ยนหน้าจอเป็น Layout ชนิดน้นั ๆ

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ 125

7. เมอ่ื รนั แอพพลเิ คชันจะไดผ้ ลลัพธ์ดงั น้ี 7.2 แสดงผล
7.1 เลอื ก

ScrollView

ScrollView เป็นการก�ำหนดคุณสมบัติของหน้าจอ เพื่อให้สามารถเลื่อนดูได้ทุกส่วน โดยมีขั้นตอน
การสรา้ งดังต่อไปนี้

1. สรา้ งไฟล์ XML ขึ้นมาใหม่ โดยคลิกเมนู File > New > Android XML File

1 เลือก

126 Android App Development ฉบับสมบูรณ์

2. จะปรากฏไดอะลอ็ กบ็อกซ์ New Android XML File ขึน้ มา
3. ตัง้ ชอ่ื เปน็ scrollview และก�ำหนดคุณสมบัติดังนี้

3.3 ต้ังช่อื 3.1 เลอื ก
3.4 เลอื ก 3.2 เลอื ก

3.5 คลิก

4. แกไ้ ขโคด้ XML ในไฟล์ scrollview.xml ดงั นี้ กำ�หนดการแสดงเปน็ แบบ TableLay-
out โดยมที ้งั หมด 7 แถว
<?xml version="1.0" encoding="utf-8"?> กำ�หนดคุณสมบตั แิ ถวที่ 1
<ScrollView กำ�หนดคณุ สมบัตแิ ถวท่ี 2

xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableLayout

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0">
<TableRow>

<View
android:layout_height="80dp"
android:background="#000000"/>

<TextView android:text="#000000"
android:paddingLeft="4dp"
android:layout_gravity="center_vertical"/>

</TableRow>
<TableRow>

<View
android:layout_height="80dp"
android:background="#440000"/>

<TextView android:text="#440000"
android:paddingLeft="4dp"
android:layout_gravity="center_vertical"/>

</TableRow>
<TableRow>

<View
android:layout_height=”80dp”
android:background=”#884400”/>

<TextView android:text=”#884400”

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ 127

android:paddingLeft="4dp" กำ�หนดคุณสมบัตแิ ถวท่ี 7
android:layout_gravity="center_vertical"/>
</TableRow>
<TableRow>
<View
android:layout_height="80dp"
android:background="#aa8844"/>
<TextView android:text="#aa8844"
android:paddingLeft="4dp"
android:layout_gravity="center_vertical"/>
</TableRow>
<TableRow>
<View
android:layout_height="80dp"
android:background="#ffaa88"/>
<TextView android:text="#ffaa88"
android:paddingLeft="4dp"
android:layout_gravity="center_vertical"/>
</TableRow>
<TableRow>
<View
android:layout_height="80dp"
android:background="#ffffaa"/>
<TextView android:text="#ffffaa"
android:paddingLeft="4dp"
android:layout_gravity="center_vertical"/>
</TableRow>
<TableRow>
<View
android:layout_height="80dp"
android:background="#ffffff"/>
<TextView
android:layout_gravity="center_vertical"
android:paddingLeft="4dp"
android:text="#ffffff" />

</TableRow>
</TableLayout>
</ScrollView>

5. คลกิ แทบ็ Graphical Layout เพ่ือดหู นา้ จอแอพพลเิ คชนั

5.2 แสดงผล

5.1 คลกิ

128 Android App Development ฉบับสมบูรณ์

6. แกไ้ ขโคด้ Java ในไฟล์ UIGuidelineActivity.java โดยใชไ้ ฟล์ scollview.xml มาแสดงเปน็ หนา้ จอ
7. เมอื่ รันแอพพลเิ คชนั จะได้ผลลัพธ์ดังน้ี

สามารถเล่อื นขึน้ /ลงได้

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ 129

Image Switcher View

Image Switcher View เปน็ การก�ำหนดคณุ สมบัติในการแสดงรูปภาพหลายๆ รปู โดยสามารถเลือก
แสดงรปู ภาพทแ่ี ตกตา่ งกนั สลบั ไปมาได้ โดยมีขนั้ ตอนการสร้างดังต่อไปน้ี

1. สรา้ งโปรเจกตใ์ หม่ ในท่ีน้ีต้งั ชือ่ ว่า MyImageSwitcher และกำ� หนดคุณสมบัติดงั น้ี

1.3 คลกิ 1.1 กรอกช่ือ
1.2 เลือก

เลอื ก 1.5

1.4 คลิก

1.6 คลกิ

1.7 ต้งั ช่อื แอพพลิเคชนั
1.8 ต้งั ช่อื แพค็ เกจ
1.9 ตัง้ ช่ือแอค็ ทิวติ ้ี

1.10 เลือก

1.11 คลิก

130 Android App Development ฉบับสมบูรณ์

2. นำ� ไฟล์รปู ภาพทต่ี ้องการมาใสไ่ ว้ในโฟลเดอร์ res/drawable-hdpi ดังรปู
เลือกรูปภาพ 2.1

2.2 เพมิ่ รูปภาพ

3. แกไ้ ขโค้ด XML ในไฟล์ main.xml ดังน้ี

4. แกไ้ ขโคด้ Java ในไฟล์ MyImageSwitcherActivity.java ดงั นี้ 131

package com.viewgroup.imageswitcher;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.Gallery.LayoutParams;
import android.widget.ImageSwitcher;
import android.widget.ImageView;

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ

import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ViewSwitcher.ViewFactory;

public class MyImageSwitcherActivity extends Activity implements
OnItemSelectedListener, ViewFactory {

private Integer[] mThumbIds = { R.drawable.wallpaper_android_thumb,
R.drawable.wallpaper_lake_thumb, R.drawable.wallpaper_sunset_thumb };

private Integer[] mImageIds = { R.drawable.wallpaper_android,
R.drawable.wallpaper_lake, R.drawable.wallpaper_sunset };

private Context mContext;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

mSwitcher = (ImageSwitcher) findViewById(R.id.imgswitcher);
mSwitcher.setFactory(this);
mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_in));
mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_out));

Gallery g = (Gallery) findViewById(R.id.gallery);
g.setAdapter(new ImageAdapter(this));
g.setOnItemSelectedListener(this);
}

public void onItemSelected(AdapterView<?> parent, View v, int position,
long id) {

mSwitcher.setImageResource(mImageIds[position]);
}

public void onNothingSelected(AdapterView<?> parent) {
}

public View makeView() {
ImageView i = new ImageView(this);
i.setBackgroundColor(0xFF000000);
i.setScaleType(ImageView.ScaleType.FIT_CENTER);
i.setLayoutParams(new ImageSwitcher.LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
return i;

}

private ImageSwitcher mSwitcher;

public class ImageAdapter extends BaseAdapter {
public ImageAdapter(Context c) {
mContext = c;
}

public int getCount() {
return mThumbIds.length;

}

132 Android App Development ฉบับสมบูรณ์

public Object getItem(int position) {
return position;

}
public long getItemId(int position) {

return position;
}
public View getView(int position, View convertView, ViewGroup parent) {

ImageView i = new ImageView(mContext);
i.setImageResource(mThumbIds[position]);
i.setAdjustViewBounds(true);
i.setLayoutParams(new Gallery.LayoutParams(

LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
i.setBackgroundColor(Color.WHITE);
return i;
}
}
}

5. เมือ่ รันแอพพลิเคชันจะได้ผลลพั ธด์ งั น้ี

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ 133

Options Menu

Options Menu เปน็ เมนทู ่แี สดงข้นึ มาเมอ่ื กดป่มุ เมนูบนโทรศพั ท์ โดยมขี น้ั ตอนการสร้างดงั ตอ่ ไปนี้
1. สร้างโปร์เจ็กตใ์ หม่ ในทน่ี ้ีตงั้ ชอ่ื วา่ MyOptionMenu และกำ� หนดคุณสมบตั ิดงั นี้

1.1 กรอกช่อื
1.2 เลอื ก

1.3 คลกิ เลือก 1.5

1.4 คลกิ 1.6 คลิก

1.7 ตัง้ ชื่อแอพพลเิ คชัน
1.8 ตงั้ ช่อื แพค็ เกจ
1.9 ต้งั ชื่อแอ็คทวิ ติ ้ี

1.10 เลือก

1.11 คลิก

134 Android App Development ฉบับสมบูรณ์

2. สร้างไฟล์ XML ใหม่สำ� หรบั ใชเ้ ป็น Menu และกำ� หนดคุณสมบตั ิดงั น้ี

2.3 กรอกชื่อ 2.1 เลือก
2.2 เลือก

2.4 คลิก
3. จะปรากฏไฟล์ menu.xml ในโฟลเดอร์ res/menu ที่หนา้ ตา่ ง Package Explorer

4. แก้ไขโค้ด XML ในไฟล์ menu.xml ดงั น้ี

โดยที่ @android:drawable/<name> เปน็ การใชร้ ปู ไอคอนมาตรฐานของ Android ชง่ึ ไมต่ อ้ งเพมิ่ ไฟล์
รปู เข้าไปเอง

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ 135

5. แก้ไขโคด้ Java ในไฟล์ MyOptionMenuActivity.java เพื่อนำ� ไฟล์ menu.xml มาใชง้ านดงั นี้

package com.viewgroup.optionmenu;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MyOptionMenuActivity extends Activity {
@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
return true;
}

@Override กำ�หนดการ
public boolean onOptionsItemSelected(MenuItem item) { แสดงผล

switch (item.getItemId()) {
case R.id.help:

Toast.makeText(getBaseContext(), "Go to Help.", Toast.LENGTH_LONG)
.show();

return true;
case R.id.setting:

Toast.makeText(getBaseContext(), "Go to Setting.",
Toast.LENGTH_LONG).show();

break;
}
return false;
}

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

136 Android App Development ฉบับสมบูรณ์

6. รันแอพพลเิ คชนั แล้วคลิกปุ่มเมนจู ะปรากฏ Menu ดงั รูป

6.3 คลกิ 6.1 คลกิ
6.2 แสดงเมนู

6.4 แสดงเมนู
เมือ่ ลองคลิกปุม่ Help จะแสดงข้อความ “Go to Help” และเมอ่ื คลิกปมุ่ Setting จะแสดงข้อความ
“Go to Setting” ซึ่งผู้อา่ นสามารถแก้ไขโคด้ โปรแกรมในสว่ นของเมธอด onOptionsItemSelected() เพอื่ ให้
แอพพลิเคชนั ท�ำงานตามทต่ี ้องการได้

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ 137

TabWidget

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

1. สร้างโปรเจ็กตใ์ หม่ ในทีน่ ้ตี ั้งช่อื วา่ MyTabWidget และกำ� หนดคณุ สมบตั ดิ งั น้ี

1.1 กรอกช่ือ
1.2 เลอื ก

1.3 คลิก เลือก 1.5

1.4 คลกิ 1.6 คลิก

1.7 ตัง้ ชอ่ื แอพพลิเคชนั
1.8 ตง้ั ชอ่ื แพ็คเกจ

1.9 ตงั้ ช่ือแอ็คทวิ ติ ี้

1.10 เลือก

1.11 คลิก

138 Android App Development ฉบับสมบูรณ์

2. แก้ไขโคด้ XML ในไฟล์ main.xml ดังนี้

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TabHost
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

</TabWidget>

<FrameLayout กำ�หนดคณุ สมบัติของ Tab ที่ 1
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android."
android:textAppearance="?android:attr/textAppearanceMedium" >

</TextView>
</LinearLayout>

<LinearLayout กำ�หนดคุณสมบตั ขิ อง Tab ท่ี 2
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >

</LinearLayout>

<LinearLayout กำ�หนดคุณสมบตั ขิ อง Tab ที่ 3
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent" >

</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>

</LinearLayout>

บทท่ี 7 รู้จักการใช้งานวิวกรุ๊ป (ViewGroup) ชนิดต่างๆ 139