Tutorial_Basic_Android_masterUNG2

เบสิกแอนดรอยด กับ มาสเตอร อึ่ง http://androidthai.in.th

1

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง


2

าสเตอร์ อึ่ง Talk

Android คือ อะไร ? เมื่อพูดถึง Android ในครั้งแรก ผมคิดถึง หุนยนตเสมือนมนุษย ในภาพยนตวิทยาศาสตร เรื่อง Star War ความจริงก็ไมผิดไป ทั้งหมด หุนยนต ตัวนั้น ก็เปนผูชวยพระเอกที่ด ีแลว

แอนดรอยด คืออะไร ?

Android ในที่นี้หมายถึงระบบปฎิบัติการ บน Smart Phone หรือ Tablet ที่ถูกพัฒนาจาก ระบบปฎิบัติการ Linux การพัฒนาโปรแกรม ที่ทํางาน บนระบบปฎิบัติการแอนดรอยด จะใช ภาษาจาวา Java เปนหลัก โดยผาน Google Developed Java Libraries ที่พัฒนาโดย Google

Who are you ? มาสเตอร อ่ึง ! ผมเปน Developer ธรรมดาๆคนหนึ่งที่สนใจ การ Developed Application สําหรับ Android ปจจุบัน เปน ผูอํานวนการที่สถาบัน EWTC (easy4com workshop & training center) รับผิดชอบในระบบปฎิบัติการ พัฒนาแอพลิเคชั่น บน อุปกรณ Mobile, Tablet ทุก Platform ไมวาจะเปน Android, ios, Black Berry และ Windows Mobile ทําอยางไร ? จะเกง แอนดรอยด เลมนี้ทําได แค เบื้องตนเทานั้น มี Tutorial อีกมาก ใน Internet หรือ http://androidthai.in.th ฝกไปเรื่อยๆ ครับ การเรียนรู ไมมีวันหมด จงอยาคิดนะเดิน จงเดินเลย ครับ

มาสเตอร อ่ึง

http://androidthai.in.th


3

สารบัญ

ตรวจสอบกอนวา ใน เครื่องม ีจาวา หรือเปลา ? .................................................................................................. 4 เปด cmd ออกมา ........................................................................................................................................ 4 ตรวจสอบ สถาปตยกรรม ของ ระบบปฎิบัติการ ............................................................................................. 6

โหลดตัวติดตั้งจาวา .......................................................................................................................................... 7 ADT หรือ Android Developer Tools .............................................................................................................. 11 SDK Manager ............................................................................................................................................... 15 Create Emulator ........................................................................................................................................... 19 ออกแบบ User Interface ................................................................................................................................ 27 New > Android Application Project ............................................................................................................. 27 ทําความรูจัก คลาส ......................................................................................................................................... 35 Declaration หรือ การประกาศตัวแปร .............................................................................................................. 52 การหาของเขต คลาส และ เมธอด .................................................................................................................... 55 New Android Application ............................................................................................................................. 69 Unknown Resource บน android 2.3.3 .......................................................................................................... 99 Unknown Resource บน android 4.0.3 ........................................................................................................ 100 USB Debugging บน android 2.3.3 ............................................................................................................. 101 USB Debugging บน android 4.0.3 ............................................................................................................. 102


4

ติดตั้ง จาวา บน ระบบปฎิบัติการ

ตรวจสอบกอนวา ใน เครื่องมี จาวา หรือเปลา ? เนื่องดวย eclipse ตองใช จาวา ในการทํางาน ดังนั้น กอนที่เราจะติดตั้ง eclipse และ SDK ใน ระบบปฎิบัติการ ของ เราจึงจําเปน ตองมี จาวา กอนอื่น ตองตรวจสอบกอนวา ใน เครื่องคอมพิวเตอร ที่เราจะใช เขียนโคดแอนดรอยด มี จาวา อยู

เปด cmd ออกมา สําหรับระบบปฎิบัติการ Windows ใหเปด cmd โดยไปที่ Start > run > cmd ครับ

ที่ run พิมพ cmd


5

สําหรับ ระบบปฎิบัติการ อื่นๆ เชน Linux หรือ mac จะใชั Terminal แทน cmd นะครับ เมื่อ เปด cmd ได หนาตาเปน อยางนี้ และ พิมพ คําสั่ง java –version ตามดวย กด enter

ในกรณี ที่ เครื่องคอมพิวเตอร คุณไมมี จาวา จะแสดงผลแบบนี ้

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


6

ตรวจสอบ สถาปตยกรรม ของ ระบบปฎิบัติการ กอนที่ มาสเตอร จะให คุณไปโหลด จาวา มาติดตั้งใน ระบบปฎิบัติการ Windows ของคุณ สิ่งสําคัญที่สุด คุณตองทราบวา ระบบปฎิบัติการของคุณ มี สถาปตยกรรม แบบ 32บิท หรือ 64บิท ทําการ ตรวจสอบไดโดย คลิกขวา ที่ไอคอน My Computer เลือก Properties แบบนี้

จากตัวอยาง เปน ระบบปฎิบัติการ Windows แบบ 32บิท เราก็จําของเราไว


