Tutorial Android Studio

76
อบรมแอนดรอยด กับ มาสเตอร อึ่ง อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th 1 อบรมเขียน Coding Android Application สำหรับผู้เริ่มต้น

description

Learning Android With Workshop in android Studio by http://androidthai.in.th

Transcript of Tutorial Android Studio

Page 1: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

1

อบรมเขียน Coding Android Application สำหรับผู้เริ่มต้น

Page 2: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

2

สารบัญ

Table&of&Contents&

สารบัญ 2

มาสเตอร Talk 6

เริ่มตน จาก ศูนย 6

คอยๆ ทําตามไป 6

http://androidthai.in.th 6

https://www.facebook.com/android.Training.by.EWTC 6

หรือโทรหา มาสเตอร อ่ึง เพื่อ ปรึกษาปญหา 6

081 – 859 – 5309 6

ไดตลอดเวลาครับ 6

มาสเตอร อ่ึง 6

ติดตั้ง JDK และกำหนด path Java 7 1. Download JDK มาติดตัง้กอน 7 2. Download ตัวติดตั้งมาแลว ก็ ติดตั้ง ซะ 8 3. ตรวจสอบวามี JDK ในเครื่องหรือยัง ดวย cmd 9 4. กำหนด System Variables ใหกับ Java 10

ติดตั้ง Android Studio 13 1. Getting Started with Android Studio 13 2. เมื่อโหลด ตัวติดตั้ง Android Studio มาไดแลว 14

HelloWorld Android Apps by Android Studio 16 1. เปด Android Studio ขึ้นมาครับ 16 2. New Project 16

เรียน OnClickListener จาก Workshop ABC_Text 19 User Interface ABC_Text 19

Page 3: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

3

ABC_Text WorkShop 19 เปด Android Studio ออกมาเลยครับ 19 New Project 20 การจัดการดาน Icon 21 คลาส MainActivity.java 23 สวนควบคุม Layout activity_main.xml 24

Create Emulator for Tester 24 My emulator 26

SDK Manager 27

Design UI 28 Text 28 TextSize 28

การเพิ่ม Widget ไปท่ี Activity 30 การวางตําแหนงของ Widget 35 การเปลี่ยน Background 35 กําหนดสีใหกับ TextView 37 กำหนด TextView และ Button เปน สีขาว ใหหมด 38

ทดสอบโคด ดวย Emulator 38

กำหนด id ใหกับ Widget ท่ีเปน Object 40

การโคดดิ้งแอนดรอยด โคด 41

เริ่มจากการ Declaration หรือ การประกาศตัวแปรคลาส กอน 41

Initial Widget 42

SetOnClickListener แบบ คลาส Implement 43

คลาส Implement 43

การ get Event จากการคลิก 44

ลองทดสอบโคด ABC_Text บน Emulator 45

การทำแอพ หลายภาษา 46

Page 4: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

4

การปรับมุมมอง ระหวาง ภาษา อังกฤษ และ ไทย 48

การกําหนด ภาษา ใหกับ emulator 48

49

การทําแอพท่ีมีหลายๆ Activity 51

เปด Android Studio เพื่อทํา WorkShop ManyActivity 51

ไดมาละ แอพ ManyActivity 52

การสราง ListItem ดวย String Array 54

Create Values Resource File ท่ีชือ่วา my_list.xml 54

การโคดดิ้งแอนดรอยด แบบ ListView 55

ใหทําการ Override Method 57

Intent Class เขาใชกันอยางไร? 58

การใช Intent ใหไปเปดเว็บโซด เม่ือ เกิดการคลิก 58 สรางการสืบทอด หรือ Herniate จาก คลาส Intent 58 ลองทดสอบโคดแอนดรอยด ที่เขียนได บน Emulator 59

การสราง Activity จาก Android Component 59

การสราง Layout Resource File 60

การกำหนด คลาส Activity กับ Layout 61 สราง Intent ไปที่ EditTextActivity.java คลาส 61

การ SetOnClickListener จากการกำหนด onClick ของ xml 62

Declaration & Initial Widget ซะใหเรียบรอย 63

Declaration 63

