สารบัญ - hub coder · เปิดโปรแกรม android studio...

สารบญ

เตรยมพรอมกอนเรมเขยนโปรแกรม Android คออะไร? การตดตง Android Studio การสราง Project ใน Android Studio การสราง Emulator และการรน การสรางหนาจอบน Android Application Android Manifest กบ Activity

การสรางหนาจอบน Android Application User Interface เบองตน View Group

o Linear Layout o Relative Layout o Scroll View

View o TextView o EditText o Button o CheckBox o RadioButton o RadioGroup o ImageView

Activity การเชอม Object ระหวาง Layout กบ Activity StartActivity และ Finish Activity Life Cycle

Workshop I - การสราง Form

Workshop II - Multiple Orientation Layout

ListView Concept และการใชงานเบองตน Adapter คออะไร? Custom Adapter for ListView

การสงขอมลระหวาง Acitivity การสงขอมลระหวาง Acitivity การสราง Object เพอสงขอมลระหวาง Activity การสงขอมลกลบไปยง Activity ทเรยกใชงาน

Workshop III - ListView Tutorial

Intent for BuiltIn Application

SQLite กบ Android

Workshop IV - การท างานกบ SQLite

AlertDialog

Toast Message

Web Service (RESTful) Connection

Workshop V - การเชอมตอ Web Service

Support Multiple Screens

Application Name and Icon

Application Resource

ค าน า

หนงสอเลมนจะปพนฐานส าหรบคนทไมมพนฐานการเขยนโปรแกรมแอนดรอยดมากอน ซงจะแนะน าถงการใชงาน View หรอ Object ตาง ๆ เพอใหผอานไดเรยนรและท าความเขาใจกบมนกอนเรมเขยนโปรแกรม และเราจะเนนไปท Object ทมกจะถกใชงานบอย อยางเชน TextView, EditText, Button และโดยเฉพาะ ListView เพราะการเขยนโปรแกรมบน Mobile Application นน Object ทใชส าหรบแสดงขอมลจ านวน มากกคอ ListView ตวอยางเชน Facebook Feed, Twitter Feed ตาง ๆ ลวนแตใช ListView ทงหมด นอกจากนเรายงสอนถงการสราง Custom Adapter ซงเปรยบเสมอน Data Provider ทจะเปนตวก าหนด วาขอมลทจะแสดงบน ListView มอะไรบาง และลกษณะการแสดงผลขอมลเปนลกษณะไหน

หลงจากทเรยนรการใชงาน Object หรอ View เรยบรอยแลว เราจะมาเรยนรวธการจดเกบขอมลเขาสฐานขอมลภายใน Application โดยใช SQLite รวมถง Workshop การใชงานจรงของ SQLite ดวย เพราะการท างานกบ Mobile Application สวนหนงทขาดไมไดคอฐานขอมลภายใน Application ไมวาจะเปนการเกบ Data Cache หรออะไรกตาม ดงนนเราควรจะศกษาการใชงาน SQLite อยางละเอยด

ปดทายดวยการสอนการเชอมตอ Web Service (RESTful) เพอใหผอานไดทราบวาหลกการของการ เชอมตอ Web Service เปนอยางไร เมอไดขอมลกลบมาแลวท าอยางไร

ภายในหนงสอเลมนจะม Workshop เลก ๆ จ านวน 5 Workshop ซงแตละ Workshop นนลวนเปนการเขยนโปรแกรมโดยใช Case Study โปรแกรม Contact List ทงหมด โดยในแตละ workshop จะมความแตกตางเรองของการเกบขอมล เชน การเกบขอมลเขาส ArrayList, การเกบขอมลโดยใช SQLite และการเกบขอมลผาน Web Service

หลงจากเรยนรจากหนงสอเลมนแลว ผอานสามารถน าความรตาง ๆ เหลานไปเขยน Application เบองตนไดแลว ไมวาจะเปนการเชอมตอ Web Service ของ Social Network ตาง ๆ เพราะใชหลกการเดยวกนกบ Workshop ทจะไดเรยนร แตอยางไรกตาม ผอานยงคงตองศกษาเทคนคตาง ๆ เพมเตม เพราะในหนงสอเลมนจะเนนเฉพาะ Fundamental เทานน

หากเนอหาสวนใดในหนงสอเลมนเกดขอผดพลาดขน รบกวนแจงกลบมาท [email protected] และขออภยมา ณ ทนดวยครบ

Android คออะไร? ......................................................................................................................................................................

Android คออะไร?

Android เปนระบบปฏบตการทถกออกแบบมาส าหรบอปกรณพกพา ( Smart Phone, Tablet) โดยมพนฐานอยบน Linux ถกพฒนาโดยบรษท Android ซงตอมาไดถก Google ซอในป 2548 และน า Android ไปพฒนาตอท าใหในปจจบน Android ไดถกน าไปใชกบอปกรณไดหลากหลายชนดเพมมากขน เชน Smart TV, Android Wear (นาฬกาขอมอ), Digital Camera (กลองดจตอล)

Google ไดท าการเปดตว Android ในป พ.ศ.2550 พรอมทงกอตงกลม Open Handset Alliance ซงเปนกลมของบรษทผลตฮารดแวร ซอฟตแวร และการสอสาร ทรวมมอการสรางมาตรฐานเปดส าหรบอปกรณพกพา โดย Smart Phone เครองแรกของโลกทท างานอยบนระบบปฏบตการ Android คอ HTC Dream วางจ าหนายเมอป พ.ศ.2551

Android เปนระบบปฏบตการ Open Source (ระบบเปด) โดย Google ไดเผยแพรภายใตลขสทธ Apache ซงหมายความวา Google ไดอนญาตใหผผลต Hardware สามารถปรบแตงและวางจ าหนายได และดวยสาเหตทเปนระบบเปด ท าให Smart Phone และ Tablet มราคาถก จงท าให Android ไดรบความนยมเปนอยางสง