7

โหลดตัวติดตั้งจาวา ตัวติดตั้งจาวา มีหลายบริษัท ทํามานะครับ มาสเตอร แนะนําใหใช ตัวติดตั้งจาวา ของ Oracle ครับ ใหเขาไปที่ http://www.oracle.com/technetwork/java/javase/downloads/index.html ครับ

คลิกเลือกโหลด Java Platform (JDK) 7u17 ครับ ให Accept License Agreement กอนนะครับ ถึงจะสามารถ โหลด ตัวติดตั้งได ถาคุณใช Windows 32 บิท ใหเลือกโหลด Windows x86


8

รอโหลด พักหนึ่งจะได ตัวติดตั้งจาวาแบบนี ้

ให ดับเปลคลิก เพื่อทําการติดตั้ง และ ทําตามขั้นตอนไปเรื่อยๆ


9


10

ลองใชคําสั่ง java –version อีกที่ใน cmd หรือ Terminal ถาไดขอความแบบนี้ นาจะมี จาวา ในเครื่องละ


11

ติดตั้ง ADT (android developer tools)

ADT หรือ Android Developer Tools เปนเครื่อมือที่ประกอบ ไปดวย eclipse และ SDK โดย eclipse ทําหนาที่ ชวยใหเราสามารถเขียนโคดแอนดรอยด ไดงายขึ้น สวน SDK ทําหนาที่ เก็บ รูปแบบคําสั่งตางๆ, คลาส ตางๆ รอใหเรานําไปใช ครับ ในการจะใช ใหคุณไป โหลด ADT มาไวในเครื่องกอน ไปที่ http://developer.android.com/sdk/index.html

คลิกที่ Download the SDK ไดเลยครับ อยาลืม Read Agree และ เลือกโหลดใหเหมาะ กับ สถาปตยกรรม ของ ระบบปฎิบัติการของ ตนเองครับ


12

โหลดเสร็จ จะได ไฟร ADT ที่ zip ไวแบบนี้

ให Extract หรือ แตกออก มาสเตอร มักจะแตกออกไวที่ C:// หรือ ที่ desktop ก็ไดครับ จากในตัวอยาง มาสเตอร แตกไวที่ desktop เลยครับ

แตกเสร็จ จะได โฟวเดอร ADT แบบนี้

ลองเขาไปดูใน โฟวเดอร นี ้


13

จะสังเกตุเห็นโฟวเดอร eclipse, sdk ใหเขาไปในโฟวเดอร eclipse

จะเห็น Application File ที่ชื่อวา eclipse ดับเปลคลิก เพื่อเปด eclipse หรือ คุณจะ Sent to Desktop เพื่อ สราง Shot-Cut ในการเปด eclipse ไดงายๆ ครับ

ตัว eclipse จะถามหา ตําแหนงโฟวเดอร ที่ใชสําหรับ เก็บ Source Code Android ที่เราจะเขียนขึ้น (Workspace)


14

ไดมาละ eclipse ปดหนา Welcome ซะ


15

ติดตั้ง Platform Android เพิ่ม/ลด

SDK Manager ตัว ADT ที่เราโหลด มาแตก จะได eclipse และ SDK โดย SDK ตัวนี้จะมีแค Platform ตัวลาสุด อยางตอนนี้ คือ android 4.2 ถึงแมนวา สามารถเขียนโคดแอนดรอย ให สามารถ ทํางานไดทุก Platform แตถาเรา Import Code Android จากการ Compile จาก Platform อื่น ที่ไมใช android 4.2 เชน android 2.3.3 ก็จะเกิดการ error ได ครับ ฉนั้น เราตอง ติดตั้ง Platform android 2.3.3 เพื่อมา Compile Code ที่วาจะไดไม error กอน อื่นดูตําแหนง ของ SDK กอนวา ถูกตองไหม ? ไปที่ Window > Preference

ที่ android จะเห็น SDK Location ลองดูวา ตําแหนง path SDK ตรงกับ ที่เราแตก ADT ออกมา ถาทุกอยาง เปนไปอยาง ภาพ


16

SDK Manager

มองหา ไอคอน SDK Manager แบบนี้

เดี๋ยวเรามาลอง ติดตั้ง Platform android 2.3.3 เพิ่มใหกับ SDK ของเรา การติดตั้ง ไมจําเปน ที่จะติดตั้งทั้งหมด ใหเลือก SDK Platform ก็พอ ถาเราไมไดเขียนโคดสําหรับ ใช Google Map ก็ไมตอง ติดตั้ง Google APIs ก็ไดครับ


17

รอสักพักติดตั้งจนเสร็จ


18

เมื่อติดตั้ง Platform Android เพิ่มเสร็จ จะเปนแบบนี้ สังเกตุ วา Android 2.3.3 จะ Installed ครับ

ลอง Preference เขาไปดูที่ Android ใหม จะเห็นวามี Platform Android 2.3.3 เพิ่มขึ้นมา แบบนี้ครับ


19

สร้าง Emulator สำหรับ ทดสอบ โค้ดแอนดรอยด์

