ตอนที่ 5 : Xamarin กับ Android โครงสร้างไฟล์ Project และ Controls / Widgets (C#) |
ตอนที่ 5 : Xamarin กับ Android โครงสร้างไฟล์ Project และ Controls / Widgets (C#) หลังจากที่เราได้สร้างโปรเจค Android ด้วย C# ทั้งบน Xamarin Studio IDE หรือ Visual Studio โครงสร้างไฟล์ต่าง ๆ ที่ได้ IDE สร้างค่า Default มาให้นั้นจะมีโครงสร้างที่เหมือนกัน สามารถ Copy ข้าม Project กันได้ การเขียนก็เหมือนกันทุกประการ และในครั้งแรกที่เปิดโปรเจค หากยังไม่เคยได้เขียน Android มาก่อน อาจจะสับสนว่าทำไมถึงมีไฟล์อะไรมาเยอะแยะ และแต่ล่ะไฟล์นั้นมีหน้าที่ทำอะไรบ้าง ซึ่งไฟล์ต่าง ๆ เหล่านี้ถ้าเรารู้จักมัน แล้วเราจะเข้าใจได้เลยว่า มันก็เหมือนกับการสร้าง Project ทั่ว ๆ ไป เพียงแต่บนระบบปฏิบัติการ Android จะมีการสร้างไฟล์ต่าง ๆ ที่จำเป็นในการใช้งาน และมีการแยก Folder ไว้จัดเก็บพวก Resource ต่าง ๆ ไว้อย่างชัดเจน

และก็เหมือนกับ Project ทั่ว ๆ ไป คือบน Visual Studio จะเก็บ Project ไว้ภายใต้ Solution

ไฟล์ที่จำเป็นจะต้องรู้จัก
- Properties\AndroidManifest.xml เป็นไฟล์ใช้สำหรับการจัดเก็บค่า Config , Activity, Permission เช่น ให้เปิด GPS , Internet ได้หรือไม่
- Resources\drawable เป็นโฟเดอร์ไว้จัดเก็บไฟว์พวกรุปภาพต่าง ๆ
- Resources\layout\Main.axml เป็นไฟล์จัดเก็บ Layout หรือหน้าจอของ Apps โดยจะเป็น XML โดยปกติจะเรียกว่า Activity เปรียบได้เหมือนกับพวก .aspx ของ Asp.Net
- MainActivity.cs เป็น Class ของ C# มีหน้าที่ทำงานคำสั่งด้วยภาษา C# ซึ่งปกติแล้วจะเรียก XML Layout มาแสดงผล เปรียบได้เหมือนกับพวก .aspx.cs ของ Asp.Net
- Resources\values\Strings.xml นิยมใช้จัดเก็บค่าตัวแปร หรือ String แบบ ตัวแปร เช่น App Name หรือค่าอื่น ๆ ที่สามารถเรียกใช้ได้ในทุก ๆ Activity
ในการเขียน Android ไฟล์ที่จำเป็นจะต้องรู้หลัก ๆ ก็มีเพียงเท่านี้ ซึ่งบางไฟล์เมื่อเราเขียน ๆ ไปก็จะสามารถทำความเข้าใจได้เอง ลองมาดูตัวอย่างเพื่อความเข้าใจเพิ่มเติม

เมื่อเราเปิดไฟล์ MainActivity.cs เราจะเห็นคำสั่ง SetContentView(Resource.Layout.Main); ซึ่งคำสั่งนี้เมื่อ App ทำงานก็จะมีการเรียก Layout ของ Main.axml มาแสดงผล

จะเห็นว่าจะมีการอ้างถึง Resource -> Layout -> Main (ใน Android จะไม่อ้างถึงนามสกุลเมื่อเรียกใช้พวก Resource ต่าง ๆ )

ในการเขียนเราก็สามารถออกแบบพวก Control หรือในวงการ Android จะเรียกว่า Widget ผ่าน GUI ด้วยการลากไปไว้บน Form ได้เลย (ในวงการ Android จะเรียกว่า Activity)


ทดสอบลาก Control ของ TextView

หลังจากที่สร้าง Widget ของ TextView บน Activity แล้ว เราสามารถสร้าง id หรือ แก้ไขคุณสมบัติต่าง ๆ ของ Widget นั้น ๆ เช่นถ้าเป็น TextView ก็ใส่ Text เข้าไปได้

เราสามารถสร้างได้ทั้งมุมมอง GUI หรือจะ View Code ที่เป็น XML ซึ่งก็จะมี Property ที่เราได้กำหนดขึ้น เช่น id และ text
รู้จักกับ Resources\values\Strings.xml ตามที่ได้เกริ่นไว้ก่อนหน้านี้ Strings.xml จะนิยมใช้จัดเก็บพวกค่าที่เป็น String ที่สามารถเรียกใช้ได้ในทุก ๆ ส่วนของ Activity
Strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="Hello">Hello World, Click Me!</string>
<string name="ApplicationName">myFirstApps</string>
</resources>
จากตัวอย่างนี้ Hello มีค่า "Hello World, Click Me!" และ ApplicationName มีค่า "myFirstApps"

เราจะลองเพิ่ม
<string name="MySite">www.ThaiCreate.Com</string>

จากนั้นในส่วนของ Activity เราสามารถเรียกค่า ndroid:text="@string/MySite" เพื่อที่จะแสดงค่านั้น ๆ ออกมา

ได้ค่าที่มาจาก Strings.xml
รู้จักกับ \Resources\drawable เป็นโฟเดอร์ที่นิยมใช้จัดเก็บไฟล์รูปภาพ , ไอคอนต่าง ๆ

เราสามารถ Copy ไฟล์ไปวางไว้ในโฟเดอร์นี้ได้เลย รองรับนามสกุลเช่น png , jpg

ในการแสดงผลรุปภาพจะใช้ Widget ชื่อว่า ImageView

สามารถกำหนด Path ของรูปภาพด้วยการคลิกที่ src

เลือกรูปภาพที่ต้องการ โดนปกติแล้วจะชี้ไปที่ \Resources\drawable

แสดงรูปภาพบน ImageView

เมื่อ View Code ที่เป็น XML ดูจะเห็นว่ามีการอ้างถึง @drawable/win ซึ่งจะไม่ต้องระบุนามสกุลของไฟล์
Widgets ต่าง ๆ ของ Android ในการเขียน Android สามารถใช้เครื่องมือได้หลากหลายมาก และมีเยอะพอที่จะสามารถสร้าง Apps ให้ทำงานตรงกับความต้องการได้ โดย Widget ต่าง เหล่านี้ถูกแบ่งกลุ่มชัดเจน ตามประเภทและลักษณะการทำงาน ซึ่งถ้ามีโอกาสจะพยายามยกตัวอย่างการใช้งาน Widgets ต่าง ๆ เหล่านี้ให้ได้มากที่สุด

Image & Media ใช้สำหรับจัดการพวก Media เช่น Image , Vdo

Layout ไว้จัดการพวก Layout และการแสดงผล

Composite ใช้สำหรับในการแสดงผลข้อมูล ควบคุมการแสดงผล ส่วนประกอบต่าง ๆ

Advanced ความสามารถในขั้นสูงด้านพิเศษต่าง ๆ เช่น Zoom Control , Dialer และอื่น ๆ

Form Widgets ครื่องมือ ที่เกี่ยวข้องกับพวก Form ต่าง ๆ เช่น TextView , Button , Checkbox , Radio และอื่น ๆ

Text Fields ครื่องมือที่อยู่ภายใต้ editText และกลุ่มที่อยู่การ Input Text ข้อมูล หรือรับข้อมูลในรูปแบบต่าง ๆ เช่น Plain Text , Person Name , Password , Email และอื่น ๆ

Time & Date ครื่องมือในกลุ่มของ Date and Time จัดการกับวันที่ และเวลาในรูปแบบต่าง ๆ เช่น DatePicer , TimPicker , CalendarView และอื่น ๆ

Others เครื่องมือในกลุ่มของ การควบคุมการเปลี่ยนแปลงหลังเหตุการณ์ที่เกิดขึ้น ควบคุมการแสดงผล เช่น ImageSwitcher , TextSwitcher
สำหรับลิ้งค์ที่แปะให้นั้นเป็นส่วนของบทความ Android กับ Java ที่ทีมงานได้เขียนไว้เสร็จแล้ว และอาจจะพปเป็นแนวทางในการเขียนได้ และในส่วนของภาษา C# ถ้ามีโอกาสจะพยายามเขียนให้ได้มากที่สุด เท่าที่จะเป็นไปได้
.
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
   |
|
|
Create/Update Date : |
2014-09-15 12:36:15 /
2017-03-26 20:53:18 |
|
Download : |
No files |
|
Sponsored Links / Related |
|
|
|
|
|
|
|