ผพฒนาสามารถพฒนา Application บน Android โดยใชภาษา Java หากคนทเคยเขยนโปรแกรมภาษา Java มากอนแลว ท าใหสามารถเรมตนพฒนา Application บน Android ไดอยางงายดายยงขน

การตดตง Android Studio ......................................................................................................................................................................

การตดตง Android Studio

การตดตง Android Studio (IDE ส าหรบพฒนา Application บน Android) จะตองตรวจสอบกอนวาในเครองพฒนานนไดมการตดตง JDK ไวแลวหรอยง โดยหากตดตงไวแลว กสามารถขามขนตอนไปยงการตดตง Android Studio ไดเลย

1. การตดตง JDK (Java Development Kit)

ใหเรม Download ตวตดตง JDK ไดท http://www.oracle.com/technetwork/java/javase/downloads/index.html

กดปม Java Platform (JDK)


ใหอาน License Agreement ใหเรยบรอย แลวเลอกท "Accept License Agreement" จากนนใหกดเอกดาวนโหลดตวตดตง JDK ทตรงกบ Environment ของเครองพฒนา

เมอดาวนโหลด JDK Installation เรยบรอยแลว ให Double Click ทไฟลตดตง เพอเรมท าการตดตง โดยจะปรากฏหนาจอดงภาพ


กดปม Next เพอเลอก Option ในการตดตง JDK

ใหใชคา Default ของการตดตงทก าหนดมา ไมตองเลอกหรอเอา Option อะไรออก จากนนใหกดปม Next เพอเตรยมการตดตง


เมอเตรยมการตดตงเสรจเรยบรอยแลว จะปรากฏหนาจอใหเลอก Folder ทตองการตดตง JDK

จากนนใหกดปม Next เพอเขาสข นตอนการตดตง JDK ทนท


เมอการตดตง JDK เรยบรอยแลว กจะปรากฏหนาจอแจงเตอนการตดตง ดงภาพ


2. การตดตง Android Studio

การตดตงโปรแกรม Android Studio นนใหเรม Download ตวตดตงจาก http://developer.android.com/sdk/index.html

จากนนใหกดปม Download Android Studio (กรณทใช Windows มนจะแสดงปมใหดาวนโหลดตวตดตงส าหรบ Windows แตกรณทใช OSX หรอ MAC มนกจะแสดงปมใหดาวนโหลดตวตดตงส าหรบ OSX)


อาน Terms and Conditions ใหเรยบรอย และเลอก "I have read and agree with the above terms and conditions" จากนนใหกดทปม "Download Android Studio" เพมเรม ดาวนโหลดตวตดตงโปรแกรม Android Studio

เมอดาวนโหลดตวตดตงเรยบรอยแลว ให Double Click ทตวตดตงเพมเรมท าการตดตงโปรแกรม


กดปม Next เพอเขาสหนาจอส าหรบเลอก Component ทตองการตดตง

ใหเลอกตามคา Default (เลอกทงหมด) จากนนกดปม Next เพอยนยน License Agreement อกครงหนง


เมออานเรยบรอยแลว ใหกดปม "I Agree" เพอเขาสหนาจอส าหรบเลอก Folder ทตองการตดตง Android Studio และ SDK

เมอเลอก Folder ส าหรบตดตงเรยบรอยแลว ใหกดปม Next


จากนนกดปม Install เพอเรมการตดตง

จากนนกดทปม Next เพอสนสดการตดตง


ขนตอนสดทาย ตวตดตงจะถามวาตองการเปดโปรแกรม Android Studio เลยหรอไม ถาตองการเปดโปรแกรม ใหเลอกท "Start Android Studio" จากนนกดปม "Finish"

สราง Project ใน Android Studio ......................................................................................................................................................................

สราง Project ใน Android Studio

เปดโปรแกรม Android Studio ขนมา จะพบกบเมนตาง ๆ ดงภาพ

เลอกเมน "Start a new Android Studio project" เพอเรมตนสรางโปรเจค โดยจะปรากฏหนาจอดงภาพ

ใหกรอกขอมลเกยวกบ Project ทตองการสรางดงน


Application Name: ใหระบชอ Project ทตองการ

Company Domain: ใหระบชอเวบไซตหนวยงาน /บรษท ซง Domain ทระบในสวนนจะถกน าไปตงเปนชอของ Package ทจะใชเกบไฟล Java ทจะเขยนใน Project

Project Location: ต าแหนงหรอโฟลเดอรทใชสราง Project

เมอกรอกขอมลเรยบรอยแลว ใหกดปม Next

ใหเลอกวา Application ทจะพฒนาขนนนจะสนบสนนกบอปกรณประเภทใดบาง และใช API Version ใดในการพฒนา ซงจากภาพดานบนจะเหนวามการก าหนดให Application นรองรบการท างานบน Phone และ Tablet เทานน โดยใช API เวอรชน 15 ในการพฒนา นนหมายความวา Phone และ Tablet ทม API เวอรชนต ากวา 15 (ต ากวา Android 4.0.3) จะไมสามารถใชงาน Application นได

เมอเลอกเรยบรอยแลว ใหกดปม Next เพอเขาสหนาจอส าหรบเลอก Application Template


จากภาพจะเหนวา Android Studio ไดจดเตรยม Application Template จ านวนมากใหเราไดเลอกใช ซงในเนอหานใหเลอก Blank Activity จากนนกดปม Next


ในชองกรอกขอมลจากภาพดานบนน ใหเราใชคา Default ไวกอน โดยจะอธบายความหมายของแตละคาภายหลง จากนนใหกดปม Finish แลวรอใหโปรแกรม Android Studio ประมวลผลสกครเพอสราง Project ตามคาทเราระบไว

ทางซายมอของโปรแกรม Android Studio จะเปนโครงสรางไฟลของ Project ทเราสรางขนมา โดยประกอบไปดวยสวนตาง ๆ ซงเราจะคอย ๆ ท าความเขาใจไปทละสวนในเนอหาตอ ๆ ไป

