[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 ครับ 

Popular posts from this blog

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น