Initial Widget 63

กําหนดให Get Value จาก Edit Text 63

การทำ Alert Dialog 64

ลองทดสอบโคด ท่ีแสดง AlertDialog 66

Page 5: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

5

Spinner Widget 66

กําหนด เมธอด ตอนคลิกท่ี onClick 67 กำหนดการ Intent ไปที่ SpinnerActivity.java 67

การ Set Up Spinner 68

Declaration และ Initial Widget ใหกับ Spinner 68

ประกาศตัวแปร Array 69

GetResource ใหกับ ตัวแปร Array พรอมสราง Adapter 69

ลองทดสอบโคด Spinner 69

SetOnItemSelectedListener ใหกับ Spinner 70

Test Codding form Spinner 71

เรียนรูการทํา SeekBar 71

ประกาศตัวแปร และ Initial Widget ของ SeekBar 73

ทดสอบ SeekBar 74

การสงคา SeekBar ท่ีเลือกไปท่ี Alert Dialog 75

ทดสอบโคด SeekBar ครับ 75

การบาน android Thai 76

Page 6: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

6

มาสเตอร Talk

เริ่มตน จาก ศูนย การอบรมการเขียน หรือ การพัฒนา ซอฟตแวร หรือ แอพพลิเคชั่น แอนดรอยด สําหรับผูเริ่มตน จากประสพการณ ของ มาสเตอร อึ่ง ในการที่จะพัฒนาแอนพลิเคชั่น แอนดรอยด ใหดีนั้น ตองศึกษาตลอดเวลา ไมมีใคร ที่ใชเวลา 1 เดือน, 1 สัปดาห หรือ 2 วัน จะเขียนโปรแกรม แอนดรอยด ไดอยาง ถองแท หลอกครับ ดังนั้น การยากที่สุด ของการเรียนรู และ พัฒนาการ โปรแกรมเมอร คือ การเริ่มตน

คอยๆ ทําตามไป ทําไมไดอยาทอถอย ไปทําอยางอื่น แลวคอยกลับมา ศึกษาตอ แตถาไมได จริงๆ มาลง คอรสเบสิกแอนดรอยด กับ มาสเตอร อึ่ง เลยครับ โดยเขาไปหาขอมูลที ่

http://androidthai.in.th

https://www.facebook.com/android.Training.by.EWTC

หรือโทรหา มาสเตอร อ่ึง เพื่อ ปรึกษาปญหา

081 – 859 – 5309

ไดตลอดเวลาครับ

มาสเตอร อ่ึง

Page 7: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

7

ติดตั้ง JDK และกำหนด path Java

1. Download JDK มาติดตั้งกอน เราตองใช JDK ครับ โหลดไดจาก http://www.oracle.com/technetwork/java/javase/downloads/index.html

โหลดตัวที่เหมาะสมกับ ระบบปฎิบัติการของตนเองนะครับ อยาง มาสเตอร ใช Windows 64 Bit ก็ใหโหลด ตัว jdk—7u25-windows-x64 แตถาเปน jdk-7u25Windows 32 Bit ก็ใหเลือกโหลด windows-i586 ครับ

Page 8: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

8

2. Download ตัวติดตั้งมาแลว ก ็ติดตั้ง ซะ

ดับเปลคลิกเพื่อติดตั้ง JDK

Page 9: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

9

3. ตรวจสอบวามี JDK ในเครื่องหรือยัง ดวย cmd ไปที่ Start > run > cmd

พิมพคําสั่ง java –version แบบนี้

ถาทุกอยางถูกตอง นาจะไดผลแบบนี้ ครับ

Page 10: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

10

4. กำหนด System Variables ใหกับ Java หลายๆทานที่ ใจรอนรีบไปติดตั้ง android Studio เลยเนีย จะทําให error ได เราควรกําหนด System Variables ใหกับ จาวา กอน

ไปที่ Environment Variables และ สราง System variables ใหม โดยการคลิก New

Page 11: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

11

กําหนด ชื่อ และ path แบบนี้

และอีกอันแบบนี้