การสราง Emulator และการ Run ......................................................................................................................................................................

การสราง Emulator และการ Run

การพฒนา Application บน Android นนตองค านงถงขนาดหนาจอทหลากหลายรวมถงทรพยากรเครองทแตกตางกนดวย ซง Android Studio กไดเตรยมเครองมอส าหรบการจดการ Emulator ใหนกพฒนาสามารถสรางเครองจ าลองเพอทดสอบ Application ทพฒนาไดอยางหลากหลายหนาจอและทรพยากร

ในหวขอนเราจะมาท าความรจกกบวธการสราง Emulator และการก าหนดทรพยากรตาง ๆ เพอใชในการทดสอบ Application (โดยใหใชงาน Project เดมจากเนอหาทแลว)

การสราง Emulator นนเราสามารถก าหนดไดวาตองการให Emulator นน ๆ เปน Android เวอรชนไหน (SDK Version) ดงนนกอนทเราจะสามารถสราง Emulator เวอรชนทเราตองการไดนน เราจะตองตรวจสอบกอนวาไดท าการตดตง SDK Platform เวอรชนนน ๆ แลวหรอยง

1. ตดตง SDK Platform

การตดตง SDK Platform นน จะตองเปด Project ขนมากอน (ใหใชงาน Project เดมทสรางไวในเนอหาทแลว)


คลกทปมเครองมอ SDK Manager (ท Focus กรอบสแดงดงรปขางตน) จะปรากฏหนาจอ SDK Manager ดงภาพ

จะเหนไดวามนม Version ตาง ๆ ของ Android เพอใหเราเลอกวาจะตดตง SDK Platform ของ Android Version อะไรบาง ซงเมอเราไดตดตง SDK Platform ของ Android Version ใด ๆ แลว กจะท าใหเราสามารถสราง Emulator เปน Android Version นน ๆ ได

ซงตอนทเราสราง Project นน เราไดระบวาจะพฒนา Application เพอใหงานในอปกรณ Phone และ Tablet และจะใช API เวอรชน 15 ในการพฒนา ดงนนในตวอยางน จะท าการตดตง SDK Platform ของ Android 4.0.3 (API 15) กอนเทานน เพอทจะสามารถสราง Emulator ทสามารถ run Project ทเราสรางขนได

หลงจากทเลอกไดแลววาจะตดตง SDK Platform ของ Android Version อะไรบาง ใหคลกปม Install Package


เลอกท Accept License แลวคลกทปม Install เพอเรมการตดตง โดยจะม progress bar แสดงสถานะการตดตงใหเหนดงภาพ

เมอตดตงเสรจแลว ใหปดหนาตาง SDK Manager


2. สราง Android Virtual Device (Emulator)

หลงจากตดตง SDK Platform เรยบรอยแลว ใหกลบมาทหนาจอ Android Studio อกครง

คลกทปมเครองมอ AVD Manager (ท Focus กรอบสแดง) โดยจะปรากฏหนาจอดงรป

คลกทปม "Create a virtual device" เพอเรมตนสราง Emulator


จากภาพจะเหนไดวา เราสามารถก าหนดไดวา ตองการสราง Emulator เปนอปกรณประเภทใด รวมถงการก าหนดรายละเอยดใหกบอปกรณไดดวยวาตองการใหม Size, Resolution และ Density เปนเทาไร

เมอเลอกเรยบรอยแลวใหคลกปม Next จะมายงหนาจอส าหรบก าหนด SDK Platform ใหกบ Emulator


ในสวนน ใหเลอก SDK Platform ทรองรบกบ Project ทเราไดสรางไว ซงตอนทเราสราง Project นน ไดระบไววาจะพฒนา Application ภายใต API เวอรชน 15 ดงนนในการสราง Emulator ตวนใหเลอกท IceCreamSandwich ทเปน API 15 และ Target Android 4.0.3 ดงภาพดานบน จากนนใหกดปม Next เพอก าหนดชอใหกบ AVD (Emulator)

ใหกรอกชอ AVD (Emulator) ทชอง AVD Name โดยชอควรจะตองมเอกลกษณใหเราสามารถเขาใจไดวา Emulator ตวนม Spec อยางไร

จากนนใหกดปม Finish เปนอนเสรจสนการสราง Emulator โดยมนจะแสดงรายการ Emulator ทงหมดทเราไดสรางไว ดงภาพ


หากตองการสราง Emulator เพมใหคลกปม "Create Virtual Device..." และท าตามขนตอนเดมทไดอธบายไวขางตน

3. Run Application ผาน Emulator

หลงจากทไดสราง Android Virtual Device (Emulator) เรยบรอยแลว ใหกลบมายงหนาจอ Android Studio


ใหคลกทปม Run (ท Focus กรอบสแดงดงรปดานบน) โดยมนจะแสดง Dialog ขนมาใหเราไดเลอกวาตองการ Run Application ผานอปกรณอะไร (ในกรณทเรา Plug อปกรณของเราเขากบเครองพฒนา มนกจะแสดงรายชออปกรณนน ๆ ของเรา เพอใหเราสามารถ Run Application ผานอปกรณของเราไดโดยตรง)

ซงเราจะตองเลอกวาตองการ run บน Android Virtual Device ( Emulator ) ใด ซงในสวนของ Choose a running device จะเปนการ run Emulator ทเราไดเปดไวแลว แตในสวนของ Launch emulator จะเปนการเปด Emulator ขนมาใหม

ส าหรบตวอยางน เราจะท าการเปด Emulator ขนมาใหม โดยใหเลอกท Launch emulator แลวเลอก Android Virtual Device ทเราไดสรางเอาไวแลว กคอ Android Virtual Device ทชอวา Nexus 4 API 15 จากนนใหกดปม Next เพอให Android Studio สงเปด Emulator ทเราเลอก (จะใชเวลาสกคร) จากนนจะปรากฏหนาจอดงรป


