<< Go Back

Preview toolbar จะแสดงเมนู ต่างๆ ที่อยู่ข้างบนของโปรแกรม  หน้าที่การทำงานของแต่ละไอคอน

1. ปุ่ม Open ทำหน้าที่เปิดไฟล์โปรเจ็กต์
2. ปุ่ม Save ทำหน้าที่บันทึกโปรเจ็กต์
3. ปุ่ม Sync Project With Gradle File ทำหน้าที่ Bulid ตัว Gradle ของไฟล์คำสั่งต้นฉบับ (source code) ทั้งหมดของไฟล์แอนดรอยด์
4. ปุ่ม Synchronize ทำหน้าที่ซิงค์โปรเจ็กต์ ไฟล์ที่เพิ่มจากข้างนอก
5. ปุ่ม Back ทำหน้ากลับคำสั่ง
6. ปุ่ม Forward ทำหน้าที่ ไปข้างหน้า
7. ปุ่ม Make Project ทำหน้าที่สร้างหรือซ่อมแซมโปรเจ็กต์
8. ปุ่ม app ทำหน้าที่เลือกค่าในการเรียกแอพฯทำงาน (Run)
9. ปุ่ม Run ‘app’ ทำหน้าที่เรียกแอพฯทำงานเพื่อต้องการแสดงออกมาทำงหน้าจอ
10. ปุ่ม Instant Run ทำหน้าที่ให้คำสั่งที่เคย Run ไปก่อนนั้นครั้งหนึ่งไปก่อนไปแล้วจะแสดงสถานะสี
11. ปุ่ม Debug ทำหน้าที่เรียกคำสั่งทำงานที่ละส่วน โดยผ่านการ Debug
12. ปุ่ม Run ‘app’ with Coverage ทำหน้าที่เป็นปุ่มที่ควบคุมการครอบคลุมการเรียกแอพฯทำงาน
13. ปุ่ม Profile ‘app’ ทำหน้าที่ แสดงความเร็วของแอพฯโดยแบ่งป็นหัวข้อย่อยๆ
14. ปุ่ม Attach debugger to Android process ทำหน้าที่ แนบตัว Dedug ให้เข้ากับกระบวนการ ของระบบแอนดรอยด์
15. ปุ่ม Stop ทำหน้าที่ปิดหยุดการทำงานที่กาลังทำงานอยู่
16. ปุ่ม AVD Manager ทำหน้าที่แสดงเรียกโทรศัพท์ตัวจาลองหรือ emulator ของแอนดรอยด์
17. ปุ่ม Project Stucture ทำหน้าที่สร้างโครงสร้างของโปรเจ็กต์นี้ โดยจะมีการตั้งค่าต่างๆ Properties , Dependencise ไฟล์

โครงสร้างโปรเจ็กต์แอนดรอยด์มีลักษณะดังนี้

แอนดรอยด์สตูดิโอจะเปิดโปรเจ็กต์ MyFirstApp เพื่อให้ทำงานกับโปรเจ็กต์นี้ได้ทันที โดยหน้าต่าง โปรเจ็กต์ที่อยู่ทางซ้ายจะแสดงโครงสร้าของโปรเจ็กต์ว่า ประกอบไปด้วยไฟล์หรือโฟลเดอร์อะไรบ้าง ซึ่งสามารถปรับการแสดงผลได้หลายมุมมอง ดีฟอลค์จะเป็นมุมมองแอนดรอยด์ (ตามรูป) มุมมองแอนดรอยด์จะแสดงส่วนประกอบของโปรเจ็กต์ในรูปแบบที่ช่วยให้เราทำงานพื้นฐานต่างๆ ในการพัฒนาแอพแอนดรอยด์ที่ได้สะดวกที่สุด โดยแบ่งส่วนประกอบของโปรเจ็กต์ เป็น 3 ส่วนคือ
• Manifest file อยู่ใน Folder Manifests
• Sorce code ภาษา java อยู่ใน Folder java
• ไพล์รีซอร์สต่างๆ เช่น layout file , รูปภาพ , ค่า String อยู่ใน folder Res

