บทที่ 5 พื้นฐานการพัฒนา Andriod App ด้วย Visual Studio 2022 Community

บทท่ี 5
พ้ืนฐานการพัฒนา Android App
ด้วย Visual Studio 2022 Community

นางสมพร โมกษะรตั น์ ครชู ำนาญการ วทิ ยาลยั เทคนคิ พงั งา

Android คือ ระบบปฏิบัติการสำหรับอุปกรณ์พกพา เช่น โทรศัพท์มือถือ แท็บเล็ตคอมพิวเตอร์ เน็ตบุ๊ก
ทำงานบนลนิ กุ ซ์ เคอร์เนล เริ่มพัฒนาโดยบริษทั แอนดรอยด์ (องั กฤษ: Android Inc.)

ประเภทของชดุ ซอฟทแ์ วร์ เนอ่ื งจากแอนดรอยด์ (Android) เปดิ ให้นักพฒั นาเขา้ ไปชมรหัสตน้ ฉบบั ได้ทำให้มี
ผู้พัฒนาจากหลายฝ่ายนำเอารหัสต้นฉบับมาปรับแต่ง และสร้างแอนดรอยด์ในแบบฉบับของตนเองขึ้นสามารถแบ่ง
ประเภทของแอนดรอยด์ออกไดเ้ ปน็ 3 ประเภท ดังตอ่ ไปน้ี

1. Android Open-Source Project (AOSP) เปน็ แอนดรอยด์ประเภทแรกท่กี ูเกลิ (Google) เปิดใหส้ ามารถ
นำต้นฉบับแบบเปิด ไปตดิ ต้งั และใชง้ านในอุปกรณต์ า่ งๆ ได้โดยไม่ตอ้ งเสียคา่ ใช้จา่ ยใดๆ

2. Open Handset Mobile (OHM) เป็นแอนดรอยด์ที่ได้รับการพัฒนาร่วมกับกลุ่มบริษัทผู้ผลิตอุปกรณ์
พกพา ที่เข้าร่วมกับกูเกิลในนาม Open Handset Alliances (OHA) บริษัทเหล่านี้จะพัฒนาแอนดรอยดใ์ นแบบฉบับ
ของตนออกมา โดยรูปร่างหน้าตา การแสดงผล และพังก์ชั่นการ ใช้งาน จะมีความเป็นเอกลักษณ์ และมีลิขสิทธิ์เป็น
ของตน พร้อมได้รับสิทธิ์ในการมีบริการเสริมต่างๆ จากกูเกิล ที่เรียกว่า Google Mobile Service (GMS) ซึ่งเป็น
บริการเสริมที่ทำให้แอนดรอยด์มีประสิทธิภาพ เป็นไปตามจุดประสงค์ของแอนดรอยด์ แต่การจะได้มาซึ่ง GMS นั้น
ผู้ผลติ จะต้องทำการทดสอบระบบ และขออนุญาตกบั ทางกูเกิลกอ่ น จงึ จะนำเครื่องออกสตู่ ลาดได้

3. Cooking หรอื Customize เปน็ แอนดรอยด์ท่นี กั พัฒนานำเอารหัสต้นฉบับจากแหล่งต่างๆ มาปรบั แต่งใน
แบบฉบบั ของตนเอง โดยจะตอ้ งทำการปลดล็อคสทิ ธ์ิการใชง้ านอุปกรณ์ หรือ Unlock เครือ่ งก่อนจงึ จะสามารถติดต้ัง
ได้ แอนดรอยด์ประเภทนี้ถือเป็นประเภทที่มีความสามารถมากที่สุดเท่าที่อุปกรณ์เครื่องนั้นๆ จะรองรับได้เนื่องจาก
ได้รับการปรบั แต่งให้เขา้ กับอุปกรณน์ น้ั ๆ จากผ้ใู ช้งานจริง

ปจั จุบนั เวอรช์ ่ันล่าสุด คือ Android 11

สาระการเรยี นรู้
1. ทำความรจู้ กั โครงสร้างโปรเจ็คทไ่ี ด้จาก Platform Android
2. พ้ืนฐานการพัฒนา Android Application
3. ทดสอบการทำงานของโปรแกรมผ่านโทรศัพทจ์ ำลอง (Emulator)
4. ทำความรู้จัก layout