ซง Emulator กจะแสดงผลหนาจอทเราไดสรางไว

การสรางหนาจอบน Android Application ......................................................................................................................................................................

การสรางหนาจอบน Android Application

หลงจากทเราไดสราง Project ขนมาแลว จะเหนไดวาใน Project ทสรางขนจะประกอบดวยไฟลตาง ๆ มากมาย ซง Android ไดออกแบบและวางโครงสรางไฟลไวอยางชดเจน ซงในแตละสวน ๆ ของโครงสรางไฟลนน จะใชส าหรบเกบ code ทใชท างานทแตกตางกน ส าหรบในบทความนเราจะมาท าความเขาใจวา การสรางหนาจอขนมา จะตองเขาไปยงในสวนใดของโครงสรางไฟลบาง

ส าหรบการสรางหนาจอนน ในเบองตนกจะมอย 2 สวนทเกยวของ สวนแรกกคอ Activity Class ซงจะเขยนเพอควบคมการมปฏสมพนธระหวางผใชกบ User Interface โดยจะถกเขยนดวยภาษา Java สวนทสองกคอ Layout file ซงจะเขยนเพอใชออกแบบ User Interface โดยจะถกเขยนดวยโครงสรางภาษา XML

1. Activity Class กบ Layout File ถกเกบไวทไหนภายใน Project

กอนอนใหเราเปด Project ทเราสรางไว ขนมา กจะปรากฏหนาจอ ดงรป

Activity Class จะถกเกบไวท app > java > com.hubcoder.androidtutorial ซง com.hubcoder.androidtutorial กคอชอของ Package ทเราไดก าหนดไวตงแตตอนสราง Project โดยไฟลทชอวา MainActivity ทอยภายใน app > java > com.hubcoder.androidtutorial กคอชอของ Activity Class


ทเราสรางขน (ซงไฟลทช อวา MainActivity ในตวอยางน มนไดถกสรางขนโดยอตโนมต ตอนทเราสราง Prjoect)

Layout file จะถกเกบไวท app > res > layout โดยไฟลทช อวา activity_main.xml ทอยภายใน app > res > layout กคอชอของ Layout file ทเราสรางขน (ซงไฟลทช อวา activity_main.xml ในตวอยางน มนไดถกสรางขนโดยอตโนมต ตอนทเราสราง Prjoect)

2. Activity Class และ Layout File เขยน Code อยางไร

ในบทความน จะแสดงใหเหนเพยงตวอยางงาย ๆ ของ code ใน Activity Class และ Layout file เทานน และนกจะเปนตวอยางงาย ๆ ของ code ใน Activity Class

จะเหนไดวา Activity Class น จะถกเขยนโดยใชโครงสรางภาษา Java ซงสวนมากแลว Activity Class ทสรางขน จะตอง สบทอดคลาส จาก Class ทชอวา Activity เสมอ และชอ Class ทตงขนกตองเปนชอเดยวกบชอไฟล ซงกคอ MainActivity

และนกจะเปนตวอยางงาย ๆ ของ code ใน Layout file


จะเหนไดวา Layout file น จะถกเขยนโดยใชโครงสรางภาษา XML ซงจะม Root Element เพยงตวเดยวเทานน และสวนมากแลวในทก ๆ Element จะตองม Attribute android:layout_width และ android:layout_height เสมอ

3. Activity Class และ Layout File สมพนธกนอยางไร

จากทเคยอธบายไปกอนหนานวา Layout file จะเขยนเพอใชออกแบบ User Interface สวน Activity Class จะเขยนเพอควบคมการมปฏสมพนธระหวางผใชกบ User Interface ดงนนจะตองมการระบไวเสมอวา Activity Class ไดเชอมโยงกบ Layout file ใด

ทนกใหกลบมาดท Activity Class วาไดเขยนค าสงอะไรไว เพอระบวา Activity Class นนไดเชอมโยงกบ Layout file ใด


ส าหรบการระบวา Activity Class นนไดเชอมโยงกบ Layout file ใด จะใชค าสง this.setContentView ( );

และจากตวอยาง จะเหนไดวาไดสงตวแปรทชอวา R.layout.activity_main ไวในค าสง this.setContentView ( ); ซงตวแปร R.layout.activity_main มนไดอางไปถงไฟล app > res > layout > activity_main.xml

สรปไดวา จากค าสง this.setContentView ( R.layout.activity_main ); เปนการระบวา Activity Class ไดเชอมโยงกบ Layout file ทชอวา activity_main.xml ทอยภายใน app > res > layout

(ทกครงทมการสรางไฟลไวใน app > res > layout นน Android จะท าการสรางตวแปรใหโดยอตโนมต เพอใหเราใชตวแปรนนในการอางถงไฟลทเราสรางขน ตวอยางเชน ถาเราสรางไฟลทช อวา activity_main.xml ไวภายใน app > res > layout แลว Android จะท าการสรางตวแปรทชอวา R.layout.activity_main ใหโดยอตโนมต เพอใหเราใชตวแปร R.layout.activity_main นในการอางถงไฟลทไดสรางขนมา)

Android Manifest กบ Activity ......................................................................................................................................................................

Android Manifest กบ Activity

จากเนอหาทแลว ไดอธบายไปแลววา Activity Class จะเขยนเพอควบคมการมปฏสมพนธระหวางผใชกบ User Interface สวน Layout file จะเขยนเพอใชออกแบบ User Interface นนหมายความวาแตละ Activity Class ทเขยนขนมา กคอแตละหนาจอของ Application

และโดยสวนมากแลว Application หนง ๆ จะประกอบดวยหลาย ๆ หนาจอ ดงนน ในบทความนเราจะมาดวา ตองก าหนดอยางไรเพอบอกวาตองการใหหนาจอใดเปนหนาจอแรกทแสดงขนมาเมอ Application ถกเปดขนครงแรก และนอกจากน ทกครงทเราไดสราง Activity Class ขนมาใหม เราจะตองลงทะเบยน Activity Class นนไวใน AndroidManifest File เสมอดวย ทงนเพอให Application รจก Activity Class ทเราสรางขนมา