ตําแหนงของ Variable Value บางที เครื่องคุณจะไมเหมือน ของ มาสเตอร ใหยืดเครื่องของคุณนะครับ โดยการไปดูที ่และ copy path ไวครับ

Page 12: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

12

ลองตรวจสอบวา สิ่งที่เรากําหนดไดไหม ?

Page 13: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

13

ติดตั้ง Android Studio

1. Getting Started with Android Studio เริ่มตนจากการไป Download ตัวติดตั้ง Android Studio จาก เว็บ http://developer.android.com/sdk/installing/studio.html

Page 14: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

14

2. เมื่อโหลด ตัวติดตั้ง Android Studio มาไดแลว ก็ใหทําการติดตั้ง ซะ

Page 15: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

15

ไดมาละ สัง Start Android Studio เลยครับ

Page 16: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

16

HelloWorld Android Apps by Android Studio มั่นใจวาเครื่อง ตอเน็ตนะ เพราะการ New Project Android ครั้งแรกบน Android Studio ตัวโปรแกรมจะมีการ โหลด บางสิ่งบางอยาง จาก Internet มา ฉะนั้น ตัว Firewall, Antivirus ตางๆ ปดซะกอนครับ

1. เปด Android Studio ขึ้นมาครับ

2. New Project

Page 17: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

17

ชวง Download gradle จะม ีFirewall Windows ฟอง ให Allow ไปนะครับ

Page 18: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

18

ไดมาละ HelloWorld ของเรา

Page 19: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

19

เรียน OnClickListener จาก Workshop ABC_Text ในการเขียนโคด ให Get Event จากการคลิก ไมวาจะเปน ปุม, ภาพ หรือ Widget ใดๆ เรานิยม เขียนโคดแอนดรอยด แบบ OnClickListener ครับ เอาอยางนี้ เรามา เรียนรู การ Set OnClickListener จากการคลิก จาก Workshop ABC_Text กัน

User Interface ABC_Text

ABC_Text WorkShop 1. เปนแอฟ สองภาษา คือ อังกฤษ, และ ไทย 2. เรียนรูการ get Event จากการ คลิก Button a, b, c, d, และ e 3. เมื่อคลิก a, b, c, d หรือ e สงผมให TextView ที่โชว อยูที่ Activity เปลี่ยนไป

เปด Android Studio ออกมาเลยครับ

Page 20: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

20

New Project

กรอกขอมูลตามนี้ไปเลยครับ

• Application name : ABC_Text

• Module name: ABC_Text

• Package name ตองการความเปน unity เหมือนเดิม

• Minimum required SDK มาเตอร ใหรันไดไมต่ํากวา Android 2.1 หรือที่เราเรียกวา Eclair

• Compile ดวย แอนดรอยด 4.2 ครับ

Page 21: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

21

การจัดการดาน Icon

เลือกไอคอนที่ตองการ

Page 22: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

22

เราสามารถจัดการดานสี ของ ไอคอน ได

Activity

Android Studio จะ gen โคดใหแบบนี้

Page 23: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

23

เปด Project ออกมา

คลาส MainActivity.java

Page 24: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

24

สวนควบคุม Layout activity_main.xml

Create Emulator for Tester กอนที่เราจะเขาไป โคดแอนดรอยด มาสเตอร จะใหคุณสราง emulator สําหรับ ทดสอบโคด ที่เขียนได กอน

Page 25: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

25

Page 26: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

26

My emulator

ในการโคดแอนดรอยด มาสเตอร จะเปด android Studio และ Emulator เอาไวเลย ครับ

Page 27: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

27

SDK Manager ไหนๆ เราเขามาใน AVD เพื่อทํา Emulator ทีนี่เรามาลอง ติดตั้ง Platforms เพื่อ หรือ ความสามารถพิเศษ กัน ไปที่ SDK Manager เลยครับ

การติดตั้งก็แค ไปเลือกสิ่งที่ตองการ จากตัวอยาง มาสเตอร ตองการ Intel x86 เพื่อให emulator เร็วขึ้น ครับ

Page 28: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

28

Design UI กลับมาที่ WorkShop ABC_Text ของเรา

Text

TextSize

Page 29: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

29