Create Emulator ในการเขียนโคดแอนดรอย จะมีกระบวนการของการ ทดสอบ โคดแอนดรอยด ที่เขียนได วา ทํางานไดอยางที่ Developer ตั้งใจหรือเปลา เราเรียก กระบวนการนี้วา การทํา Testing เพื่อความ สะดวกเราจะ สมมุติ มือถือ ที่มีระบบปฎิบัติการแอนดรอยด เวอรชั่น และ หนาจอ ที่เรามุงหวัง กอนที่ เราจะนําโคดแอนดรอยด ที่เรา เขียนได ไปทดสอบบนเครื่องจริง ตอไป มาเรียนรูวิธีการสราง Emulator กัน ใหมองหา ไอคอน Android Virtual Device

ที่ Android Virtual Device Manager การสราง Emulator ใหม ใหคลิก New


20

จะได หนาตางแบบนี้


21

ที่ AVD Name ให พิมพ ชื่อของ Emulator ที่เราตองการลงไป

และ Device เปนตัวกําหนดขนาด ของหนาจอ ของ Emulator ที่เราตองการ จากตัวอยาง มาสเตอร อยากได Emulator ที่มีหนาจอ 480x800 มีความหนาแนนของ Pixels อยูที่ hdpi


22

ตอไปก็เลือก Platform ของระบบปฎิบัติการแอนดรอยด ที่ตองการใหติดตั้ง หลังจากที่เราได เพิ่ม Platform android 2.3.3 เราก็สามารถ ทําให Emulator ที่เราจะสรางขึ้น มี ระบบปฎิบัติการแอนดรอยด เวอรชั่นนี้อยูใน Emulator ไดครับ แตจาก ในตัวอยาง มาสเตอร ตองการ ให Emulator ที่ เรากําสังจะสรางขึน้ มีระบบปฎิบัติการแอนดรอยด เปน android 4.2.2 ครับ


23

ตอมาก็เลือก Option ใหกับ Emulator


24

Start Emulator

ใหทําการ Select Emulator ที่ตองการ และคลิก Start สังเกตุวาถาเราไม Select Emulator ตัวใด ตัวหนึ่ง ปุม Start จะคลิกไมได

มาสเตอร ไมชอบ Emulator ที่ใหญๆ ครับ จะ Scale display ลงมา ตั่งคา ตามนี้ครับ


25


26

ใจเย็นรอจบ Emulator บุธจนครบกอนคอย ปด Android Virtual Device Manager นะครับ


27

การสร้างโปรเจคแอนดรอยด์

ออกแบบ User Interface แอพพลิเคชั่น แอนดรอยด จะนาสนใจ, นาใช หรือไม ? การออกแบบ User Interface ถือเปนหัวใจ ใน Workshop แรกนี้ เรานะมาลอง ทําสิ่งที่ เราออกแบบ ไปเปน ไฟร xml กัน มาดูโจทย ของเรา

เดี๋ยวเรามาลองทํา Workshop งายๆ กัน ชื่อแอพ Counter เปนแอฟ ที่มุง Target Device Smartphone android 4.2 มีหนาจอ 480x800 hdpi ครับ สวน Requirement ของแอพก็ สามารถเปลี่ยนเลข 1 จากเพิ่ม หรือ ลดไดจาก ปุม ตางๆที่อยูบน Activity ครับ

New > Android Application Project


28

New Android Application

ในการสรางโปรเจคแอนดรอยด จะมีขอมูลสําหรับกรอกอยู 3 คา

• Application Name คือ ชื่อของแอพ

• Project Name คือ ชื่อของโฟวเดอร ที่จะใชสําหรับ เก็บ Source Code

• Package Name คือ ชื่อของ package การตั้งชื่อของ Package ตองการ ความเปน Unity

ลองกรองขอมูล ตามนี ้ครับ


29

Configured Project เปนหนาที่บอก กลาว วา

• Create custom launcher icon ตองการจัดการ ไอคอนเองหรือ เปลา?

• Create activity จะให eclipse สราง คลาสหลัก ใหหรือ เปลา?

• เก็บ Source Code ที่เขียนไดไวที่ Workspace หลักนะ

หนา Configure Icon เปนหนาที่ ไวจัดการ ไอคอน ของแอพ มาสเตอร จะลองใช Clipart


30

เลือกรูปไอคอน ที่ตองการได ตามใจชอบ เลยครับ


31

เราสามารถจัดการสีของตัวไอคอน หรือ รุปแบบ และ สีของพี้นหลังได


32

ในสวนของการ Create Activity มาสเตอร เลือก Blank Activity เพราะ ตองการให eclipse Generate Activity เปลาๆ ใหครับ

สวนนี้เปนชื่อของ คลาส และ xml สําหรับควบคุม Layout ครับ


33

ออกแบบ User Interface

ตอนนี้ eclipse ก็จะ Generate Code ตางๆ และ สวนประกอบตางๆ ใหแบบนี้

เรามาทําความรูจักกับ สวนประกอบตางๆ ของ eclipse กัน สวนแรก Navigator ดานซาย ทําหนาที่ แสดง โปรเจคตางๆ ใน Workspace


