Layout บน android เป็นอย่างไร ?
อยากทำ ปุ่มกด การวาง Layout บน android แบบในรูปข้างล่าง จะทำอย่างไรครับ
![]() |
เปิด eclipse ขึ้นมาเลยครับ
ในการศึกษาเรื่อง การวาง Layout ของปุ่ม หรือ ข้อความ Text ใดๆ ต้องเรียนรู้เรื่อง
- Linear Layout
- Absolute Layout
วันนี้เราจะมาเรียนเรื่อง Absolute Layout กัน
![]() |
เปิด Project Android ใหม่ โดยไปที่ File > New > Android Project
![]() |
ตรง Project name ผมใช้ชื่อ learn android
สังเกตุ ตัวโปรแกรม eclipse จะสร้างโฟวเดอร์ learn android ที่ workspace ของเรา
![]() |
Build Target ผมเลือกที่ Android 1.6 มี API Level 4 เพราะ Emulator ที่เราทำใช้ android 1.6
application name ผมใช้ learn android
package name ผมใช้ learn.android
creat activity ใช้ learnandroid
Min SDK version 4 เพราะหมายถึง android 1.6
![]() |
เมื่อ Finish เราจะพบ โฟวเดอร์ learn android ซึ่งภายในประกอบไปด้วย โฟวเดอร์ และ ไฟร์ ต่อไปนี้
![]() |
เข้าไปเปิด Source Code ของเราที่ learnandroid.java
![]() |
![]() |
แต่ทั้งนี้ทั้งนั้น การจัดการ Layout จะใช้ไฟร์ main.xml ที่อยู่ใน res > layout ลองดับเปิ้ลคลิดดู
![]() |
เข้าดูใน Mode Layout
![]() |
จะได้แบบนี้
![]() |
คลิกที่ Max นะครับจะได้ทำงานได้สะดวก
![]() |
จะมีหน้าตาแบบนี้
![]() |
หมุนจอของ android ให้เป็น Portrait
![]() |
จะเป็นแบบนี้
![]() |
เปิด Outline ออกมา ไปที่ Window > Show View > Outline
![]() |
เมื่อเปิด Outline จะเห็น LinerLayout ให้ Remove ออกไปซะ เพราะเราจะเรียนรู้เรื่อง Absolute Layout
![]() |
![]() |
เมื่อลบ Linear Layout จะได้หน้าว่างๆแบบนี้
![]() |
แดรกแล้วปล่อย Absolute Layout
![]() |
จะได้แบบนี้
![]() |
ผมจะลอง ดึง Text View ออกมา ไม่ต้องกังวล drop ผิดตำแหน่งนะครับเพราะเราสามารถ ปรับได้ทีหลัง
![]() |
ลองดึง Button บ้าง แล้ว Drop ไป
![]() |
ต่อไปเป็นขั้นตอนการปรับ ตำแหน่ง และ เปลี่ยนข้อความ
ต้องเปิด Properties ออกมา โดยไปที่ Show View as Fast View ที่อยู่มุมซ้ายล่าง แล้ว เลือก Other
![]() |
เปิดโฟวเดอร์ General เลือก Properties
![]() |
ลองปรับ Text ก่อน
![]() |
ต่อมาก็ตำแหน่ง
![]() |
ทำที่ Button เหมือนกัน
![]() |
![]() |
เสร็จแล้วจะได้หน้าตาแบบนี้
![]() |
อันนี้เป็น Code ที่ได้
![]() |
เปิด emulator แล้วลองสั่ง Run ดู ก็จะได้แบบนี้
![]() |
refer to
.http://androidthai.in.th/developer/56-layout-on-android.html
.
No comments:
Post a Comment