โดยจากค่าเริ่มต้น ในหน้าจอแอนดรอยด์สตูดิโอจะแสดงมุมมองนี้ซึ่งไม่ได้สะท้อนลาดับชั้นของไฟล์ในดิสก์ แต่จัดระเบียบตาม โมดูล และประเภทของไฟล์ เพื่อให้ง่ายต่อการนำทางของไฟล์ที่ดูเยอะๆ ระหว่าง ไฟลเริ่มต้น ของโปรเจ็กต์ ,การซ่อนไฟล์ , หรือไฟล์บางอย่างที่ไม่ได้ใช้กันทั่วไป ในการเปลี่ยนแปลงทางโครงสร้างบางอย่าง เมื่อเปรียบเทียบโครงสร้างของไฟล์ไปถึงในdisk มีดังต่อไปนี้
• การแสดงไฟล์ทั้งหมดของโปรเจ็กต์ ในการ build ไฟล์ โดยใช้องค์ประกอบ level Gradle Script ระดับบนสุด
• แสดงทั้งหมด ในไฟล์ manifest ในกลุ่มแต่และ module ออกมาเป็น level group (เมื่อมีข้อแตกต่างของไฟล์ manifest นั้น ก็จะแจกต่างที่ผลิตภัณฑ์ที่แตกต่างกันและชนิดของการสร้างด้วย)
• แสดงการในทรัพยากรทั้งหมด ในกลุ่มเดียวกัน แทนที่จะเป็น folder แยกต่างหากสำหรับ การแยก Resource ไฟล์ ตัวอย่างเช่น เครื่องทุกรุ่นที่มีความหนาแน่น ของไอคอน (icon) ที่เรียกใช้ จะพบว่ามีผลด้วยกัน

ภายในโมดูลแอพฯแอนดรอยด์แต่ละไฟล์จะปรากฏในกลุ่มต่อไปนี้:
- module-name/
- build/ บรรจุการ build คำสั่งโปรแกรม
- libs/ บรรจุ libraries
- src/ บรรจุส่วนที่เป็นคำสั่งต้นฉบับทั้งหมด และการอ้างresource files จากโมดูลนั้น
- androidTest/ บรรจุคำสั่งสำหรับการ test ที่รันบนอุปกรณ์แอนดรอยด์
- main/ โปรแกรม และรีซอร์สที่ใช้ร่วมกันทั้งหมด การสร้างตัวแปร (ไฟล์สำหรับตัวแปรสร้างอื่น ๆ อยู่ในไดเร็กทอรีของพี่น้องเช่น src / debug / สำหรับประเภทการสร้างการแก้ปัญหา)
- AndroidManifest.xml อธิบายลักษณะของแอพพลิเคชันและส่วนประกอบแต่ละส่วน สำหรับข้อมูลเพิ่มเติม https://developer.android.com/guide/topics/manifest/manifest-intro.html.
- java/ บรรจุ java sorcecode
- jni/ บรรจุ native โดยใช้ Java Native Interface (JNI) สำหรับข้อมูลเพิ่มเติมhttps://developer.android.com/ndk/index.html
- gen/ บรรจุ java ไฟล์ ในการ generated จาก android studio , เช่นไฟล์ R.java และ การ interfaces ของการสร้าง AIDL ไฟล์ - res/ บรรจุเช่นไฟล์ที่สามารถวาดได้, ไฟล์เลย์เอาต์และสตริง UI ดูแหล่งข้อมูลแอ็พพลิเคชัน
- assets/ บรรจุไฟล์ ที่จะรวบรวมไว้ในไฟล์. apk ตามที่เป็น โดยสามารถนำทางตัวไดเรกทอรีนี้ได้เช่นเดียวกับระบบไฟล์ทั่วไปที่ใช้ URI และอ่านไฟล์เป็นสตรีมไบต์โดยใช้ AssetManager ตัวอย่างเช่น เป็นตาแหน่งที่ดีสำหรับพื้นผิวและข้อมูลเกม และ อื่นๆ
- test/ บรรจุไฟล์ ที่ ประกอบด้วย code สำหรับการทดสอบในเครื่องที่รันบน JVM โฮสต์ของผู้ใช้
build.gradle (module) การกำหนดโครงสร้างการสร้างเฉพาะโมดูล
build.gradle (project) การกำหนดสร้างการกำหนดค่าที่นำไปใช้กับโมดูลทั้งหมด โดยไฟล์นี้เป็นหนึ่งในโครงการดังนั้นจึงควรรักษาไว้ในการควบคุมการแก้ไขด้วยรหัสแหล่งอื่น ๆ ทั้งหมด สำหรับข้อมูลเกี่ยวกับการสร้างไฟล์อื่น ๆ

แผ่นพาเล็ต