34

ตอมา Desktop แสดงพื้นที่การทํางาน ของ Coding และ Design

ตอมาสวนของ Outline และ Properties แสดง คุณสมบัติของ Widget


35

และสวนประกอนสุดทาย Console สิ่งๆ นี้จะชวยเรา ตอนทำการ Debug แอพครับ

ทําความรูจัก คลาส คลาส คือ ไฟร. Java อยูใน Package หรือ จะกลาววา คลาส ก็คือ Source Code ของเราก็ไมผิดครับ


36

Xml ควบคุม Layout

ในทุกๆ Activity ถามีการใชหนาจอ เครื่อง จะตอง มีไฟร ที่ทําหนาที่ กําหนดตําแหนง, ควบคุมการทํางานของ Widget ตางๆ ที่อยูบน Activity

ขางบนเปนโหมด Graphical Layout สวนดานลางเปน โหมดโคด


37

Select TextView Widget

การที่ มาสเตอร ทําการคลิก ที่ตัวหนังสือ บน Activity เรียกวา การทํา Select TextView Widget สังเกตุวา Properties จะเปลี่ยนคาไปตาม Widget ที่เราเลือก เราลองมองหา Text และคลิกปุมที่มี จุดสามจุด แบบนี ้

ที่ Resource Chooserใหเลือกที่ app_name


38

ขอความที่อยูใน TextView Widget ที่เคยเปน HelloWorld จะเปลี่ยนไปเปน Counter แบบนี้

มาสเตอร ลองใหม มาสเตอร ลองเลือกที่ TextSize

ให New Dimension


39

กําหนดคาตามมาสเตอร

ขนาดของขอความจะ ใหญขึ้นแบบนี้


40

ตอไป มาสเตอร จะขยับ TextView Widget ตัวนี้ ไปอยูแนวกลางแกน X โดยการเปด Central Horizontal เปน True

เห็นไหม ? TextView Widget ขยับมาอยูตรงกลางละ


41

การเพิ่ม Widget บน Activity

ทําไดโดย การลาก Widget ที่เราตองการไป drop ไวที่ Layout ที่เราตองการใหเพิ่ม

Widget ที่เราเพิ่มใหม จะไปอยูที่มุม ซายบนแสมอ ครับ (อยาเพิ่มโดยการ drop Widget ที่ desktop นะครับ)


42

ที่ Text มาสเตอร จะกําหนด ขอความเปน 1

และกําหนด ตําแหนง เปน Center in Parent แบบนี้


43

มาสเตอร กําหนด TextSize ใหม


44


45

ตอไป มาสเตอร จะทํา Panel สําครับปุมควบคุม มาสเตอร เพิ่ม Linear Layout Horizontal มาไวบน Widget

จะเห็นมี กรอบสี่เหลี่ยมสีฟา ที่มุมซายบนแบบนี ้


46

มองหา Width

มาสเตอร ตองการเปลี่ยน Width จาก wrap_content ไปเปน match_parent ซะ


47

กําหนดตําแหนง ใหอยูที่ ดานลางเสมอ โดย มาสเตอร เปด Align Parent Button เปน True

เพิ่ม Button Widget ไปที่ Linear Layout ที่เราสรางขึ้น


48

ไดมาละ 1 ปุม ทําการเพิ่ม Button Widget อยางนี้จนครบ สาม ปุม


49

กําหนด ปาย ของปุมแตละปุม ดวย Text


50

ทําปายดวยวิธี นี้จนครบ สาม ปุม

กำหนด Weight ของ Button Widget ทั้ง สาม ปูม ใหมีคา เทากับ 1 เพื่อใหปุม มี Width เทาๆ กัน


51

ไดมาละ User Interface ที่เราตองการ


52

การเขียน Source Code Android

Declaration หรือ การประกาศตัวแปร ในการเขียนโคดแอนดรอยด ขั้นตอนแรก คือ เราจะตองประกาศตัวแปรซะ กอน การประกาศเพื่อให แอนดรอยด สํารอง หนวยความจําไวให แอพเราตอนทํางาน แลวจะประกาศตัวแปร กี่ตัว จํานวนของตัวแปร จะขึ้นตรงกับ จำนวนของ Object พิจารณารูปนี้ จากรูป จะเห็น Object 4 ตัว โดย Widget ที่เปน Object ทั้ง 4 ตัว มี ID เปนไปตามนี ้

กอนที่มาสเตอร จะ Declaration มาสเตอร จะทดสอบโคดกอนวา ตัว UI ที่ออกแบบไว แสดงผลไหม ?


53

เลือก Android Application แลวใจเย็นๆ รอจน eclipse ติดตั้ง โคดทีเ่ราเขียนไปไวที่ Emulator เสร็จกอน


54

ถาไดผลแบบนี้ ก็โอเค UI ที่เราออกแบบ ทํางานไดละ

eclipse จะถามวา จะใหเปด Log Cat ไหม? มาสเตอร จะไมคอยเปดครับ เพราะเปลืองทัพยากร จะเปดตอนทํา Debug มากกวา