1. การลงทะเบยน Activity ไวใน AndroidManifest File

กอนอนใหเราเปด Project ทเราสรางไว ขนมา กจะปรากฏหนาจอ ดงรป

จากนนใหเปดไฟล AndroidManifest.xml ขนมา กจะปรากฏหนาจอ ดงรป (ไฟล AndroidManifest.xml จะถกเกบไวท app > manifests )


จะเหนไดวา ณ ตอนน Project ของเราม Activity Class เพยงอนเดยวเทานน ซงกคอ MainActivity ดงนน จงมการลงทะเบยน Activity Class ไวท AndroidManifest.xml เพยง Activity Class เดยว

จากนนใหลองสราง Activity Class ขนมาอกอนหนง ใหชอวา SecondActivity โดยคลกขวาท Package ทเราตงชอไว ซงกคอ com.hubcoder.androidtutorial จากนนเลอก New แลวเลอก Activity แลวเลอก BlankActivity ตามล าดบ ดงรป


คลกขวาท Package ทเราตงชอไว ซงกคอ com.hubcoder.androidtutorial จากนนเลอก New แลวเลอก Activity แลวเลอก BlankActivity ตามล าดบ โดยจะปรากฏหนาจอใหตงคาเดยวกบ Activity ใหมดงรป


ในชองกรอกขอมล Activity Name ใหกรอกชอ Activity Class ใหมทตองการสราง นนคอ SecondActivity โดยเมอเปลยนชอ Activity Name จะท าให Layout Name ถกเปลยนตาม แตเราสามารถก าหนดชอ Layout Name โดยตรงได

จากนนใหกดปม Finish เพอสงให Android Studio ท าการสราง Activity ใหมตามคาทเราก าหนด

ทนจะเหนไดวา ณ ตอนน Project ของเราม Activity Class สองอน กคอ MainActivity และ SecondActivity ดงนน จงมการลงทะเบยน Activity Class ไวท AndroidManifest.xml จ านวนสองอนเชนกน

ซงทก ๆ ครงทเราสราง Activity Class ขนมา Android Studio มนจะท าการลงทะเบยน Activity Class ทเราสรางนน ไวใน AndroidManifest.xml ใหโดยอตโนมตอยแลว แตทไดอธบายไวน เพราะเราสามารถปรบแตงคาบางอยางใน AndroidManifest.xml ได ซงมผลตอ Application ทพฒนา ซงจะอธบายในบทความถด ๆ ไปในภายหลง

ส าหรบ syntax ของการลงทะเบยน Activity Class ไวใน AndroidManifest.xml มดงน


โดย attribute android:name ใหระบวาตองการลงทะเบยน Activity Class ใด และ attribute android:label ใหระบ label ใหกบ Activity Class ทลงทะเบยนนน และ element <activity> จะตองอยภายใน element <application> เสมอดวย

2. การก าหนดวา Activity Class ใด จะท างานเปนครงแรกเมอ Application ถกเปดขนมา

Activity Class เปรยบเสมอนตวแทนหนาจอหนาจอหนง ดงนนพดงาย ๆ กคอการก าหนดวาตองการใหหนาจอใดแสดงเปนหนาแรกเมอ Application ถกเปดขนมา

ใหเรมจากการเปดไฟล AndroidManifest.xml ขนมา กจะปรากฏหนาจอ ดงรป

จากทเราไดลงทะเบยน Activity Class ไวจ านวนสองอน จะเหนไดวาม element <activity> อนหนงทม child element <intent-filter> อย ซง element <intent-filter> นนเองทเปนตวบอกวาตองการให element <activity> ใด เปน Activity Class ทจะท างานเปนครงแรก เมอ Application ถกเปดขนมา

ส าหรบ syntax ของการก าหนดวา Activity Class ใด จะท างานเปนครงแรก เมอ Application ถกเปดขนมามดงน


โดย จะตองระบ element <intent-filter> ลกษณะน ไวภายใน element <activity> ทตองการใหท างานเปนครงแรก เมอ Application ถกเปดขนมา ซงสามารถก าหนดใหไดแคอนเดยวเทานน ( ไมสามารถก าหนด element <intent-filter> น ไวในหลาย ๆ element <activity> ได )

User Interface เบองตน ......................................................................................................................................................................

User Interface เบองตน

โครงสรางการออกแบบหนาจอของ Android นนจะแบงประเภทของ Object ออกเปน 2 ประเภท นนคอ ViewGroup และ View

ViewGroup นนกเปรยบเสมอน View Container ทสามารถประกอบดวย View หรอ ViewGroup ยอยไดเปรยบเสมอนกบแทก Div ใน HTML นนเอง ซงใน Android นนสามารถม Root ViewGroup ไดเพยงตวเดยวเทานน (เปรยบเสมอนกบแทก Body ใน HTML ซงเปน Root Container)

สวน View นนกคอ Object หรอ Component ตาง ๆ ทไมสามารถม Children View ได เชน Button, TextView, CheckBox, RadioButton เปนตน

จากภาพดานบน จะเหนวาใน Application จะสามารถม View Group ไดเพยงตวเดยวเทานน ซงใน Root View Group กสามารถม View Group ยอยไดอก รวมถงม View ตาง ๆ ไดไมจ ากด

Class ทอยในประเภทของ ViewGroup ประกอบดวย

LinearLayout

RelativeLayout

ScrollView

LinearLayout ......................................................................................................................................................................

LinearLayout

LinearLayout เปน ViewGroup ประเภทเชงเสน ซงสามารถก าหนดไดวาตองการให Children View นนเรยงกนในลกษณะเชงเสนแนวตง หรอแนวนอน

1. Vertical LinearLayout (ในลกษณะแนวตง)