พาเล็ตหรือเครื่องมือ Widgets Element ต่าง ๆ หลังจากที่ได้สร้างโปรเจ็กต์ จะปรากฏ Toolbox ที่เป็นพาเล็ตมาด้วย ซึ่งในแต่ละพาเล็ตจะมีการแบ่งย่อยของแต่ล่ะรายการไว้เป็นหมวดหมู่ต่าง ๆ เพื่อความสะดวกในการเรียกใช้งาน เช่น ที่เป็น Form Widgets ใช้สำหรับออกแบบพวก Label , Button , Checkbox , Radio หรือ Text Fields เป็น Element รายการของพวก Input Text ต่าง ๆ และยังมีอีกหลาย Category ที่จะสามารถนำมาใช้กับโปรเจ็กต์ได้ ตามภาพ

ในพาเล็ตมีองค์ประกอบหลายรูปแบบให้เลือกใช้ โดยให้เราทำการหาโฟลเดอร์ ชื่อ Legacy และเลือก ListView แล้วลากมาไว้บนหน้าแอพฯ

ปุ่มที่สำคัญสำหรับ Layout Preview คือปุ่ม Design และปุ่ม Text ปุ่ม Design จะอยู่ถัดจากปุ่ม Textใต้โปรแกรมแก้ไขข้อความ เมื่อเราสร้างเค้าโครงหน้าจอ (UI) แล้วกำหนดค่าต่างๆให้กับวิวที่ใช้ ตัวอย่างเช่น android: text = "Test Test" หากต้องการดูว่าจะมีลักษณะตรงกับรูปแบบที่ต้องการหรือไม่ จะต้องเรียกใช้แอพฯทำงานเพื่อดูว่าหน้าจอมีลักษณะอย่างไร

เราสามารถใช้ปุ่มแสดงตัวอย่างที่มุมขวาบนเพื่อเพิ่มหน้าต่างแสดงตัวอย่างถัดจากโค้ด XML ที่เรียกว่า Text:

ถ้าไม่รู้ว่า ตัว Preview อยู่ตรง สามารถเลือกได้ที่ : View -> Tool Windows -> Preview

จากที่ได้กล่าวมาข้างต้นทำให้การสร้างเค้าโครง layout ได้สะดวกมากขึ้น เราจะเห็นรูปแบบหน้าจอที่ได้รับการออกแบบตามที่กำหนดไว้ในไฟล์ XML โดยต้องเลือกอุปกรณ์เพื่อดูตัวอย่างหน้าจอแอพฯ โดยการกำหนดค่าที่กำหนดไว้ล่วงหน้าจากเมนูแบบเลื่อนลงอุปกรณ์หรือเลือก 'เพิ่มคำจำกัดความอุปกรณ์' และสร้างการกำหนดค่าใหม่ ตามภาพการเลือก Device ด้านล่างนี้

หากต้องการสลับระหว่างโหมดแนวนอนและแนวตั้งให้คลิกไอคอน "'Oriantation for Preview' การกำหนดค่า" ในมุมซ้ายมือของหน้าต่างแสดงตัวอย่างและเลือก "สลับไปยังพื้นที่จัดวาง" หรือ "เปลี่ยนเป็นรูปแบบ" ตามรูปด้านล่าง

การแสดงพาเล็ต
ตัวอย่างรูปแบบตัวอย่างหน้าจอจะแสดงรูปแบบเป็นปัจจุบันและถูกต้อง ในแอนดรอยด์สตูดิโอ โดยการเปิดไฟล์รูปแบบ XML และเลือกแท็บ Design ที่อยู่ภายใต้หน้าต่างการแก้ไข จากที่เลือกแท็บ Palette จะอยู่ทางด้านซ้ายมือของแอนดรอยด์สตูดิโอ ซึ่งสามารถเริ่มต้นการออกแบบหน้าจอแอพฯโดยใช้การลากและวางตามที่ต้องการ