55

ขอบเขตของ Class และ Method

การหาของเขต คลาส และ เมธอด ในไฟร ที่เปน จาวา จะมีกี่ คลาส ก็ได และ ใน คลาส จะมีกี่ เมธอดก็ได แลว เราจะหาจุดเริ่มตน, จุดสิ้นสุด ของคลาส และ เมธอดได อยางไร? งายสุด มาสเตอร เอา Cursor ไปวางหลัง ปกกาเปด ของ คลาส หรือ เมธอด และ หาปกกาปด ที่มีกรอบสี่เหลี่ยม ลอมรอบ นั้นคือ จุดสินสุดของ คลาส หรือ เมธอด

ตําแหนงที่ใชประกาศตัวแปรคลาส คือ อยูใน คลาส แต อยูนอก เมธอด


56

หลักการประกาศตัวแปร

การประกาศตัวแปรคลาส จะประกอบไปดวย 3 สวน 1. Access การเขาถึง คุณอนุญาติ ใหใครใชตัวแปรตัวนี้ บาง เชน Public ทุกๆ คลาสที่อยูใน Package

สามารถใช ตัวแปรตัวนี้ได, Private ใชไดเฉพาะ คลาส ที่ประกาศไวเทานั้น 2. Type ชนิดของขอมูล เชน String, TextView, Button เปนตน 3. Name ชื่อของตัวแปร

เดี๋ยวเรามาลองประกาศตัวแปร กัน ใหพิมพ pr และ ctrl + space ไมตองพิมพ private นะครับ มาสเตอร ชอบให eclipse มัน Generate Code เอง มากกวา จะไดไมผิดครับ

Eclipse จะ Generate Code ใหแบบนี้


57

ตอไป ประกาศชนิดของขอมูล ตัวเลข 1 ที่อยูใน Activity เปน TextView Widget จะมีชนิดขอมูลเปน TextView การประกาศใหเราพิมพ tex ตามดวย Ctrl + space เลือก TextView แบบนี้

สวน Name ตองพิมพ เองครับ

ทําแบบนี้กับ Button Widget ดวยครับ


58

การทำ Format

จะสังเกตุวาโคดแอนดรอยด ของเรา เรียงตัวไมสวยเราสามารถสังให eclipse ทําการเรียงโคดใหเราได โดย ไปที่ Source > Format แบบนี้

ตัวโคดเราจะเรียงใหม สวยเชียว


59

Initial Widget

ขั้นตอนตอไป หลังจากที่เราได Declaration แลวก็คือ การทํา Initial Widget คือ การผูกความสัมพันธ ระหวาง ตัวแปรที่เรา ประกาศ กับ Widget ที่อยูใน Activity ในการทํางาน มาสเตอร จะสราง เมธอด สําหรบั การทำ Initial Widget โดย เฉพาะ เรามาลองสรางเมธอด เปลากัน เขาไปใน เมธอด onCreate กัน

และพิมพ initialWidget(); ไปเลยครับ

จะสังเกตุ เสนแดง คือ มัน error เพราะ ใน คลาส ไมมี เมธอดที่ชื่อวา initialWidget() เลย ใหกด Ctrl + 1 และ สรางเมธอด นี้ซะ


60

นี่คือวิธีการสราง เมธอดเปลา ที่งายที่สุด

ที่เมธอด initialWidget() เราจะทำการ Initial Widget ระหวางตัวแปร ทุกตัว ที่เราประกาศไป กับ Widget ที่อยูใน Activity เริ่มจากตัวแปรตัวแรกกอน โดย พิมพ ชื่อของตัวแปร = fin และ Ctrl + Space ใหเลือกตามภาพ

สวนพารามิเตอร กําหนดดังนี ้


61

และอยาลืม Add Case ดวย

เนียเสร็จแลว วิธีการ Initial Widget

ลองฝกทําจนครบ 4 ตัวแปรเลยนะครับ


62

SetOnClickListener

ที่เมธอด onCreate() เรากําลังจะ SetOnClickListener ใหกับปุม ทั้ง สามของเรา

พารามิเตอร ใช this

Implement ใหกับ คลาส


63

สังเกตุวา คลาส MainActivity จะไดรับการ Implement OnClickListener แบบนี้

eclipse จะรองขอทํา Add Unimplemented โดยการเพิ่มเมธอด onClick()

eclipse ก็จะ Generate Code เมธอด onClick ใหแบบนี้


64

ที่เมธอด onClick() มาสเตอร จะใช Switch Case ในการดักจับ Event

จะไดแบบนี้

กําหนดเงื่อนไขตามนี้


65

Algorithm แอนดรอยด์

เปนการบวนการคิดของ แอพแอนดรอยด วา ตองคํานวนอยางไร ? จึงจะไดผลตามที่เราตองการ จาก แอพ Counter จะมีปุม สาม ปุมคือ btnLower, btnOne, btnMore ในการควบคุม txtNumber โดย Logarithm ของแอพ นาจะมี จำนวน Integer ที่จะเพิ่มถา กดปุม btnMore, ลด ถากด btnLower และ เปน 1 ถากด btnOne มาสเตอร จะไป ประกาศตัวแปรเพิ่ม intNumber