จะไดผลแบบนี้ครับ และ มาสเตอร ลองลาก Widget เพื่อขยับ ยายตําแหนง

Page 30: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

30

การเพิ่ม Widget ไปท่ี Activity

จากตัวอยาง มาสเตอร ลาก TextView Widget ไป Drop ที่ Relative Layout

Page 31: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

31

จะไดผลแบบนี้ ปรับขนาด โดยการเพิ่ม h2

ได TextView ใหมมาละ ปรับตําแหนง ไปอยูตรงกลาง

Page 32: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

32

ตอไปมาสเตอร จะทํา Panal ของปุม โดยการสราง ใน Linear Layout

Page 33: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

33

ตอไป มาสเตอร จะเพิ่มปุม ไปที่ Layout ที่เราไดสรางขึ้น 5 ปุม

Page 34: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

34

กำหนด Text ใหกับ ปายปุม ทั้ง 5 เปน a, b, c, d, และ e โดยทําเปน Strings.xml

กำหนด Weight = 1 ใหกับทุกปุม ครับ

Page 35: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

35

การวางตําแหนงของ Widget

การเปลี่ยน Background

Page 36: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

36

ไปหาโคดสี 16 บิท มา สมมุติ มาสเตอร ตองการให Background ของแอพเปนสีเขียวแบบนี้

Page 37: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

37

กําหนดสีใหกับ TextView

กําหนดโคดสีขาว ใน colors.xml

Page 38: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

38

กำหนด TextView และ Button เปน สีขาว ใหหมด

ทดสอบโคด ดวย Emulator คลิกรันเลยครับ และ ไปดูที่ Emulator ที่เราสรางไว

Page 39: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

39

Android Studio จะ Build

สําเร็จสําสําหรับ การออกแบบ และ Create User Interface ละ

Page 40: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

40

กำหนด id ใหกับ Widget ท่ีเปน Object ทําไดโดยการ Select Widget ที่เราตองการ มองหา id ที่ Properties

และพิมพ Id ที่เราตองการไปเลย

และเปลี่ยน id ทุกตัวไปเปนแบบนี้

Page 41: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

41

การโคดดิ้งแอนดรอยด โคด

เริ่มจากการ Declaration หรือ การประกาศตัวแปรคลาส กอน เปดคลาสออกมา ในที่นี่ก็คือ MainActivity.java ตําแหนง ที่จะประกาศตัวแปรคลาส คือ อยูใน คลาส แต อยูนอก เมธอด

Page 42: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

42

Initial Widget การผูก ตัวแปรคลาส ที่เราประกาศ กับ Widget ที่อยูบน Activity เราจะเรียน กระบวนการนี้วา Initial Widget สวนมาก มาสเตอรจะ สราง เมธอด ออกไปกําหนดนอก เมธอด onCreate เพราะไมชอบยัด คําสัง เขาไปใน เมธอดหลัก เทาไร ครับ มาสเตอร สราง เมธอด initialWidget(); ขึ้นมาทํา หนาที่ Initial Widget ครับ

Page 43: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

43

SetOnClickListener แบบ คลาส Implement การ SetOnClickListener ใหกับ Widget ตางๆ ของแอนดรอยด เทาที่มาสเตอร เห็น มี 3 แบบ

• คลาส Implement

• Call Back

• Xml onClick

คลาส Implement นําตัวแปร มา SetOnClickListener แบบนี้

เมื่อเรา กําหนด this ใน parameter ระบบจะขอ Implement OnClickLIstener กับ คลาสหลัก และ ขอ Create onClick แบบนี้

Page 44: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

44

การ get Event จากการคลิก กําหนดโคดที่ เมธอด onClick

และ กำหนด SetOnClickListener ไปที่ ปุมทั้งหมด

Page 45: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

45

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

Page 46: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

46

การทำแอพ หลายภาษา คลิกที AddTranslation

เลือกที่ ธงชาติไทย

Page 47: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

47

เพิ่มคาภาษาไทย ไปที่ Thai(th)

ตัว android Studio จะ Create strings.xml ที่ โฟวเตอร values-th แบบนี้ครับ

Page 48: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

48