การวาง Children View จะถกแสดงผลในลกษณะแนวตง ตามล าดบกอนหลงทเราวาง Children View เขาไป เชน กรณทเราใส Button1, Button2, Button3 ลงไปใน LinearLayout ทถกก าหนดเปนเชงเสนแนวตง มนจะแสดงผลดงรป

โดยตวอยาง Code ส าหรบการก าหนด Layout ตามภาพดานบนนคอ

LinearLayout ......................................................................................................................................................................

จากตวอยาง Code ดานบน จะเหนวาใน LinearLayout นนเราไดก าหนดไววาใหแสดงผลแนวตง (android:orientation="vertical") ดงนนผลลพธทไดนนจะเปนปม 3 ปมเรยงจากบนลงลางตามล าดบการ วางปมทเราใสเขาไป

LinearLayout ......................................................................................................................................................................

นอกจากนเรายงสามารถก าหนด Alignment ใหกบ View ตาง ๆ ภายใน LinearLayout ไดอกดวย โดยใช Property "layout_gravity" ซงแปลตรงตววาเปนแรงดงดด โดยคาทสามารถก าหนดไดประกอบดวย

left

right

center_horizontal

top

bottom

center_vertical

ตวอยาง Code ส าหรบการก าหนดให

Button 1 อยชดซาย

Button 2 อยตรงกลาง

Button 3 อยชดขวา

LinearLayout ......................................................................................................................................................................

ผลลพธทไดจาก Code ตวอยางดานบนนคอ

LinearLayout ......................................................................................................................................................................

2. Horizontal LinearLayout (ในลกษณะแนวนอน)

การท างานจะเหมอนกบ Vertical LinearLayout (ในลกษณะแนวตง ) ตางกนแคตรงทเปลยนจาก แนวตงเปนแนวนอนเทานน เชน กรณทเราใส Button1, Button2, Button3 ลงไปใน LinearLayout ทถกก าหนดเปนเชงเสนแนวนอน มนจะแสดงผลดงรป

โดยตวอยาง Code ส าหรบการก าหนด Layout ตามภาพดานบนนคอ

LinearLayout ......................................................................................................................................................................

จากตวอยาง Code ดานบน จะเหนวาใน LinearLayout นนเราไดก าหนดไววาใหแสดงผลแนว นอน (android:orientation="horizontal") ดงนนผลลพธทไดนนจะเปนปม 3 ปมเรยงจากบนซายไปขวาตามล าดบการวางปมทเราใสเขาไป

การใชงาน LinearLayout แนวนอนนนเราไมจ าเปนตองก าหนด คา orientation กได เนองจากมนเปนคา Default ซงหมายความวาหากไมมการก าหนดคาใด ๆ มนจะใชคา horizontal แทน

ผลลพธทไดจากตวอยาง Code ดานบนนคอ

LinearLayout ......................................................................................................................................................................

นอกจากนเรากสามารถก าหนด Alignment ใหกบ View ตาง ๆ ภายใน Horizontal LinearLayout ไดเหมอนกน โดยใช Property "layout_gravity" โดยคาทสามารถก าหนดไดประกอบดวย

top

center_vertical

bottom

left

right

center_horizontal

ตวอยาง Code ส าหรบการก าหนดให

Button 1 อยดานลาง

Button 2 อยตรงกลางแนวตง

Button 3 อยดานบน

LinearLayout ......................................................................................................................................................................

ผลลพธทไดจาก Code ตวอยางดานบนนคอ

LinearLayout ......................................................................................................................................................................

3. การก าหนด Content Gravity ใหกบ LinearLayout

Content Gravity คอการก าหนดทศทางของ Children View ภายใน ViewGroup (LinearLayout) วาตองการใหมนอยใน Alignment ใดทงหมด ซงหมายความวาหากก าหนดให Vertical LinearLayout ม Content Gravity เปน Right (ชดขวา) จะท าให Children View ทงหมดทอยภายในตวมนจะถกจดใหอยชดขวานนเอง

ตวอยางเชน ก าหนดให Horizontal LinearLayout ม Content Gravity อยในต าแหนง ขวาลาง (right|bottom) จะไดผลลพธดงภาพ

ซงจากผลลพธตามภาพดานบนนน สามารถเขยน Code ไดดงน

LinearLayout ......................................................................................................................................................................

เราท าการก าหนด Content Gravity ใหกบ LinearLayout ดวย Property "android:gravity" (ไมใช android:layout_gravity) โดยเราสามารถก าหนดได 2 คาแบงเปนในดานแนวตง และแนวนอน ซงจาก Code ตวอยางดานบนจะเหนวามการก าหนด Content Gravity ในทศทางแนวตงใหเปน bottom และทศทางแนวนอนใหเปน right ดงนนมนจะท าให Children View ของมนถกจดอยในต าแหนงขวาลาง

RelativeLayout ......................................................................................................................................................................

RelativeLayout

RelativeLayout เปน ViewGroup ประเภทอางองความสมพนธ ซงหมายความวาการก าหนดต าแหนงใหกบ Children View ของมนจะตองอางองความสมพนธทงหมด โดยแบงความสมพนธออกเปน 2 ประเภทคอ

การก าหนดต าแหนง Children View โดยอางองกบ Parent ViewGroup (ตว RelativeLayout)

การก าหนดต าแหนง Children View โดยอางองกบ Children View ดวยกนเอง ทอยใน Parent เดยวกน

1. RelativeLayout โดยอางองความสมพนธกบ Parent

การอางองความสมพนธกบ Parent เราสามารถก าหนดไดวาตองการให View นน ๆ แสดงอยในต าแหนงใด ประกอบดวย

อยดานบน โดยใช property "android:layout_alignParentTop"

อยดานลาง โดยใช property "android:layout_alignParentBottom"

อยดานซาย โดยใช property "android:layout_alignParentLeft"

อยดานขวา โดยใช property "android:layout_alignParentRight"

อยตรงกลางแนวตง โดยใช property "android:layout_centerVertical"

อยตรงกลางแนวนอน โดยใช property "android:layout_centerHorizontal"

