BlogGang.com : : iamsem - Android สร้าง Project

ไม่ว่าใครจะตายหรือหายไปสุดท้ายโลกก็ยังหมุนต่ออยู่ดี(ฉะนั้นจงทำความดีเพื่อโลกใบนี้)

Group Blog

All Blogs

Android สร้าง Project

หลังจากลอง Import example project กันในตอนที่แล้ว ตอนนี้เราก็จะมาลอง New Project
พร้อมกับลองเขียนอะไรเล่น ๆ ดูนิด ๆ หน่อย ๆ เพื่อทำความคุ้นเคยกับ Android และ IDE กันซักหน่อย

เริ่มแรกก็เหมือนเดิมครับ File > New > Other > Android > Android Project แล้วกด Next

ซึ่งค่าที่จะใส่มีดังนี้

- Project Name : ใส่ชื่อ Project ที่เราต้องการลงไป
- Contents : เลือกเป็น Create new project in workspace
- Build Target : เลือก SDK ที่ต้องการใช้
- Application Name : อันนี้จะใช้ในการแสดงชื่อ App บนโทรศัพท์
- Package name : ใส่ชื่อ package
- Create Activity : ให้ใส่เครื่องหมายถูก พร้อมระบุชื่อ Activity ซึ่งก็คือ Main Class ที่จะใช้เริ่มต้นในการ Run Program
- Min SDK Version : มัน Default มาให้ก็คงค่าเดิมไว้ละกันครับ

เมื่อใส่ค่าเรียบร้อยแล้วก็กด "Finish"
________________________________________

เสร็จแล้ว Project จะปรากฎขึ้นใน Workspace เราลองดูก็จะมี File Activity ที่เราได้ใส่ไปในขั้นตอนแรกปรากฎขึ้นมา
ซึ่งใน source code ก็จะไม่มีอะไรเลยนอกจาก

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

จาก Source Code ก็ประมาณว่าให้นำ Layout ใน Class R ที่ set ไว้ขึ้นมาแสดง
ส่วน class R นั้น SDk เป็นคน Generate ขึ้นมา อย่าเพิ่งไปแก้ไขอะไรในตอนนี้
มาดูอีก file ที่น่าสนใจกันนะครับคือ main.xml
________________________________________

ลอง Double Click ที่ file main.xml ดู IDE จะเปิด Editor สำหรับการสร้าง Android Layout ขึ้นมาดังรูป
ประกอบด้วยส่วนต่าง ๆ 5 ส่วนดังนี้

ส่วนที่ 1. จะเป็น Layouts แบบต่าง ๆ ใช้ในการจัดวาง Views
ส่วนที่ 2. จะเป็น Views หรือพูดง่าย ๆ ก็จะเป็นพวก Textbox, Button, Datepicker อะไรพวกนี้
ส่วนที่ 3. จะเป็นหน้าจอซึ่งเราจะทำการลาก Layouts หรือ Views มาวางไว้ที่นี่
ส่วนที่ 4. จะบอกว่าในหน้าจอ มีอะไรแปะไว้อยู่บ้าง
ส่วนที่ 5. ก็จะเป็นการ Set ค่าต่างๆ ที่ใช้ในหน้าจอนี้

________________________________________

ไปดูที่ส่วนที่ 3 จะเห็นว่ามีคำว่า Hello World, Test Android อยู่ ซึ่งเป็นค่า Default ที่ IDE สร้างมาให้
และถ้าดูจากส่วนที่ 4 จะเห็นได้ชัดเจนขึ้นว่า Layout ที่ใช้จะเป็น LinearLayout พร้อมกับมี TextView วางแปะอยู่อันนึง

ซึ่งผมไม่ชอบ LinearLayout เพราะมันวาง Views ไม่ได้ดั่งใจ ผมก็เลยลบทิ้งทั้งหมด
________________________________________

หลังจากนั้นผมก็ลาก AbsoluteLayout มาไว้ตรงพื้นที่สีเทาว่าง ๆ ซึ่งเคยเป็นหน้าจอที่ลบไป
แล้วก็ลาก TextView กับ Button มาอย่างละ 1 อัน สังเกตุได้ว่าการวาง Views บน AbsoluteLayout
จะง่ายดายมากเพราะเราสามารถวางไว้ตรงไหนก็ได้ตามใจ (แต่ถ้ากดปล่อยแล้วจะเลื่อนใหม่ไม่ได้นะครับ)
คราวนี้หน้าจอเราก็จะมี TextView กับ Button อยู่อย่างละ 1 ชิ้นแล้วครับ
________________________________________