และเพิ่มเมธอด showText() สําหรับประมวลผล การแสดงที่ txtNumber

พอเรา Create method เราจะได เมธอด showText(); เปลาๆ แบบนี้


66

มาสเตอร ใชคําสั่ง settext มากําหนดขอความที่ จะแสดงที่ txtNumber

เนื่องดวย ใน พารามิเตอร ตองเปน String ฉนั้นเราตองแปลง Integer ไปเปน String


67

จนไดแบบนี้

ใหเราเพิ่มเมธอด showText() ไปที่ ทุก Case

ตอไป มาสเตอร จะลองทดสอบโคด ที่เขียนไดกับ Emulator


68

ลองคลิกปุม ลดลง, เพิ่มขึ้น หรือ แมนแต หนึ่ง นาจะไดผลตามนี ้


69

แอพแอนดรอยด์ ที่เกี่ยวข้อง รูปภาพ และ เสียง

ตอไปเรามาเรียนรู ทําแอพแอนดรอยด ที่เกี่ยวของ กับ การจัดการ ภาพนิ่ง และ เสียงกัน โดยแอพเราจะชื่อวา แอพ ABC มีปุม สาม ปุม ที่จะสามารถสลับ ตัวอักษร A ไปเปน B, C และ ตอๆไปไดครับ โดยทุกๆ ครั้งที่ คลิกปุมตอง มี เสียง ดวย รูปรางหนาตาแอพ

New Android Application มาสเตอร กําหนดชื่อแอพวา ABC และ Package Name ตามนี้


70

ครั้งนี้มาสเตอร จะใช ไอคอน เปนตัวอักษร นะครับ

มาสเตอร จะลัดเลยนะครับ หลังจากที่เรา รอให eclipse นั้น Generate Code จะไดแบบนี้


71

สิ่งแรกที่เราจะทําคือ ใหเรา Select TextView Widget เลือก Text ไปที่ app_name ที่อยูใน Strings.xml เพื่อเปลี่ยนขอความ ที่เปน HelloWorld ไปเปน ABC ครับ

กำหนด TextSize ตาม มาสเตอร เลย

และกำหนด ตําแหนงอยูตรงกลาง โดยการไปเปด True ที่ Central Horizontal

มาสเตอร ตองการให ขอความ bolt จาก TextStyle


72

ภาพที่นำมาใช้ ต้อง png เท่านั้น

สกุลของภาพ ที่จะนํามาใชใน แอพแอนดรอยด ตองเปน png เทานั้น jpeg, gif อื่นๆ ไมสามารถนํามาใชได ไปที่ ภาพและ copy ไป paste ไวที่ drawable-mdpi

กอนที่ มาสเตอร จะเอา imageView ไปใสที่ Activity มาสเตอร จะสราง Layout คลอบไวกอนครับ


73

เมื่อ drop Linear Layout ไปที่ Relative Layout จะไปอยูที่มุม ซายบน มาสเตอร ตองการ กําหนด ตําแหนง ไปไวที่ Center In Parent

ทีนี้เราก็ เพิ่ม imageView ไปที่ Linear Layout ที่เราสรางคอยไว

เลือกรูป a


74

สร้าง Panel สำหรับ Button 3 อัน

ใหใชหลักการเดียวกัน กับ ที่เราเคยทํา ชุดปุม ของ แอพ Counter มาสเตอร จะสราง Linear Layout Horizontal ครอบปุม ทั้ง สามไว ครับ

กำหนด Width ใหเปน match_parent และให ตําแหนง เปน Align Parent Button


75

Extract String

เพิ่ม Button Widget เขาไปที่ Linear Layout ที่เราสรางขึ้น 3 ปุม และ อยาลืมกําหนด Label ที่ Button ทั้งสามดวย

จากหัวขอ เราตองการ นํา Label ที่เราพิมพ ไปที่ปุม ทั้ง 3 ไปเก็บไวใน Strings.xml เราจะเรียกวิธีนี้วา การทํา Extract String วิธีการทํา ใหไปโหมด โคดดิ้ง


76

สังเกตุเสนบรรทัดสีเหลือง ให Ctrl + 1 จะเห็น Extract String

คือ อยางนี้ การ Extract String จะเปนการสั่งให eclipse ไปสราง String Name และ Value ที่ Strings.xml


77

ลอง Save All และ ที่โคด เสนบรรทัดสีเหลืองจะหายไป

ทําแบบนี้ ทั้ง 3 ปุม


78

Strings.xml เก็บทุกอย่าง ที่เกี่ยวกับ String

สั่งเกตุวา ที่ strings.xml จะมี String เกิดขึ้น สามตัว แบบนี้

ตอมา มาสเตอร ตองการให ความกวางของปุม ทุก ปุม มีคาเทากัน โดยการ กําหนด Weight = 1 ทั้ง 3 ปุม


79

การใช้ ภาพ เป็น Background

เริ่มตนจากการ ไป Copy ภาพที่เรา สนใจ ไปไวที่ drowable-mdpi