อยตรงกลางทงในแนวตงและแนวนอน โดยใช property "android:layout_centerInParent"

ตวอยางเชน ตองการใหวางต าแหนงปมทงหมด 3 ปมในต าแหนงดงตอไปน

ปม Top Left ใหแสดงอยในต าแหนงของดานบนซาย (property ทเกยวของคอ android:layout_alignParentTop และ android:layout_alignParentLeft)

ปม Center Right ใหแสดงอยในต าแหนงตรงกลางแนวตงและชดขวา (property ทเกยวของคอ android:layout_centerVertical และ android:layout_alignParentRight)

ปม Bottom Center ใหแสดงอยในต าแหนงดานลางและตรงกลางแนวนอน (property ทเกยวของคอ android:layout_alignParentBottom และ android:layout_centerHorizontal)

RelativeLayout ......................................................................................................................................................................

ผลลพธทคาดหวงคอ

ดงนนเราไปดตวอยาง Code การเขยน XML Code ในการก าหนด Layout ใหมลกษณะดงภาพดานบน

RelativeLayout ......................................................................................................................................................................

เมอทดลอง Run Application ดแลวจะพบวาผลลพธทไดจะเหมอนในรปดานบน

จากตวอยางน ชวยใหเราสามารถเหนภาพไดอยางชดเจนขน โดยเราจะเหนวาการวางต าแหนงใหกบ View ตาง ๆ นนจะตองอางองตว Parent ทงหมด

2. RelativeLayout โดยอางองกบ Children View ดวยกนเอง

การใชงาน RelativeLayout โดยอางองความสมพนธกบ Parent เพยงอยางเดยว จะท าใหเราไมสามารถจดวาง View ตาง ๆ ไดตามทเราคาดหวงไว ซงตวทจะชวยใหเราสามารถจดการวางต าแหนงของ View ไดอยางทเราตองการ กคอ การอางองกบ Children View ดวยกนเอง

RelativeLayout ......................................................................................................................................................................

ตวอยางเชน หากเราตองการใหหนาจอมลกษณะดงภาพดานลางน การก าหนดความสมพนธโดยใชการอางองกบ Parent อยางเดยวจะไมสามารถท าได

ดงนนเราจะตองใชความสมพนธโดยการอางองกบ Children View ดวยกนเอง โดยเราตองวางแผนการสรางหนาจอกอน มล าดบดงน

สรางปม Center Center โดยใชความสมพนธกบ Parent (android:layout_centerInParent)

สรางปม Button 1 โดยใชความสมพนธกบปม "Center Center" ดวยการก าหนดใหอยขางบนปม "Center Center" และใหอยชดซายของปม "Center Center"

สรางปม Button 2 โดยใชความสมพนธกบปม "Center Center" ดวยการก าหนดใหอยขาวขวาของปม "Center Center" และใหอยระนาบบนเดยวกนกบปม "Center Center"

ตวอยาง Code ส าหรบการออกแบบหนาจอโดยใช RelativeLayout ใหมลกษณะตามโจทยดานบน

RelativeLayout ......................................................................................................................................................................

จะเหนวาการทเราจะอางองความสมพนธระหวาง Children View ดวยกนนน จะตองอางองผาน ID ของ View ทตองการอางอง ดงนนในสวนของปม Center Center จะตองระบ ID ไวเพอให View อน ๆ อางองไดนนคอ android:id="@+id/btnCenter"

จากนนเรามาดวธการอางองความสมพนธของ Button 1 และ Button 2 โดยละเอยดดงน

Button 1 จะตองอยบนปม "Center Center" (อางองผาน android:layout_above:"@id/btnCenter") และก าหนดไววาจะตองอยชดซายระนาบเดยวกนกบปม "Center Center" ดวย (อางองผาน android:layout_alignLeft="@id/btnCenter")

Button 2 จะตองอยดานขวาของปม "Center Center" (โดยการอางองผาน android:layout_toRightOf="@id/btnCenter") และก าหนดไววาจะตองอยระนาบบนเดยวกนกบปม "Center Center" ดวย (อางองผาน android:layout_alignTop="@id/btnCenter")

RelativeLayout ......................................................................................................................................................................

สรป Property ทใชส าหรบอางองต าแหนงกบ Children View ภายใน Parent เดยวกน ประกอบดวย

android:layout_above (อยดานบนของ view ทอางอง)

android:layout_below (อยดานลางของ view ทอางอง)

android:layout_toLeftOf (อยดานซายของ view ทอางอง)

android:layout_toRightOf (อยดานขวาของ view ทอางอง)

android:layout_alignTop (จดขอบดานบนใหอยระนาบเดยวกนกบ view ทอางอง)

android:layout_alignBottom (จดขอบดานลางใหอยระนาบเดยวกนกบ view ทอางอง)

android:layout_alignLeft (จดขอบดานซายใหอยระนาบเดยวกนกบ view ทอางอง)

android:layout_alignRight (จดขอบดานขวาใหอยระนาบเดยวกนกบ view ทอางอง)

ScrollView ......................................................................................................................................................................

ScrollView

ScrollView เปน ViewGroup ทม View ลกไดเพยงตวเดยวเทานน มกจะใชในกรณทหนาจอไมสามารถแสดง Content ทงหมดทตองการได โดยจะตองใช ScrollView ครอบตว ViewGroup เพอให ViewGroup นน ๆ สามารถ Scroll ขนลงได

ScrollView ประกอบดวย 2 ประเภท (2 ทศทาง) นนคอ

ScrollView - ส าหรบ Scroll เนอหาในแนวตง

HorizontalScrollView - ส าหรบ Scroll เนอหาในแนวนอน (มกจะใชควบคกบ Horizontal LinearLayout)

1. ScrollView ในแนวตง