การปรับมุมมอง ระหวาง ภาษา อังกฤษ และ ไทย

การกําหนด ภาษา ใหกับ emulator ในการเปลี่ยนแปลง ภาษา ที่จะแสดงบน Apps Android จะดูจาก มือถือ หรือ emulator กำหนด Language & Input เปน ภาษา อะไร ? ถาเปน ภาษา อังกฤษ Apps ก็จะเลือกใช strings.xml จาก values ในทางตรงกันขาม ถา มือถือ หรือ emulator กำหนด Language & Input เปน ภาษาไทย ตัว Apps ก็จะใช strings.xml จาก values-th นั้นเองครับ ฉะนั้น เรามาเรียนรู การกําหนด ภาษา ใหกับ emulator กัน คลิก เมน ูและ เลือก System settings

Page 49: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

49

Page 50: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

50

ทีนี่ พอเราเปด ABC_Text ตัว Apps ของเราก็จะแสดงผลภาษาไทย แบบนี้ แลวครับ

Page 51: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

51

การทําแอพท่ีมีหลายๆ Activity จากหัวขอเลยครับ เดี๋ยวเราจะมาเรียนรู การทําแอพแอนดรอยด ที่มีหลายๆ Activity ครับ โดยเราจะทําแอพชื่อ ManyActivity โดยม ีActivity แรกแสดงผลเปน ListView ในแตละคลิกที่ List จะพาไปที ่

1. Go To Website เมื่อทําการคลิก ใหไปเปด เว็บไซด 2. EditText Activity เรียนรู การใชงาน EditText Widget และ เขียนโคดการ Get Value 3. Spinner Activity เรียนรู การใชงาน Spinner Widget และ เขียนโคดการ Get Value 4. SeekBar Activity เรียนรู การใชงาน SeekBar Widget และ เขียนโคดการ Get Value 5. RadioButton Activity เรียนรู การใชงาน RadioButton Widget และ เขียนโคดการ Get Value

เปด Android Studio เพื่อทํา WorkShop ManyActivity New Project ขึ้นมาใหม เลยครับ

Page 52: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

52

ไดมาละ แอพ ManyActivity

ที่ activity_main.xml ใหลบ Relative Layout ออกและ สราง Linear Layout แทน

สราง Android resource directory ที่ชื่อวา drawable เพื่อเก็บภาพ

Page 53: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

53

นํารูปที่ตองการใชไปเก็บไวที่ drawable และ ออกแบบ User Ingerface ใหไดแบบนี้

หัวใจการทํา ListView ก็คือการที่เราตองรูวา ตําแหนงของ TextView Widget ตวไหนใหแสดงแบบ ListView โดยการกำหนด id ใหกับ Widget

Page 54: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

54

การสราง ListItem ดวย String Array ในการสราง และ จัดการ จํานวนหัวขอของ ListVew มาสเตอร ชอบ เทคนิก สราง item ไวใน String Array แบบนี้ครับ

Create Values Resource File ท่ีชื่อวา my_list.xml

Code ภายใน my_list.xml

Page 55: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

55

การโคดดิ้งแอนดรอยด แบบ ListView เปด MainActivity.java หรือ คลาสของเราออกมาเลยครับ

ประกาศตัวแปร แบบ array ที่ชื่อวา strListView มีชนิดขอมูลแบบ String

ใหคลาส Extends ListActivity และ อยาลืม Comment ที่ SetContentView ดวยครับ

GetResource จาก String-Array ไปที่ตัวแปร ที่เราประกาศ

Page 56: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

56

สราง ArrayAdapter สําหรับนํา คาที่อยูในตัวแปร ที่เราประกาศ ไปที่ตําแหนง ที่เราตองการใหปรากฏ บน ListView

ลองทดสอบโคด ที่ Emulator นาจะไดแบบนี้

การทำ OnListItemClick ให้กับ ListView

Page 57: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

57

ในการกําหนด ให การคลิกที่ List ตางๆ เกิดการ Active เขาเรียกการทํา OnListItemClick

ใหทําการ Override Method ทำการมองหา OnListItemClick

จะไดเมธอด แบบนี้

