สารบัญ - hub coder · เปิดโปรแกรม android studio...
Post on 16-Mar-2020
7 Views
Preview:
TRANSCRIPT
สารบญ
เตรยมพรอมกอนเรมเขยนโปรแกรม 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 เทานน
หากเนอหาสวนใดในหนงสอเลมนเกดขอผดพลาดขน รบกวนแจงกลบมาท nontachai@nister.co.th และขออภยมา ณ ทนดวยครบ
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)
การตดตง Android Studio ......................................................................................................................................................................
ใหอาน License Agreement ใหเรยบรอย แลวเลอกท "Accept License Agreement" จากนนใหกดเอกดาวนโหลดตวตดตง JDK ทตรงกบ Environment ของเครองพฒนา
เมอดาวนโหลด JDK Installation เรยบรอยแลว ให Double Click ทไฟลตดตง เพอเรมท าการตดตง โดยจะปรากฏหนาจอดงภาพ
การตดตง Android Studio ......................................................................................................................................................................
กดปม Next เพอเลอก Option ในการตดตง JDK
ใหใชคา Default ของการตดตงทก าหนดมา ไมตองเลอกหรอเอา Option อะไรออก จากนนใหกดปม Next เพอเตรยมการตดตง
การตดตง Android Studio ......................................................................................................................................................................
เมอเตรยมการตดตงเสรจเรยบรอยแลว จะปรากฏหนาจอใหเลอก Folder ทตองการตดตง JDK
จากนนใหกดปม Next เพอเขาสข นตอนการตดตง JDK ทนท
การตดตง Android Studio ......................................................................................................................................................................
เมอการตดตง JDK เรยบรอยแลว กจะปรากฏหนาจอแจงเตอนการตดตง ดงภาพ
การตดตง Android Studio ......................................................................................................................................................................
2. การตดตง Android Studio
การตดตงโปรแกรม Android Studio นนใหเรม Download ตวตดตงจาก http://developer.android.com/sdk/index.html
จากนนใหกดปม Download Android Studio (กรณทใช Windows มนจะแสดงปมใหดาวนโหลดตวตดตงส าหรบ Windows แตกรณทใช OSX หรอ MAC มนกจะแสดงปมใหดาวนโหลดตวตดตงส าหรบ OSX)
การตดตง Android Studio ......................................................................................................................................................................
อาน Terms and Conditions ใหเรยบรอย และเลอก "I have read and agree with the above terms and conditions" จากนนใหกดทปม "Download Android Studio" เพมเรม ดาวนโหลดตวตดตงโปรแกรม Android Studio
เมอดาวนโหลดตวตดตงเรยบรอยแลว ให Double Click ทตวตดตงเพมเรมท าการตดตงโปรแกรม
การตดตง Android Studio ......................................................................................................................................................................
กดปม Next เพอเขาสหนาจอส าหรบเลอก Component ทตองการตดตง
ใหเลอกตามคา Default (เลอกทงหมด) จากนนกดปม Next เพอยนยน License Agreement อกครงหนง
การตดตง Android Studio ......................................................................................................................................................................
เมออานเรยบรอยแลว ใหกดปม "I Agree" เพอเขาสหนาจอส าหรบเลอก Folder ทตองการตดตง Android Studio และ SDK
เมอเลอก Folder ส าหรบตดตงเรยบรอยแลว ใหกดปม Next
การตดตง Android Studio ......................................................................................................................................................................
จากนนกดปม Install เพอเรมการตดตง
จากนนกดทปม Next เพอสนสดการตดตง
การตดตง Android Studio ......................................................................................................................................................................
ขนตอนสดทาย ตวตดตงจะถามวาตองการเปดโปรแกรม Android Studio เลยหรอไม ถาตองการเปดโปรแกรม ใหเลอกท "Start Android Studio" จากนนกดปม "Finish"
สราง Project ใน Android Studio ......................................................................................................................................................................
สราง Project ใน Android Studio
เปดโปรแกรม Android Studio ขนมา จะพบกบเมนตาง ๆ ดงภาพ
เลอกเมน "Start a new Android Studio project" เพอเรมตนสรางโปรเจค โดยจะปรากฏหนาจอดงภาพ
ใหกรอกขอมลเกยวกบ Project ทตองการสรางดงน
สราง Project ใน Android Studio ......................................................................................................................................................................
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
สราง Project ใน Android Studio ......................................................................................................................................................................
จากภาพจะเหนวา Android Studio ไดจดเตรยม Application Template จ านวนมากใหเราไดเลอกใช ซงในเนอหานใหเลอก Blank Activity จากนนกดปม Next
สราง Project ใน Android Studio ......................................................................................................................................................................
ในชองกรอกขอมลจากภาพดานบนน ใหเราใชคา 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 เดมทสรางไวในเนอหาทแลว)
การสราง Emulator และการ Run ......................................................................................................................................................................
คลกทปมเครองมอ 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
การสราง Emulator และการ Run ......................................................................................................................................................................
เลอกท Accept License แลวคลกทปม Install เพอเรมการตดตง โดยจะม progress bar แสดงสถานะการตดตงใหเหนดงภาพ
เมอตดตงเสรจแลว ใหปดหนาตาง SDK Manager
การสราง Emulator และการ Run ......................................................................................................................................................................
2. สราง Android Virtual Device (Emulator)
หลงจากตดตง SDK Platform เรยบรอยแลว ใหกลบมาทหนาจอ Android Studio อกครง
คลกทปมเครองมอ AVD Manager (ท Focus กรอบสแดง) โดยจะปรากฏหนาจอดงรป
คลกทปม "Create a virtual device" เพอเรมตนสราง Emulator
การสราง Emulator และการ Run ......................................................................................................................................................................
จากภาพจะเหนไดวา เราสามารถก าหนดไดวา ตองการสราง Emulator เปนอปกรณประเภทใด รวมถงการก าหนดรายละเอยดใหกบอปกรณไดดวยวาตองการใหม Size, Resolution และ Density เปนเทาไร
เมอเลอกเรยบรอยแลวใหคลกปม Next จะมายงหนาจอส าหรบก าหนด SDK Platform ใหกบ Emulator
การสราง Emulator และการ Run ......................................................................................................................................................................
ในสวนน ใหเลอก 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 และการ Run ......................................................................................................................................................................
หากตองการสราง Emulator เพมใหคลกปม "Create Virtual Device..." และท าตามขนตอนเดมทไดอธบายไวขางตน
3. Run Application ผาน Emulator
หลงจากทไดสราง Android Virtual Device (Emulator) เรยบรอยแลว ใหกลบมายงหนาจอ Android Studio
การสราง Emulator และการ Run ......................................................................................................................................................................
ใหคลกทปม 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 และการ Run ......................................................................................................................................................................
ซง 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
การสรางหนาจอบน Android Application ......................................................................................................................................................................
ทเราสรางขน (ซงไฟลทช อวา 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
การสรางหนาจอบน Android Application ......................................................................................................................................................................
จะเหนไดวา 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 ใด
การสรางหนาจอบน Android Application ......................................................................................................................................................................
ส าหรบการระบวา 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 )
Android Manifest กบ Activity ......................................................................................................................................................................
จะเหนไดวา ณ ตอนน Project ของเราม Activity Class เพยงอนเดยวเทานน ซงกคอ MainActivity ดงนน จงมการลงทะเบยน Activity Class ไวท AndroidManifest.xml เพยง Activity Class เดยว
จากนนใหลองสราง Activity Class ขนมาอกอนหนง ใหชอวา SecondActivity โดยคลกขวาท Package ทเราตงชอไว ซงกคอ com.hubcoder.androidtutorial จากนนเลอก New แลวเลอก Activity แลวเลอก BlankActivity ตามล าดบ ดงรป
Android Manifest กบ Activity ......................................................................................................................................................................
คลกขวาท Package ทเราตงชอไว ซงกคอ com.hubcoder.androidtutorial จากนนเลอก New แลวเลอก Activity แลวเลอก BlankActivity ตามล าดบ โดยจะปรากฏหนาจอใหตงคาเดยวกบ Activity ใหมดงรป
Android Manifest กบ 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 มดงน
Android Manifest กบ Activity ......................................................................................................................................................................
โดย 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 ถกเปดขนมามดงน
Android Manifest กบ Activity ......................................................................................................................................................................
โดย จะตองระบ 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 ......................................................................................................................................................................
ผลลพธทจะไดจาก Code ดานบนคอ
1.2 การก าหนดรปแบบตวอกษร
รปแบบตวอกษรประกอบดวย Normal (ปกต), Bold (ตวหนา) , Italic (ตวเอยง) เราสามารถก าหนดคาเหลานผาน property android:textStyle="bold|italic"
ผลลพธทจะไดจาก Code ดานบนคอ
TextView ......................................................................................................................................................................
1.3 การก าหนดสของตวอกษร
สามารถก าหนดในรปแบบ #rrggbb (RGB) หรอ #aarrggbb (Alpha RGB) หรอแมกระทงก าหนดผานการอางอง Resource ของ Android ผาน res > colors
ผลลพธทจะไดจาก Code ดานบนคอ
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
ผลลพธทจะไดจาก Code ดานบนคอ
TextView ......................................................................................................................................................................
1.5 ก าหนดให TextView แสดงขอความบรรทดเดยว
หาก TextView มขอความทยาวจะท าใหเกดจ านวนบรรทดเพมขน ในบางกรณทเราออกแบบหนาจอออกมา แลวตองการใหมนมไดแคบรรทดเดยวเทานน เราสามารถก าหนด property android:singleLine="true" เพอบอกมนวา TextView นมแคบรรทดเดยว ซงขอความทแสดงผลไมพอจะถกตดออกในรปแบบทเราสามารถก าหนดได โดยก าหนดผาน property android:ellipsize โดยจะอธบายในหวขอถดไป (คา default ของ property android:ellipsize คอ end จงท าให TextView ตดขอความดานทายออกแลวเตมดวยจด 3 จดแทน)
ผลลพธทจะไดจาก Code ดานบนคอ
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 ......................................................................................................................................................................
top related