ลอง Click ที่ View ซักอันนึง ในรูปผม Click ที่ TextView แล้วดู Tab Properties ข้างล่าง
จะเห็นว่ามี Property ของ View หลายอย่างที่สามารถ Set ได้
ผมได้ลองไปเปลี่ยน Property Text ดูให้เป็นคำอื่น และถ้าอยากเปลี่ยนตำแหน่งของ Text View
ก็สามารถไป Set ที่ Layout X, Layout Y ได้ครับ ถ้าความกว้างก็ width
ส่วน Property อื่น ๆ ลองเล่นดูครับ
________________________________________

เสร็จแล้วลอง Run ดูครับจะเห็นว่า Emulator จะโชว์หน้าจอตามที่เราได้ Set ไว้
ถ้า Run ได้แล้วก็ลองเล่น Layout ตัวอื่น หรือ View ตัวอื่นดูบ้างครับจะได้รู้ว่าตัวไหนเป็นอย่างไร
________________________________________

เสร็จแล้ว Project จะปรากฎขึ้นใน Workspace เราลองดูก็จะมี File Activity ที่เราได้ใส่ไปในขั้นตอนแรกปรากฎขึ้นมา

ซึ่งใน source code ก็จะไม่มีอะไรเลยนอกจาก

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

จาก Source Code ก็ประมาณว่าให้นำ Layout ใน Class R ที่ set ไว้ขึ้นมาแสดง
ส่วน class R นั้น SDk เป็นคน Generate ขึ้นมา อย่าเพิ่งไปแก้ไขอะไรในตอนนี้
มาดูอีก file ที่น่าสนใจกันนะครับคือ main.xml

ลอง Double Click ที่ file main.xml ดู IDE จะเปิด Editor สำหรับการสร้าง Android Layout ขึ้นมาดังรูป
ประกอบด้วยส่วนต่าง ๆ 5 ส่วนดังนี้

ส่วนที่ 1. จะเป็น Layouts แบบต่าง ๆ ใช้ในการจัดวาง Views
ส่วนที่ 2. จะเป็น Views หรือพูดง่าย ๆ ก็จะเป็นพวก Textbox, Button, Datepicker อะไรพวกนี้
ส่วนที่ 3. จะเป็นหน้าจอซึ่งเราจะทำการลาก Layouts หรือ Views มาวางไว้ที่นี่
ส่วนที่ 4. จะบอกว่าในหน้าจอ มีอะไรแปะไว้อยู่บ้าง
ส่วนที่ 5. ก็จะเป็นการ Set ค่าต่างๆ ที่ใช้ในหน้าจอนี้

ไปดูที่ส่วนที่ 3 จะเห็นว่ามีคำว่า Hello World, Test Android อยู่ ซึ่งเป็นค่า Default ที่ IDE สร้างมาให้
และถ้าดูจากส่วนที่ 4 จะเห็นได้ชัดเจนขึ้นว่า Layout ที่ใช้จะเป็น LinearLayout พร้อมกับมี TextView วางแปะอยู่อันนึง

ซึ่งผมไม่ชอบ LinearLayout เพราะมันวาง Views ไม่ได้ดั่งใจ ผมก็เลยลบทิ้งทั้งหมด

หลังจากนั้นผมก็ลาก AbsoluteLayout มาไว้ตรงพื้นที่สีเทาว่าง ๆ ซึ่งเคยเป็นหน้าจอที่ลบไป
แล้วก็ลาก TextView กับ Button มาอย่างละ 1 อัน สังเกตุได้ว่าการวาง Views บน AbsoluteLayout
จะง่ายดายมากเพราะเราสามารถวางไว้ตรงไหนก็ได้ตามใจ (แต่ถ้ากดปล่อยแล้วจะเลื่อนใหม่ไม่ได้นะครับ)
คราวนี้หน้าจอเราก็จะมี TextView กับ Button อยู่อย่างละ 1 ชิ้นแล้วครับ

ลอง Click ที่ View ซักอันนึง ในรูปผม Click ที่ TextView แล้วดู Tab Properties ข้างล่าง
จะเห็นว่ามี Property ของ View หลายอย่างที่สามารถ Set ได้
ผมได้ลองไปเปลี่ยน Property Text ดูให้เป็นคำอื่น และถ้าอยากเปลี่ยนตำแหน่งของ Text View
ก็สามารถไป Set ที่ Layout X, Layout Y ได้ครับ ถ้าความกว้างก็ width
ส่วน Property อื่น ๆ ลองเล่นดูครับ

เสร็จแล้วลอง Run ดูครับจะเห็นว่า Emulator จะโชว์หน้าจอตามที่เราได้ Set ไว้
ถ้า Run ได้แล้วก็ลองเล่น Layout ตัวอื่น หรือ View ตัวอื่นดูบ้างครับจะได้รู้ว่าตัวไหนเป็นอย่างไร