4.1 Linear Layout (Vertical)
4.2 Linear Layout (Horizontal)
5. Table Layout
6. โปรแกรมเคร่อื งคิดเลข
7. การ Export APK

1. ทำความรู้จักโครงสรา้ งโปรเจค็ ทีไ่ ด้จาก Platform Android
1.1 สรา้ งโปรเจค็ ใหม่โดยเลอื กตามรูปภาพ
1
2

3

1 เลือกภาษาเป็น C# เลือก Platform Android เลอื กโปนเจค็ Mobile ที่จะใชเ้ ขยี นโปรแกรม
2 คลกิ เลือก Android App (Xamarin)
3 คลิก Next

1.2 ต้ังช่อื โปรเจค็ ในตวั อย่างนจี้ ะตงั้ ชื่อวา่ Casestudy-project โดยมขี นั้ ตอนดังนี้

1
2

3

1.3 เลอื ก template for you app ในทีน่ ีใ้ ห้เลือก Blank App

1
2 คลิกเลือก Minimum Android Version

3

1.4 หนา้ ตา่ งโปรเจ็คแสดงขึน้ มา

1

2

34

1 ไฟล์ Mainactivity.cs เปน็ ไฟลท์ ี่ใช้สำหรับเขียดโค้ดสงั่ ให้อุปกรณเ์ คล่ือนท่ที ำงาน
ตามทีต่ ้องการ

2 Solution Explorer เป็นหนา้ ตา่ งทแ่ี สดงช่อื ไฟล์ทงั้ หมดในโปรเจ็ค
3 Solution Explorer เป็นหนา้ ตา่ งที่แสดงชอื่ ไฟล์ทั้งหมดในโปรเจ็ค
4 Solution Explorer เปน็ หน้าต่างทแี่ สดงชื่อไฟล์ท้งั หมดในโปรเจค็

ใหค้ ลกิ ทโ่ี ฟลรเ์ ดอร์ชอ่ื Resources >> Layout >> activy_main.xml เม่ือคลิกทช่ี อ่ื ไฟล์ acvity_main.xlm
แล้ว โปรแกรมจะแสดงหน้า Design สำหรบั ออกแบบโปรเจ็คของเรา จากน้ันใหเ้ ราทดลองรนั
โปรเจ็คด้วย โทรศพั ท์จำลอง(Emulator)

4. ทำความรู้จกั layout
การออกแบบหนา้ จอ หรือส่วนประสานกับผู้ใชง้ าน หรอื ยูไอ (User Interface: UI) ใหส้ วยงามตอ้ งอาศัย

layout หรอื เค้าโครงในการวางตำแหนง่ ของ Object ตา่ งๆ ในบทน้จี ะพดู ถึง Layout 2 แบบ ได้แก่
4.1 Linear Layout (Vertical) เป็นการวางเคา้ โครงในแนวนอนจะให้เขา้ ใจง่าย เรียงกันเปน็ แถวนัน้ เอง
4.2 Linear Layout (Horizontal)เปน็ การวางเคา้ โครงในแนวคอลมั นจ์ ะใหเ้ ข้าใจง่าย เรียงกนั เปน็ คอลัมน์

นัน้ เอง
ขน้ั ตอนดงั น้ี
1. ไปที่ Toolbox ค้นหาคำวา่ Linear

1 2. คลิกเลือก Linear Layout จากน้ันลากมาวางบรวิ เณพน้ื ทอ่ี อกแบบของ Design
3. จุดสำหรบั ยอ่ /ขยาย Object

2

3

โคด้ ที่โปรแกรมสร้างขนึ้ มาเม่ือเราทำการสร้าง Object LinearLayout มาวางในหน้าออกแบบ
<LinearLayout

android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="96.5dp"
android:layout_height="match_parent"
android:id="@+id/linearLayout6"
android:background="@android:color/holo_blue_light" />

การออกแบบหน้าจอด้วย Linear Layout (Horizontal) จะทำตามข้ันตอนเหมือนกบั Linear Layout
(Vertical) แต่ให้เราเลือก ดังนี้

1. คน้ หา Linear Layout
2. คลกิ เลอื ก Linear Layout (Horizontal) ลากไปวางในหนา้ ออกแบบ แต่ให้เราไปวางทับกับ Linear
Layout (Vertical) จะเป็นเหมือนกับเรากำลงั สร้างคอลัมน์นั่นเอง

1

3 Linear Layout(Horizontal)