Component Tree คือ มุมมองแอนดรอยด์แบบกลุ่มและโครงร่าง แสดงภาพรวมของลำดับชั้นของการออกแบบส่วนติดต่อผู้ใช้ การเลือกองค์ประกอบจากโครงสร้างส่วนประกอบจะทำให้มุมมองที่สอดคล้องกันในเลย์เอาต์ที่ถูกเลือก ในทำนองเดียวกันการเลือกมุมมองจากเค้าโครงหน้าจออุปกรณ์ จะเป็นการเลือกมุมมองที่อยู่ในลำดับชั้นของโครงสร้างคอมโพเนนต์ Component Ids ฟังก์ชั่นวิธีการ changeColor จะต้องกำหนด ID ไปที่ Layout และ TextView โดยค่าเริ่มต้น “Hello World” วัตถุ TextView ไม่ได้มี ID และไม่ไม่เค้าโครงสร้าง (ซึ่งเป็น RelativeLayout หมายความว่ามันจะช่วยให้เครื่องมือและส่วนประกอบอื่น ๆ จะต้องสอดคล้องสัมพันธ์กับแต่ละอื่น ๆ ) เลือก TextView ในกล่องบนขวา ที่เรียกว่า “Component Tree” โดยจะเลื่อนผ่านคุณสมบัติของมันจนกว่าจะเห็น“id” เปลี่ยนรหัสเป็น“ข้อความ” ทำสิ่งเดียวกันสำหรับองค์ประกอบ RelativeLayout แต่ตั้งรหัสในการ “รูปแบบ” คุณควรจะสามารถที่จะเห็น ID ที่สอดคล้องกันถัดจากแต่ละองค์ประกอบลักษณะคล้ายๆ ต้นไม้ตัวแทน ออกไปเพื่อให้ง่ายต่อการออกแบบโครงสร้าง

ลองเปลี่ยนไปใช้วิธี changeColor ที่เกิดขึ้นจริง ไปที่แท็บ MainActivity.java ในแท็บ จะเห็นวิธีการที่เรียกว่า onCreate การดำเนินการนี้จะเริ่มทำงานเมื่อใดก็ตามที่แอพฯ เริ่มทำงานเป็นครั้งแรกโดยสร้างเมธอด "changeColor" หลังจากสร้าง onCreate เพิ่มข้อมูลต่อไปนี้ลงในคลาส MainActivity.java

public void changeColor(View view)
{
RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout);
TextView text = (TextView)findViewById(R.id.text);
layout.setBackgroundColor(Color.RED);
text.setText(R.string.PageIsRed);
}

การเปลี่ยนสีของรูปแบบเป็นสีแดงที่ครั้งหนึ่งเคยมีการคลิกปุ่ม นอกจากนี้ยังจะกำหนดวัตถุ TextView ที่จะพูดว่า “หน้า page เป็นสีแดง” สาหรับการเริ่มต้นแอนดรอยด์สตูดิโอ มีหลายสิ่งในบล็อกคำสั่งดังกล่าวข้างต้น โดยครั้งแรก ใน check method ที่เป็น signature : public void changeColor(View view). โดยแอนดรอยด์จะใช้ onClick ดูเป็นพารามิเตอร์หนึ่ง ถ้าเกิดมีการล้มเหลวแอปจะแสดงผิดพลาดออกมา ถัดไป จากเป็น findViewById() method นี่คือ วิธีการมาตรฐานในการเข้าถึงรูปแบบที่เรียกว่าวิว (view) (หรือวัตถุบนหน้าจอโปรแกรม) สำหรับการใช้งานในโปรแกรม

