[Android Dev] Begin with Android (Part I :: User Interface)

Entry เฉพาะกิจครับ
ถึงแม้พรุ่งนี้จะมีเรียนเช้าก็ตาม แต่พอดีเพื่อนว่าง ก็เลยให้เขาสอนซะหน่อย ^^

ขอให้ Credit ผู้สอนก่อน :: พลอย , Computer Science SIT :: KMUTT.
**บทความนี้สำหรับคนที่ลง Eclipse + Android SDK และทำการ Set Environment เรียบร้อยแล้วนะครับ
มาเริ่มกันเลย ^^

เป้าหมายของบทความนี้ --> " 1 Button 1 TextView if Button Clicked TextView show "Hello World" "

เปิด Eclipse
เลือก File --> New --> Project --> Android --> Android Project

จากนั้นก็ Next ก็จะขึ้น หน้าต่างให้เราสร้าง Project ใส่ตามนี้

ใส่ตามนี้ 

Project Name = ชื่อ Project

Application Name = ตามสะดวก

Package Name = xx.yy โดยมากแล้วจะอยู่ในรูปแบบของ คนทำ.งาน

Create Activity = ชื่อไฟล์นั่นเอง อะไรก็ได้เช่นกัน

Min SDK Version = คือค่า API Lv ของเราดูจากหน้าต่าง Build Target ด้านบน

ที่เหลือไม่ต้องยุ่งกับมัน กด Finish ได้เลย ^^

เราจะได้ Project ทางด้านซ้ายในที่นี้ชื่อ BeginAndroid

เมื่อเปิดออกมาแล้วจะได้ประมาณนี้ ^^ 

ไฟล์ที่เราต้องทำงานหลัก ๆ ตอนนี้มี 2 ไฟล์คือ 

- ButtonClicked.java --> เอาไว้เขียน Code

- main.xml --> เอาไว้วาด Interface

**ลบโค้ดให้หมดก่อนเลยนะ ^^ ทั้งใน main.xml และ ButtonClicked.java

เราจะมาเริ่มกับการวาด Interface กันก่อนนะ ^^ Double-Click ไปที่ main.xml เลยยยย จะได้

ซึ่งสังเกตที่ปุ่มด้านล่าง จะมีให้เลือก Graphic Layout ด้วย ถ้าเลือกก็จะได้แบบนี้

2 หน้าต่างมีความสัมพันธ์กันนะ... หน้าต่างนี้ก็มี Tools ต่าง ๆ อยู่ด้านล่าง ลองลาก ๆ มาเล่นดู ใน main.xml ก็จะมีโค้ดเพิ่มขึ้นมา

ในที่นี่ทำการลาก Linear Layout ใส่ลงไป...

จากนั้นก็ลาก TextView และ Button เพิ่มไป... โดยมีการแก้ Text ด้วย ^^

**Layout มีหลากหลายชนิดมาก... ในที่นี้เอาแค่นี้ก่อนนะ 55555 ทำไม่เป็น 

    ตอนนี้กำลังเล่น Relative Layout อยู่ไว้จะมาเขียน Entry ใหม่นะ

ขออธิบาย XML Code สักหน่อยนึงนะ (ขออธิบายในสิ่งที่รู้ก่อนแล้วกันนะ)

**ทั้งหลายทั้งปวงแล้วมันคือ Property ของ Object ที่เราลากมาใส่แหละครับ

    ต้องการให้มันเป็นยังงัย อยู่ตำแหน่งไหน ขนาดเท่าไหร่... ประมาณนี้... 

    มีอะไรให้เล่นเยอะมากกกกก แต่ในที่นี้ ใช้แค่นี้แหละครับ ^^

 - แต่ละวัตถุจะมีสิ่งที่เรียกว่า tag ครอบไว้ เช่น TextView ก็จะมี <TextView [coding here] > </TextView>

 - android:text คือ ข้อความที่จะอยู่บนวัตถุนั้น

 - android:id คือ ชื่อตัวแปรของวัตถุนั้น ๆ 

 - android:layout_width คือ ความกว้างของวัตถุ

 - android:layout_height คือ ความยาวของวัตถุ

ต่ออีกนิด ^^ เรื่องขนาดของวัตถุ... ขอยกตัวอย่างคือ Button (ปุ่ม) แล้วกัน

ใส่ได้ทั้งหมด 3 แบบ คือ 

1. "ขนาด"

 - android:layout_width = "100px"

 - android:layout_height = "120px"

2. "wrap_content" ขนาดของวัตถุจะมีขนาดเท่ากับ text ของเรา

 - android:layout_width = "wrap_content"

 - android:layout_height = "wrap_content"

3. "fill_parent" ขนาดของวัตถุจะมีขนาดเท่ากับสิ่งที่วัตถุอยู่ เช่น ถ้าปุ่มอยู่บนจอ ขนาดก็จะเท่าจอ

 - android:layout_width = "fill_parent"

 - android:layout_height = "fill_parent"

ขอจบ Entry นี้ไว้เพียงเท่านี้ก่อน ไม่อยากยาวก่อน Entry หน้าเราจะมาต่อกันเรื่อง Coding ครับ