มาสเตอร ใช Switch Case get คา position จากการคลิก แบบนี้

Page 58: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

58

Intent Class เขาใชกันอยางไร? Intent Class เปนคลาส ที่ แอนดรอยด เตรียมไวให Dev. ทําการสืบทอดไปใช ทําหนาที่

• เครื่อนยายการทํางาน ระหวาง Activity กับ Activity

• หรือ Activity กับ Server ของแอพตัวอื่น (อยางตัวอยางจะใหไปเปดเว็บโซด ที่เปน บริการของ Browser ครับ)

การใช Intent ใหไปเปดเว็บโซด เม่ือ เกิดการคลิก เนี่องดวยเรามีการกําหนด Switch Case ไว 5 เหตตุการณ มาสเตอร จะประการตัวแปรคลาส มีการเขาถึง Private คือ ให เมธอดทุกอันที่อยูในคลาส สามารถใช ตัวแปรนี้ไดแบบนี้

สรางการสืบทอด หรือ Herniate จาก คลาส Intent ในการนํามาใชงาน มาสเตอร ไมสามารถนํามาใชตรงๆ ได ตอง สืบทอด เขามาเปน Object แบบนี้

Page 59: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

59

ลองทดสอบโคดแอนดรอยด ที่เขียนได บน Emulator ลองคลิกที่ my Website ที่เปน List ที่มีคา Position เทากับ 0 มือถือจะทําการ Intent ไปเปด WebView ตาม UrlData ที่ไดทําการ ระบุที่ไปไว

การสราง Activity จาก Android Component ในการทําแอพใหสมบูรณ ตอง มีหลาย Activity แลว เราจะทําอยางไร ? ให สามารถสราง Activity ได มาสเตอร ชอบ การสรางจาก Android Component แบบนี้

Page 60: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

60

การสราง Layout Resource File การที่จะเปน Activity จะมีแคคลาสอยางเดียวไมได ตองมี xml ที่ควบคุม Layout ดวย อยางนั้นเรามาลองสรางกัน ออกแบบ UI ใหไดแบบนี้

กําหนด เมธอดที่จะทํา ถามีการ คลิกปุม

Page 61: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

61

การกำหนด คลาส Activity กับ Layout เราจะใชคําสั่ง SetContentView ในการ ผูกความสัมพันธ ระหวางคลาส ที่เราสราง และ Layout ที่เราออกแบบ ไปที่ คลาส EditTextActivity.java ที่เราสรางขึ้น เพิ่มคําสั่งนี้ไปที่เมธอด onCreate

สราง Intent ไปที่ EditTextActivity.java คลาส กลับมาที่ MainActivity.java จำ Switch Case ในเงื่อนไขที่ position = 1 เขียน Intent ไป EditTextActivity.java แบบนี้ครับ

ลองทดสอบโคดที่ได ดวย Emulator โดย ลองคลิกที่ Edit Text ดูซิวา ไปทีอีก Activity หนึ่งไดหรือเปลา ?

Page 62: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

62

การ SetOnClickListener จากการกำหนด onClick ของ xml จำตอนเรากำหนด onClick ที่ไฟร xml ที่ควบคุม Layout ไดไหม ? เราจะสราง เมธอด myEditText แบบนี้

เมื่อมีการคลิกที่ ปุม Edit Text เมธอด myEditText จะเริ่มทํางาน

Page 63: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

63

Declaration & Initial Widget ซะใหเรียบรอย

Declaration

Initial Widget

กําหนดให Get Value จาก Edit Text

Page 64: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

64

การทำ Alert Dialog เดี๋ยวเราจะใหแสดง ผลของคา strTittle, strMessage บน Alert Dialog กัน สราง คลาส ShowMyDialog เปลาๆ เลยครับ

และตามดวยการสรางเมธอด MyDialog โดยม ีparameter แบบนี้

Declaration และ สืบทอด Object ซะ

กำหนด Object objAlertDialog ในเมธอด

Page 65: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

65

กลับมาที่ EditTextActivity.java ใหประกาศ Object เพื่อสืบทอดมาใชงาน

และสงคา strTittle, strMessage แบบนี้