ScrollView ในแนวตงนนสามารถใชไดกบ Vertical LinearLayout และ RelativeLayout ตวอยางรปผลลพธดานลางน ท าการเพมปมลงไปจ านวนมาก เพอให ViewGroup ไมสามารถแสดงผลในหนาจอเดยวไดหมด ดงนนเราจงจะใช ScrollView มาครอบ ViewGroup (ในทนใช LinearLayout แบบ vertical)

ScrollView ......................................................................................................................................................................

ตวอยาง Code ส าหรบแสดงผล ScrollView แบบแนวตง

จากตวอยาง Code ดานบนในสวนของ ... หมายความวาใหเพม Code ในการสงปมลงไปตงแต Button 02 จนถง Button 17 เพอดผลลพธ

2. HorizontalScrollView ในแนวนอน

ลกษณะการท างานจะเหมอนกบ ScrollView ในแนวตง แตแตกตางตรงทหนาจอไมสามารถแสดง Content ทงหมดในแนวดานกวางได ดงนนจงเหมาะกบการใชงานคกบ LinearLayout แบบ Horizontal

ScrollView ......................................................................................................................................................................

ตวอยาง Code ส าหรบแสดงผล HorizontalScrollView แบบแนวนอน

จากตวอยาง Code ดานบนในสวนของ ... หมายความวาใหเพม Code ในการสงปมลงไปตงแต Button 02 จนถง Button 08 เพอดผลลพธ

TextView ......................................................................................................................................................................

TextView

TextView คอ View หรอ Object ทใชในการแสดงขอความ บน Application ใหกบ User ไดเหน โดยสามารถปรบแตงรปแบบตวอกษรทตองการแสดงผลออกมาได เชน ขนาดตวอกษร, สตวอกษร เปนตน

ตวอยาง Code ส าหรบเรยกใชงาน TextView มดงน

ผลลพธทจะไดจาก Code ดานบนคอ

1. การก าหนด Property ใหกบ TextView

การก าหนด Property คอการก าหนดคณสมบตตาง ๆ ใหกบ TextView เพอใหแสดงผลขอความออกมาตามรปแบบทตองการ ไมวาจะเปนการก าหนดขนาดตวอกษร สตวอกษร ต าแหนงการแสดงผลตวอกษร เปนตน

1.1 การก าหนดขนาดตวอกษร

หนวยทใชในการก าหนดขนาดตาง ๆ ใน Android นนมจ านวนมาก เชน dp, sp, in, px, mm เปนตน แตในการก าหนดขนาดตวอกษรนน Android Development Guideline แนะน าใหใชหนวยของ sp เทานน โดยสามารถก าหนดขนาดตวอกษรผาน property android:textSize="24sp"

TextView ......................................................................................................................................................................


1.2 การก าหนดรปแบบตวอกษร

รปแบบตวอกษรประกอบดวย Normal (ปกต), Bold (ตวหนา) , Italic (ตวเอยง) เราสามารถก าหนดคาเหลานผาน property android:textStyle="bold|italic"


TextView ......................................................................................................................................................................

1.3 การก าหนดสของตวอกษร

สามารถก าหนดในรปแบบ #rrggbb (RGB) หรอ #aarrggbb (Alpha RGB) หรอแมกระทงก าหนดผานการอางอง Resource ของ Android ผาน res > colors


1.4 การจด Alignment ใหกบขอความ

จะตองก าหนดให TextView มขนาดความกวางเทากบขนาดของ Parent ViewGroup โดยใช property android:layout_width="match_parent" โดยคาทสามารถก าหนดไดประกอบดวย top, bottom, left, right, center_vertical, center_horizontal, center, fill_vertical, fill_horizontal, fill, clip_vertical, clip_horizontal, start, end


TextView ......................................................................................................................................................................

1.5 ก าหนดให TextView แสดงขอความบรรทดเดยว

หาก TextView มขอความทยาวจะท าใหเกดจ านวนบรรทดเพมขน ในบางกรณทเราออกแบบหนาจอออกมา แลวตองการใหมนมไดแคบรรทดเดยวเทานน เราสามารถก าหนด property android:singleLine="true" เพอบอกมนวา TextView นมแคบรรทดเดยว ซงขอความทแสดงผลไมพอจะถกตดออกในรปแบบทเราสามารถก าหนดได โดยก าหนดผาน property android:ellipsize โดยจะอธบายในหวขอถดไป (คา default ของ property android:ellipsize คอ end จงท าให TextView ตดขอความดานทายออกแลวเตมดวยจด 3 จดแทน)


TextView ......................................................................................................................................................................

1.6 ก าหนดจ านวนบรรทดใหกบ TextView

ในกรณทเราตองการก าหนดจ านวนบรรทดใหกบ TextView เราสามารถก าหนดโดยใช property android:lines โดยจะตองให android:singleLine="false"

ผลลพธทจะไดจาก Code ดานบน

1.7 ก าหนดชองไฟความหางใหกบบรรทดของ TextView

ในบางกรณ เชน Font ทใชอาจจ าเปนตองใชชองไฟในแตละบรรทดเพมขน เราสามารถขยายชองไฟ ของแตละบรรทดไดโดยการก าหนด property android:lineSpacingExtra เชน

TextView ......................................................................................................................................................................

ผลลพธทจะไดจาก Code ดานบน (เทยบความแตกตางจากตวอยางทแลว จะเหนวาชองไฟของแตละบรรทดนนหางมากขน)

1.8 การตดขอความเพอแสดงขอความในบรรทดเดยว

อยางทไดเกรนไวขางตนเกยวกบการตดขอความเพอให TextView สามารถแสดงผลขอความได ภายในบรรทดเดยว ซงเราสามารถเลอกไดวาตองการใหขอความมนถกตดในต าแหนงไหน เชน ต าแหนงดานหนา ตรงกลาง ดานหลง หรอแสดงในรปแบบตวอกษรวง ( marquee) โดยก าหนดผาน property android:ellipsize และตองก าหนด property android:singleLine="true"

TextView ......................................................................................................................................................................

สารบัญ - hub coder · เปิดโปรแกรม android studio...

Documents