ไปที่ Relative Layout มองหา background เลือกรูป ที่เราตองการใหมาเปน background


80

colors.xml จัดการ สี

ในการจัดการ เกี่ยวกับสี ทั้งหมดของ UI จะใช colors.xml ขั้นตอนแรก เราตองสราง ไฟร xml ขึ้นมาซะกอน

ตั้งชื่อไฟร colors.xml


81

ตําแหนง path ที่

ไดมาละ colors.xml การเพิ่ม tag color ใหคลิก Add


82

เลือก color และ กําหนดคาของ Name, Value ตามนี่

กำหนด background ของ Linear Layout

กำหนด ID ใหกับ Widget ตางๆ ที่เปน Object ดวย


83

ทดสอบโค้ด ที่ได้ บน Emulator

ใหเปด คลาส ออกมาครับ และ คลิดทดสอบ


84

Declaration ตัวแปร ก่อนทุกครั้ง

จากใน Activity เราจะเห็น Object 4 ตัว อยาลืมนะ ประกาศตัวแปรคลาส ตอง ประกาศในคลาส แตอยูนอก เมธอด

Create Method ออกมา ซะ


85

และ Initial Widget ซะ

กอนที่ มาสเตอร จะไป SetOnClickListener ที่ปุม ตางๆ มาสเตอร จะ ประกาศตัวแปรเพิ่มกอน คือ อยางนี้ ทุกครั้งที่ คลิกที่ ปุม ตางๆ ที่อยูใน Panel จะมีผมตอการ เพิ่มคา, ลดคา ของ intABC


86

SetOnClickListener ให้กับ Button

เริ่มตนจากการ นําตัวแปร ที่คุณตองการ มา SetOnClickListenter แบบนี้

ในการ SetOnClickListener ในครั้งนี้ มาสเตอร จะ SetOnClickListener แบบ Call Back ไมใช SetOnClickListener แบบ Implement Class แบบที่ทําที่ แอพ Counter


87

ตอง Import คลาสเขามา

Error จะหายไป เพราะ import android.view.View.OnClickListener อยาลืมไป ใส ; ดานทาย Statement ดวย


88

โดยปกติ มาสเตอร จะชอบสราง เมธอด การทํางานแยกออกมาทําขางนอก และ กําหนดสิทธ ให ใชไดกันทั่วๆ ในคราส ครับ

เห็นไหม ? ได เมธอด changeABC() ทําหนาที่ เปลี่ยนรูปให

กําหนดเงื่อนไข ของการคลิกที่ ปุมตางๆ แบบนี้


89

มาดูวาที่เมธอด changeABC() ทํางานอยางไร คา intABC จะวิ่งอยูระหวาง 1-26 แลว ไปทํางานที่ เมธอด setABC();

ที่เมธอด setABC() ทําหนาที่ เลือกรูปไปใสที่ imageView โดยใช Switch Case Statement มาดูเงื่อนไขแรกกัน

ทําไปเรื่อยๆ จนครบ 26 Case


90

ลองทดสอบโค้ด บน Emulator

เดี๋ยวเราจะทําการทดสอบ วาโคดแอนดรอยด ของเรา สามารถเปลี่ยน รูปภาพ ไดหรือไม ?


91

การติดตั้ง เสียง ให้กับ แอพแอนดรอยด์

ตอไปก็เปนการ ทําใหแอพแอนดรอยด ของเรามีเสียง แอนดรอยด รับไฟร เสียงที่เปน mp3 เทานั้นนะครับ และ ตอง เก็บไวที่ โฟวเตอร res/raw ดวย กอนอื่นเรามา สราง โฟวเดอร raw กันกอน


92

ให copy ไฟรเสียง ใสไว

การโคดดิ้ง มาสเตอร สราง เมธอด soundEffect(); ไวทุก event ที่ กดปุม


93

ที่ เมธอด soundEffect(); จะสราง ออฟเจก soundEFF สืบทอดจาก คลาส MediaPlayer

เสร็จแลว ลองทดสอบ โคดแอนดรอยด ที่เขียนได บน Emulator ด ู


94

การทดสอบ โค้ดแอนดรอยด์ บน มือถือ จริง

การทดสอบ โคดแอนดรอยด บน มือถือ หรือ อุปกรณ จริง มี สองแบบ แบบแรก ให eclipse เปนตัวจัดการ สงเขาไป ตรงๆ แตมักจะเหนื่อยกับ ระบบปฎิบัติการ Windows ที่ ตองการ Driver ADB ของแตละ Brand ของอุปกรณ สวน อีกแบบ เปน การติดตั้งแอพแอนดรอยด ผาน ไฟร แบบ APK ไมวา จะเปนการ ติดตั้งแบบแรก หรือ แบบ APK คุณก็ ตอง Configure เครื่องดวยกันทั้งนั้น มาสเตอร จะสาทิตบน มือถือที่เปน Android 2.3.4 และ มือถือที่เปน Android 4.0.3 นะครับ เพราะ ตอนนี้ อุปกรณ ที่เปนแอนดรอยด ใช สองเวอรชั่นนี้มากที่สุด