2

โคด้ โปรแกรมของการใช้ Object LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:showIn="@layout/activity_main"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout

android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="378.5dp"
android:layout_height="match_parent"
android:id="@+id/linearLayout1"
android:layout_marginTop="1.0dp">
<LinearLayout

android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="385.5dp"
android:layout_height="80.0dp"
android:id="@+id/linearLayout2"
android:background="@android:color/holo_green_light"
android:layout_marginRight="124.0dp">
<LinearLayout

android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="96.5dp"
android:layout_height="match_parent"
android:id="@+id/linearLayout6"
android:background="@android:color/holo_blue_light" />
<LinearLayout
android:orientation="horizontal"

android:minWidth="25px"
android:minHeight="25px"
android:layout_width="98.5dp"
android:layout_height="match_parent"
android:id="@+id/linearLayout7"
android:background="@android:color/holo_orange_dark" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="165.0dp"
android:id="@+id/linearLayout5"
android:background="@android:color/holo_purple" />
</LinearLayout>
</RelativeLayout>

5. Table Layout

จากภาพเปน็ การสร้าง Table Layout ขนาด 2แถว 4 คอลัมน์

โคด้ ท่ไี ด้ ดงั นี้

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:p4="http://xamarin.com/mono/android/designer"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout

android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tableLayout1">
<TableRow

android:id="@+id/tableRow1">
<TextView

p4:placeholder="true"
android:minWidth="30px"
android:minHeight="30px"
android:id="@+id/textView1"
android:layout_width="95.0dp"
android:layout_height="43.5dp"
android:background="@android:color/holo_blue_bright" />
<TextView
p4:placeholder="true"
android:minWidth="30px"
android:minHeight="30px"
android:id="@+id/textView2"
android:layout_width="83.0dp"
android:layout_height="44.0dp"
android:background="@android:color/holo_orange_light" />
<TextView
p4:placeholder="true"
android:minWidth="30px"
android:minHeight="30px"
android:id="@+id/textView3"
android:layout_width="72.5dp"
android:layout_height="43.5dp"
android:background="@android:color/holo_green_light" />
<TextView
p4:placeholder="true"
android:minWidth="30px"
android:minHeight="30px"
android:id="@+id/textView2"
android:layout_width="101.5dp"
android:layout_height="44.0dp"
android:background="@android:color/holo_orange_light" />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:background="#ffbf360c">
<TextView
p4:placeholder="true"
android:minWidth="30px"
android:minHeight="30px"
android:id="@+id/textView4"

android:layout_width="match_parent"
android:layout_height="35.5dp"
android:backgroundTint="#ff000000"
android:background="@android:color/background_dark" />
<TextView
p4:placeholder="true"
android:minWidth="30px"
android:minHeight="30px"
android:id="@+id/textView5"
android:layout_height="34.5dp"
android:background="#ffbf360c" />
<TextView
p4:placeholder="true"
android:minWidth="30px"
android:minHeight="30px"
android:id="@+id/textView6"
android:layout_height="36.5dp"
android:layout_width="107.0dp"
android:background="#ff004d40" />
</TableRow>
</TableLayout>

</LinearLayout>

6. การ Export a Signed APK

APK หมายถึง "Android Package Kit" (หรืออาจเรียกว่า "Android Application Package" ก็ได้) เป็น

รูปแบบไฟล์ชนิดหนึ่งที่ใช้ในการติดตั้งเผยแพร่ และติดตั้งแอปพลิเคชันบนระบบปฏิบัติการ Android ภายในตัวไฟล์

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

ไฟล์ APK มีคุณสมบตั ิเหมือนกบั ไฟล์ ประเภท Archive คือมี ไฟลจ์ ำนวนมากบรรจอุ ยู่ภายในตวั และมขี ้อมลู

จำเพาะ (Metadata) ของแต่ละไฟล์ ถูกบันทึกเอาไวด้ ้วย เหมือนกับไฟล์ประเภท ไฟล์ .ZIP และ ไฟล์ .RAR

ขัน้ ตอนการ Export a Signed APK

เปลย่ี นจาก Debug 1
เป็น Release 2

9

3
4

5

6

7
8
9

10

0

11

13 12
14 15
16

โปรแกรมจะใหเ้ ราใส่รหสั ผา่ น 1 คร้งั รหัสที่เรา Create Android 19

17
18

19

20
21