Page 66: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

66

ลองทดสอบโคด ท่ีแสดง AlertDialog มาสเตอร ลองทดสอบโดยการ พิมพ Android Thai และ ลองคลิก Edit Text ถาทุกอยางถูกตอง นาจะไดผลแบบนี้

Spinner Widget ในการอํานวยความสะดวกให user ในการกรอก ขอมูลใหเรา บางครั้ง เราจะไมใช Edit Text ทั้งหมด เราจะมีการให Drop Dow ให user เลือก เรามาทํางานกัน สราง Activity, Layout สําหรับ Spinner ไดเลยครับ (มาสเตอร จะไมเขารายละเอียด นะ เพราะสามารถดูได จากตอนทํา Edit Text)

Page 67: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

67

กําหนด เมธอด ตอนคลิกท่ี onClick

พรอมทั้ง SetContentView ในคลาสใหม ที่ Create ขึ่นมาดวย

กำหนดการ Intent ไปที่ SpinnerActivity.java

จําไดที่ MainActivity.java จะม ีตอนเราทํา Switch Case Stament ไว ที่ตรง position = 2 ให Intent ไปที่ SpinnerActivity.java แบบนี้ และ ทดสอบโคดวา Intent ไป SpinnerActivity.java ไดไหม ?

Page 68: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

68

การ Set Up Spinner เริ่มตนจากการเราตองมี หัวขอที่เราจะให ปรากฏใน Spinner จำ my_list.xml ที่เราเก็บ String Array ของ List View ไดใชไหม ? เราจะเพิ่ม String Array เพิ่มสําหรับ หัวขอ List Spinner แบบนี้ โดย เพิ่มโคดทางดานขวาเขาไป

Declaration และ Initial Widget ใหกับ Spinner

Page 69: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

69

ประกาศตัวแปร Array

GetResource ใหกับ ตัวแปร Array พรอมสราง Adapter

ลองทดสอบโคด Spinner

Page 70: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

70

SetOnItemSelectedListener ใหกับ Spinner การทําให สิ่งที่เราเลือกบน Spinner มีผล คือการทํา SetOnItemSelectedListener เริ่มจากการประกาศตัวแปรกอน

และเอา Spinner มา SetOnItemSelectedListener แบบนี้

ทําการสงคา ที่ user เลือกบน Spinner ไป แสดงบน Alert Dialog

Page 71: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

71

Test Codding form Spinner

เรียนรูการทํา SeekBar Create Activity มาเลยครับ

ออกแบบ User Interface และ SetContentView ไปที่ คลาส แบบนี้

Page 72: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

72

กำหนด Intent ไปที่ SeekBarActivity.java ใน position = 3 ที่ MainActivity.java แบบนี้

ทดสองการทำงานของ Intent วาไปที่ SeekBarAtivity.java แบบนี้ไดใหม ?

Page 73: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

73

ประกาศตัวแปร และ Initial Widget ของ SeekBar

Page 74: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

74

ทดสอบ SeekBar

การสงคา SeekBar ไปแสดงบน Alert Dialog เหมือนเดิมประการตัวแปร และ สบืทอด

Page 75: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

75

การสงคา SeekBar ท่ีเลือกไปท่ี Alert Dialog

ทดสอบโคด SeekBar ครับ

Page 76: Tutorial Android Studio

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

อบรมเขียน Coding Android Application กับ มาสเตอร อึ่ง http://androidthai.in.th

76

การบาน android Thai ลองทําดู เฉลยอยูใน เว็บของ มาสเตอร

1. สราง Activity ของ Radio Button ใหมีขอเลือกไดสัก สาม หรือ สี่ ก็ได 2. รูนะวา การม ีคลาสอยางเดียว ทํา Activity ไมได ตองมี Layout ที่เปน ไฟร xml 3. ทำ Intent ขามการทํางาน ระหวาง Activity กับ Activity ที่ MainActivity.java ดวย 4. Get คาที่ User เลือก Radio Button 5. สงคาที่เลือกได ไปแสดงที่ Alert Dialog

ขอใหโชคดีครับ มาสเตอร อึ่ง http://androidthai.in.th