95

Configure มือถือแอนดรอยด์ ที่เป็น android 2.3.4 และ android 4.0.3

กอนที่เรา จะเอามือถือแอนดรอยด 2.3.4 เราตองทําการ ลด Security บางอยางออกไป กอนจะถึงตรงนั้น เรามาดู เวอรชั่นแอนดรอยด ที่อยูในมือถือเรากอน ตัวอยางแรก เปน มือถือ Welcome A99

ไปที่ menu > More > Settings


96

มองหา About Phone และ หา Android Version ก็จะเห็นเวอรชั่นของระบบปฎิบัติการ ที่เครื่องคุณใชอยู

ตัวอยางตอไป เปน LG Optimize


97

ไปที่ all Program > Settings

มองหา About phone ก็จะทราบเวอรชั่นของ มือถือเราละวา เปน แอนดรอยด เวอรชั่นอะไร ?


98

การติดตั้ง Driver ADB ให้กับ มือถือแอนดรอยด์

เฉพาะระบบปฎิบัติการ Windows ที่ตองการ Driver ADB เฉพาะ Brand อยางเชนในตัวอยาง จะติดตั้ง Driver ADB ใหกับ มือถือ LG มาสเตอร ก็เขาไปที่ เว็บของ LG โหลด Driver ADB มาและทําการติดตั้งไปครับ

เมื่อติดตั้งเสร็จ

ตัว Driver ADB ในมือถือบางรุน อยาง Welcome A99 ก็ไมมีแหลงโหลดนะครับ บางครั้งก็อยูในเครื่องของ มันเองครับ


99

อนุญาติให้ติดตั้ง แอพแอนดรอยด์ จาก Unknown Resource ได้

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

Unknown Resource บน android 2.3.3 ไปที่ menu > Setting > Applications


100

Unknown Resource บน android 4.0.3 ไปที่ All Program > Settings > Security


101

เปิด USB Debugging

เปนการ เปด Port USB เพื่อใหสามารถ เคลื่อนยายไฟร ผาน Port USB ได

USB Debugging บน android 2.3.3 ใหไปที่ menu > Setting > Development > USB debugging


102

USB Debugging บน android 4.0.3 ใหไปเริ่มตนที่ All Program > Settings >


103

ทดสอบโค้ด บน Device จริง ผ่าน eclipse

วิธีการทดสอบโคด แบบนี้ สําหรับ Windows ตอง ติตั้ง Driver ADB ดวยครับ การทําก็แค เสียบสาย ไมตองปรับโหมด อะไรนะครับ ทําเหมือนเสียบชารดไฟ นะครับ ไปที่ eclipse


104

สวนอันนี้ทดสอบ บน android 4.0.3


105

การติดตั้ง แอพแอนดรอยด์ ผ่าน ไฟร์ APK

การติดตั้ง แอพแอนดรอยด ผาน ไฟร ติดตั้ง แบบ APK เปนวิธี การติดตั้ง แอพ หรือ เผยแพร แอพ ที่งายที่สุด เพียงแค เรารัน แอพแอนดรอยด ของเราไดใน Emulator ได ในการบวนการนี้ eclipse จะสราง ไฟร APK ไวใน โฟวเดอร bin ที่อยู ใน โปรเจค ของเรา เพียงแค เรา Copy ไฟร APK นี้ ไปไว บน มือถือแอนดรอยด ก็ สามารถ ตดิตั่งแอพไดแลว ไปที่ Workspace

เขาไปใน โปรเจค ABC > bin ก็จะเจอ ABC.apk ให copy ไปเก็บไวใน Device


106

การติดตั้ง ไฟร์ APK บน Device android

เดี๋ยวเราลองทดสอบ บน มือถือที่เปน android 2.3.4 กอน ทําเหมือนตอนเรา อัพเพลงนะครับ ให Turn on USB Storage ซะ

มาที่ PC หรือ Notebook ไปที่ My Computer


107

กอนถอดสายให Turn off USB storage กอนนะครับ

แลวคอยไปเปด แอพพวก File Manager ในเครื่อง


108

ให Browse เขาไปใน sd-Card ที่เรา paste ไฟร APK ไว การติดตั้งแค คลิก 1 ที


109

ลองเปดดู หรือ เขาไปดูใน All Program ก็จะเห็นแอพของเราอยูครับ


110

การถอดแอพ ที่ติดตั้ง ใน Device Android

ที่ผานมาเราเรียนรู วิธ ีการติดตั้งแอพแอนดรอยด ไปไวที่ อุปกรณ ทีนี้ เราจะลอง ถอด หรือ Uninstall แอพออกจาก อุปกรณ บาง เริ่มที่ อุปกรณ ที่เปน android 2.3.4 กอน


111


112

มาสเตอร อึ่ง สถาบัน EWTC (easy4com workshop & training center)

53 บางนา-ตราด 14 บางนา กรุงเทพ 10260

Office 02-393-0970, Hotline 081-859-5309 http://androidthai.in.th

Tutorial_Basic_Android_masterUNG2

Documents

Transcript of Tutorial_Basic_Android_masterUNG2