การกำหนดค่าแอตทริบิวต์ของวิว (View Attributes Assignment)
การกำหนดค่าแอททริบิวต์ของวิวสามารถทำได้จากหน้าต่างคุณลักษณะ (ด้านขวาของตัวแก้ไขเค้าโครง) ให้คุณเลือกการออกแบบแท็บที่ด้านล่างของหน้าต่าง เมื่อเลือกมุมมองที่หน้าต่างแอตทริบิวต์ที่แสดงให้เห็นต่อไปนี้ตามที่ระบุ
1. ดูการตรวจสอบที่มีการควบคุมสำหรับรูปแบบกว้าง / สูง, อัตรากำไรขั้นต้นและอคติ (ใช้ได้เฉพาะสำหรับมุมมองใน ConstraintLayout สาหรับข้อมูลเพิ่มเติมโปรดดูที่การสร้าง UI ที่ตอบสนองกับ ConstraintLayout
2. รายการของแอตทริบิวต์ทั่วไปสาหรับมุมมองที่เลือก เพื่อดูแอตทริบิวต์ที่พร้อมใช้งานทั้งหมด คลิกดูทั้งหมดคุณลักษณะที่ด้านบนของ หน้าต่าง
3. ส่วน Favorite แอตทริบิวต์ที่คุณเลือก ในการเพิ่มคุณลักษณะคลิกปุ่ม View all attributes ลักษณะทั้งหมด แล้วคลิกดาว ที่ปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปที่ด้านซ้ายของชื่อแอตทริบิวต์

ในการค้นหาคุณลักษณะเฉพาะมุมมองคลิก View all attributes ดูคุณลักษณะทั้งหมดแล้วคลิกค้นหาที่ด้านบนของหน้าต่าง Setting Properties แผงคุณสมบัติให้เข้าถึงการตั้งค่าพร้อมใช้งานสำหรับคอมโพเนนต์ที่เลือกในปัจจุบัน คลิกในแผง และพิมพ์อักขระจะเริ่มกระบวนการค้นหาเพื่อเน้น และเลือกที่ใกล้เคียงอักขระตัวพิมพ์ ในขณะที่แผงคุณสมบัติให้สามารถเข้าถึงรายการทั้งหมดของคุณสมบัติสำหรับ
คอมโพเนนต์ที่เลือกในปัจจุบัน สามารถเข้าถึงชุดย่อยของคุณสมบัติทั่วไปสามารถได้รับ โดยคลิกสองครั้งบนมุมมองส่วนประกอบในโครงร่าง คลิกสองครั้งบนคอมโพเนนต์ TextView เช่น ให้เข้าถึงคุณสมบัติของข้อความและรหัสสำหรับมุมมองดังแสดงในรูปที่

คุณสมบัติบางอย่าง ทั้งคุณสมบัติหลักและแผงเข้าประกอบด้วยปุ่มแสดงจุดสามจุด บ่งชี้ว่า การตั้งค่ากล่องโต้ตอบเพื่อช่วยในการเลือกค่าคุณสมบัติที่เหมาะสม แสดงกล่องโต้ตอบ เพียงแค่คลิกที่ปุ่ม จานวนตัวเลือกที่ถูกต้องแน่นอนมีที่พักจะนาเสนอแบบหล่นลงเมนู ที่เลือกอาจจะทา

โดยค่าเริ่มต้น คุณสมบัติแผงแสดงรายการเท่ากันมากที่สุดใช้คุณสมบัติ ถึงช่วงเต็มของคุณสมบัติสำหรับชนิดของส่วนประกอบที่เลือกในปัจจุบันได้ ด้วยการเปลี่ยนแผงเข้าโหมดผู้เชี่ยวชาญ โหมดนี้สามารถสลับเปิด และปิด โดยคลิกที่ปุ่มกรวยในแถบเครื่องมือตามที่ระบุ โดยลูกศรในรูป

ในกรณีส่วนใหญ่ การเข้าถึงคุณสมบัติโหมดผู้เชี่ยวชาญจะไม่ต้อง แม้ว่ามันจะมีประโยชน์ที่จะทราบของโหมดนี้ในกรณีที่คุณกาลังมองหาพักไม่อยู่ในโหมดมาตรฐาน

สำหรับส่วนสร้างการติดต่อกับผู้ใช้ถือว่าเป็นองค์ประกอบสำคัญที่สุดอย่างหนึ่งของแอพฯ สามารถสร้าง ได้ 2 วิธี คือการให้ เป็น code java และคำสั่งเอ็กเอ็มแอล (XML)
ในหัวข้อนี้จะแสดงวิธีแรกคือการใช้คาสั่งจาวา ก่อน เช่น

จากคำสั่งมีการสร้างออบเจ็ค TextView ขั้นมา จากนั้นเรียกใช้เมธอด setText เพื่อกำหนด ข้อความว่า “สวัสดีแอนดรอย์” ให้ใช้กับ textview นี้ ตามด้วยตัวอักษรใน textview เป็น 25 (หน่อยเป็น 25 dp) แล้วจึงเรียก method setContentView เพื่อนำ textview มากำหนดเป็น UI ของ Actvity เมื่อ Run Project MyFirstApp จะได้ดังรูป

โดยข้อความ “สวัสดีแอนดรอย์” ที่อยู่ถัดลงมาจาก title bar คือส่วนของ textview ซึ่งใช้ตัวอักษรขนาด 25 dp ตามที่ได้ระบุ ใน code java

นอกจากการใช้คาสั่งจาวา แล้วการสร้างหน้าจอแอพฯ ของแอนดรอยด์ยังสามารถใช้อีกวิธีหนึ่งคือ การสร้างโดยใช้ไฟล์เอกเอมแอล วิธีนี้จะช่วยให้ออกแบบและแก้ไขหน้าจอแอพฯได้ง่ายกว่าเนื่องจากหน้าจอแอพฯ จะถูกแยกออกมาจากตรรกะการทางานของแอพฯ สามารถเห็นหน้าตาได้คร่าวๆ ได้ตั้งแต่ตอนที่พัฒนา ส่วนการสร้างหน้าจอแอพฯด้วยคำสั่งจาวา มักจะให้วาดเมื่อต้องการวาดหน้าจอของแอพทั้งหมด หรือเรียกว่าการ Custom View

ไฟล์ XML ต่อไปนี้จะสร้างหน้าจอแอพฯที่เทียบเท่ากับการใช้คาสั่งจาวา ดังนี้

ไฟล์ XML ที่ใช้กาหนดหน้าจอแอพฯ (layout) ซึ่งประกอบด้วย อิลิเมนต์ (แท็ก) ที่มีชื่อเป็น view ชนิดต่างๆ โดยใช้ตัวอย่างนี้คือ มีอิลิเมนต์เดียวคือ Textview (แท็ก <view/> สามารถนำชื่อ class ใดก็ได้ที่สืบทอดจาก คลาส View มาระบุเป็นอิลิเมนต์ใน layout file ไม่ว่าจะเป็นคลาสที่แอนดรอยด์เตรียมไว้ให้ หรือ class ที่สร้างขึ้นเองโดยก็ตาม จะเห็นว่าการออกแบบ UI โดยใช้ XML Layout เป็นวิธีที่ง่ายกว่าการใช้ code java เนื่องจากโครงสร้างภาษา XML ประกอบด้วยอิลิเมนต์หรือแท็ก และภายในอิลิเมนต์จะมีแอตทริบิวต์ที่ใช้กำหนดคุณสมบัติต่างๆ ของอิลิเมนต์ ซึ่งคนที่เคยเขียนภาษา HTML มาก่อนจะสามารถคุ้นเคยกับภาษานี้ได้คล่องอยู่แล้ว ในที่นี้มีการระบุ แอตทิบิวต์ให้กับ textview ทั้ง 5 แอตทริบิวต์ ได้แก่ Xmlns : android แอตทริบิวต์นี้คือ XML namespace declaration ซึ่งบอกให้ android ว่ากำลังจะสร้างแอตทริบิว์พื้นฐานที่กำหนดไว้ในแอนดรอยด์
Android : layout_width กำหนดความกว้างของอิลิเมนต์ ในที่นี้กำหนดให้เป็นค่า wrap_content ซึ่งหมายความว่า การกำหนดความกว้างให้เข้ากับเนื้อหาในอิลิเมนต์
Android : layout_hieght กำหนดความสูงของอิลิเมนต์ ในที่นี้กำหนดให้เป็นค่า wrap_content ซึ่งหมายความว่า การกำหนดความสูงให้เข้ากับเนื้อหาในอิลิเมนต์
Android : text กำหนดข้อความของอิลิเมนต์
Android : textsize กำหนดขนาดตัวอักษรของข้อความในอิลิเมนต์

โดย layout จะอยู่โฟลเดอร์ rex\layout ของโปรเจ็กต์ ทั้งนี้จะโฟลเดอร์ res จะย่อมาจาก resorce โดยจะใช้เก็บไฟล์ซีซอร์สต่างๆที่ใช้ในแอพ เช่น รูปภาพ เสียง ค่า String และ layout เป็นต้น
กรณีสร้างโปรเจ็กต์ MyFirstApp ตอนแรก แอนดรอยด์สตูดิโอจะให้ layout ไฟล์ ที่ชื่อว่า activity_main.xml และกาหนดให้ไฟล์นี้เป็น UI ของ App โดยใช้ layout file สามารถทาตามขั้นตอนดังนี้ เพื่อสร้างไฟล์ UI จากไฟล์ activity_main.xml โดยให้คลิก tab ที่ activity_main.xml หรือหากเปิดไฟล์นี้แล้ว ก็ให้ไปที่ windows Project แล้วจากนั้นคลิกเข้าไปที่โฟลเดอร์ app > res > layout แล้วให้ดับเบิ้ลคลิกที่ไฟล์ activity_main.xml โดยสามารถเลือกมองได้ทั้งสองรูปแบบก็คือ
มุมมอง Design จะแสดงหน้าจอในการออกแบบ layout โดยสามารถคลิกลากวิวชนิดต่างๆ จาก Palette ทางซ้ายมาวางบนหน้าจอโดยนี้ได้โดยตรง

มุมมอง Text จะแสดงคำสั่ง XML ของ layout file โดยมี windows Preview จะอยู่ตรงตัวอย่างมุมขวา (ดังภาพ)

 

 

<< Go Back