อยู่ในระหว่างการปรับปรุงเนื้อหา

ต่อจากบทความแรกนะครับ เนื่องจากเนื้อหายาวเหยียดเกินไป (โดยเฉพาะภาพ) จึงขอแยกบทความไว้ดีกว่าเพื่อไม่ให้แต่ละบทความต้องดาวน์โหลดเยอะเกินจำเป็น
ซึ่งตอนที่ 2 นี้ก็เป็นการอธิบายเกี่ยวกับหน้าต่างในโปรแกรม Android Studio หลังจากสร้างโปรเจคขึ้นมาใหม่หรือว่าเอาของเก่ามาเปิดนะครับ
อย่างแรกสุดที่เจ้าของบล็อกอยากจะให้รู้ก่อนเลยก็คือตำแหน่งของเครื่องมือหรือTool เนื่องจาก IntelliJ IDEA สามารถเคลื่อนย้ายตำแหน่งของ Tool ได้ ดังนั้นจึงอย่ายึดติดกับตำแหน่งมากนัก เพราะมันสามารถปรับได้ตามใจผู้ใช้ด้วยการคลิกลากเพื่อย้ายตำแหน่ง

โดยตำแหน่งของ Tool เหล่านี้สามารถอยู่ชิดมุมของ Workspace ได้ทั้งหมด 8 แบบ
1. ชิดบนฝั่งซ้ายและขวา
2. ฃิดล่างฝั่งซ้ายและขวา
3. ชิดขวาฝั่งบนและล่าง
4. ชิดซ้ายฝั่งบนและล่าง
ซึ่งเครื่องมือเหล่านี้จะช่วยอำนวยความสะดวกในการพัฒนาแอพฯ ซึ่งมือใหม่อาจจะได้ใช้แค่บางอันเท่านั้น
และถ้าเครื่องมือเหล่านี้มีบางตัวหายไปเพราะเผลอไปปิดหรือยังไม่ได้เปิด ก็สามารถเข้าไปเลือกแสดงเครื่องมือได้ที่ View > Tool Windows จะมีเครื่องมือต่างๆให้เลือก

หรือจะเปิดโดยคลิกขวาที่ปุ่มมุมซ้ายล่างของโปรแกรม Android Studio ก็ได้เช่นกัน

โดยเครื่องมือแต่ละตัวทำหน้าที่ต่างกันออกไปดังนี้
เป็นหน้าต่างแสดงข้อความที่มาจากการทำงานของ Gradle ในเวลาที่สั่งให้ Build Gradle

ในกรณีที่ Gradle มีข้อผิดพลาดก็จะแสดงให้เห็นในนี้เช่นกัน

หน้าต่างแสดงไฟล์ข้อมูลที่อยู่ในโปรเจค

สามารถปรับเปลี่ยนรูปแบบการแสดงผลของโปรเจคได้ด้วยการกดที่ปุ่มมุมซ้ายบนของหน้าต่าง

Android เป็นรูปแบบการแสดงโปรเจคของแอนดรอยด์โดยเฉพาะ โดยจะแสดงข้อมูลในโปรเจคแยกออกมาเป็นสัดส่วน และจะแสดงเฉพาะไฟล์สำคัญๆเท่านั้น เช่น Java Source, Resource, Asset, Manifest หรือ Gradle เป็นต้น (ดูภาพประกอบข้างบน)
Project เป็นรูปแบบการแสดงโปรเจคโดยอิงไฟล์ข้อมูลตาม Path ที่อยู่ในเครื่องจริงๆ

Package แสดงเฉพาะโฟลเดอร์ที่เป็น Package เท่านั้น (มีวงกลมสีฟ้าอยู่ในรูปโฟลเดอร์)

Project File แสดงตามโฟลเดอร์ที่เป็น Project และ Module เท่านั้น (มีสี่เหลียมสีฟ้าอยู่มุมขวาล่างของโฟลเดอร์)

Problems แสดงเฉพาะไฟล์ที่มี Syntax Error หรือโค๊ดโปรแกรมในไฟล์นั้นๆไม่ถูกต้อง

Production แสดงเฉพาะไฟล์ที่เป็น Production เท่านั้น จะไม่แสดงไฟล์ที่เป็นส่วนของ Test

Tests แสดงเฉพาะไฟล์ที่อยู่ในส่วนของ Testing เท่านั้น

ซึ่งการเลือกรูปแบบการแสดงไฟล์จะช่วยให้ผู้ที่หลงเข้ามาอ่านสามารถจัดการไฟล์ได้สะดวกขึ้น ตัดไฟล์ที่ไม่จำเป็นออกไป แล้วโฟกัสไปที่ไฟล์หลักๆ
เป็นหน้าต่างที่ช่วยให้สามารถดู Favorite, Bookmarks และ Breakpoints ที่สร้างไว้ทั้งหมดในโปรเจค

Breakpoints จะมีอยู่ด้วยกันหลักๆ 3 แบบ โดยจะมีสัญลักษณ์แตกต่างกันออกไปดังนี้
* Method Breakpoints สร้าง Breakpoints ที่ Method ใดๆ โดยจะมีสัญลักษณ์สี่เหลี่ยมอยู่ที่มุมทั้ง 4
* Temporary Line Breakpoints สร้าง Breakpoints ชั่วคราวสำหรับบรรทัดใดๆ โดยจะมีหมายเลขแสดงอยู่
* Line Breakpoints สร้าง Breakpoints สำหรับบรรทัดใดๆ

การเพิ่ม Breakpoints สามารถเพิ่มได้ด้วยการเลือกบรรทัดที่ต้องการแล้วเลือกไปที่
* Run > Toggle Line Breakpoints สำหรับ Line Breakpoints
* Run > Toggle Temporary Line Breakpoints สำหรับ Temporary Line Breakpoints
* Run > Toggle Method Breakpoints สำหรับ Method Breakpoints

และสามารถเพิ่ม Line Breakpoints และ Method Breakpoints อีกวิธีแบบง่ายๆด้วยการคลิกแถบซ้ายมือของหน้าต่างโค๊ด (ตำแหน่งที่แสดง Breakpoints นั่นเอง)

Bookmarks ใช้สำหรับ Memo ตำแหน่งโค๊ดที่ต้องการ แต่ไม่ต้องการกำหนดเป็น Breakpoints สามารถสร้างได้ง่ายๆด้วยการเลือกบรรทัดที่ต้องการ Bookmark แล้วเลือกไปที่
* Navigate > Bookmarks > Toggle Bookmark สำหรับการ Bookmark แบบปกติ โดยจะมีสัญลักษณ์เป็นเครื่องหมายถูกสีขาว
* Navigator > Bookmarks > Toggle Bookmark with Minemonic สำหรับการ Bookmark โดยกำหนดสัญลักษณ์ตัวอักษรให้กับ Bookmark นั้นๆด้วย


สำหรับ Bookmark with Minemonic จะสามารถกำหนดสัญลักษณ์ตัวอักษรที่ต้องการได้ด้วย โดยจะมีหน้าต่างเล็กๆแสดงขึ้นมาให้เลือก

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

แล้วตั้งชื่อ Favorite ได้ตามใจชอบ

เมื่อต้องการเพิ่มไฟล์เข้าไปอยู่ใน Favorite ใดๆให้เลือกไฟล์ที่ต้องการแล้วเลือกไปที่ File > Add to Favorite แล้วเลือก Favorite ที่ต้องการเพิ่ม

หรือจะให้ง่ายกว่านั้นก็คลิกขวาที่ไฟล์นั้นๆซะเลย แล้วเลือก Add to Favorite แล้วเลือก Favorite ที่ต้องการเพิ่ม

ไฟล์ที่เพิ่มลงไปเมื่อครู่ก็จะแสดงอยู่ใน Favorite ที่ได้สร้างขึ้นมา

หน้าต่างสำหรับแสดงข้อความจากการทำงานของ ADB เมื่อทำการติดตั้งแอพฯลงในอุปกรณ์แอนดรอยด์

หน้าต่างสำหรับแสดงการทำงานเมื่อทำการ Debug โดยจะมีหน้าต่างย่อยอยู่ในนี้ด้วยกัน 3 หน้าต่าง
Debugger สำหรับแสดงผลการ Debug ในแต่ละ Breakpoints

Console สำหรับแสดงการทำงานของ ADB

Logcat สำหรับแสดง Log ที่เกิดจากแอพฯ

สำหรับเครื่องมือ Debug เจ้าของบล็อกขอข้ามไปดีกว่าเนื่องจากไม่ได้ใช้มากนัก และน่าจะทำเป็นบทความแยกแทน
เครื่องมือตัวนี้แท้จริงแล้วมันก็คือ Dalvik Debug Monitor Server หรือ DDMS นั่นเอง โดยจะมีหน้าต่างที่อิงมาจาก DDMS เยอะแยะมากมาย โดยเฉพาะ LogCat

และอีกหน้าต่างจะเป็น Log การทำงานของ ADB เท่านั้น

สำหรับแถบเมนูที่อยู่ทางซ้ายมือจะประกอบไปด้วย

Screen Capture บันทึกภาพหน้าจอเป็นไฟล์ภาพนิ่ง
Screen Record บันทึกภาพหน้าจอเป็นแบบวีดีโอ
System Information Dump ข้อมูลของตัวเครื่อง ณ ตอนนั้นๆออกมาแสดงเป็น .txt


Terminate Application ปิดแอพฯที่รันทดสอบอยู่
Initiate GB สั่งให้ Garbage Collection ทำงาน
Dump Java Heap Dump ข้อมูล Heap ใน Java ออกมาเป็นไฟล์ .hprof
Start Method Tracing เก็บข้อมูลการทำงานของ Method ต่างๆภายในแอพฯ (จนกว่าจะกดปุ่มนี้อีกครั้ง)

Start Allocation Tracing เก็บบันทึกการใช้พื้นที่หน่วยความจำโปรแกรมทั้งหมดในแอพ (จนกว่าจะกดปุ่มนี้อีกครั้ง)

ส่วนของ LogCat เดี๋ยวเจ้าของบล็อกขออธิบายแยกบทความอีกที
หน้าต่างแสดงโครงสร้างของไฟล์นั้นๆว่ามีคลาสอะไร มีเมธอดอะไรหรือตัวแปรอะไรบ้าง ซึ่งสะดวกมากเวลาที่เขียนงานใหญ่ๆซักตัว


หน้าต่างสำหรับจัดการ Local Repositories โดยเฉพาะ มีการแสดงไฟล์ที่มีการแก้ไขและไฟล์ที่เพิ่มเข้ามาใหม่ โดยเครื่องมือนี้จะสามารถใช้งานได้เมื่อโปรเจคนั้นๆมีการใช้ Version Control อยู่

และก็มีแถบเมนูที่จะเข้ามาช่วยให้อำนวยความสะดวกมากขึ้นอีก

Refresh เป็นการสั่งให้ Version Control ทำการ Refresh
Commit Changes ทำการ Commit ไฟล์ขึ้น Remote Repositories

Revert ทำการย้อนโค๊ดในไฟล์นั้นๆกลับไปยัง Commit ล่าสุด

New Changelist สร้าง Changelist ขึ้นมาเอง โดยสามารถกำหนดชื่อได้ตามใจชอบ

เมื่อต้องการย้ายไฟล์ไปที่ Changelist นั้นๆให้คลิกขวาที่ไฟล์ที่ต้องการแล้วเลือก Move to Another Changelist

เลือก Changelist ที่ต้องการย้าย

ไฟล์นั้นๆก็จะถูกย้ายไปอยู่ใน Changelist ที่ต้องการแล้ว

Delete Changelist ลบ Changelist ที่เลือก
Set Active Changelist กำหนดให้ Changelist ที่เลือกเป็น Active
Move to Another Changelist ย้ายไฟล์นั้นๆไปยัง Changelist ที่ต้องการ (อธิบายไปแล้ว)
Show Diff แสดงการเปลี่ยนแปลงของโค๊ดโดยเทียบกับ Commit ล่าสุดของไฟล์นั้นๆ

Expand All ขยาย Changelist เพื่อแสดงไฟล์ที่อยู่ในนั้นทั้งหมด

Collapse All ย่อ Changelist ทั้งหมด

Group by Directory แสดงไฟล์ตาม Directory (ในกรณีที่ไม่เลือก จะแสดงตาม Changelist)

Copy ก๊อปไฟล์ที่เลือก
Show Ignored Files แสดงไฟล์ที่ไม่ได้รวมอยู่ใน Repositories

Configure Ignored Files ตั้งค่าว่าจะให้ไฟล์ใดบ้างไม่รวมอยู่ใน Repositories

Preview Diff แสดงตัวอย่างของโค๊ดที่ถูกแก้ไขโดยเทียบกับ Commit ล่าสุด (แนะนำให้ Show Diff ไปเลย ดูง่ายกว่า)

Help เปิดหน้าเว็ปของ IntelliJ IDEA เพื่ออธิบายหน้าต่าง Changes
เครื่องมือนี้ไม่ได้ใช้นะครับ ดังนั้นจึงขอข้ามไปเลย
หน้าต่างกำหนดการ Build Project ว่าจะ Build ในรูปแบบใด เนื่องจาก Android Studio สามารถ Build ได้หลายๆแบบตามที่กำหนดคำสั่งไว้ใน build.gradle ซึ่่งโดยพื้นฐานจะมี 2 แบบ คือ debug กับ release (debug สำหรับทดสอบ ส่วน release สำหรับ Production)

หน้าต่างแสดงโปรเจคและโครงสร้างของโคีด จะคล้ายคลึงกับหน้าต่าง Project และ Structure ผสมกัน แต่ว่า Commander จะแบ่งหน้าต่างเป็นสองฝั่ง สามารถเปิดไฟล์ที่อยู่ในโปรเจคแยกกันได้ และสามารถดูโครงสร้างคำสั่งในไฟล์นั้นๆได้ทันที และเมื่อคลิกเลือกที่ไฟล์ใดๆก็จะเป็นการเปิดไฟล์ในทันที

เครื่องมือนี้ไม่ได้ใช้นะครับ ดังนั้นจึงขอข้ามไปเลย
หน้าต่างแสดงรายละเอียดของคำสั่งนั้นๆ ซึ่งปกติจะไม่มีให้เลือก แต่สามารถเปิดได้ด้วยการกด Ctrl + Shift + Space bar เมื่อเลือกที่คำสั่งนั้นๆ ก็จะมีหน้าต่างแสดงรายละเอียดของคำสั่งขึ้นมา

กดปุ่มรูปหมุดที่อยู่มุมขวาบนเพื่อให้หน้าต่าง Documentation อยู่ที่แถบเครื่องมือ

ทีนี้จะมีแถบ Documentation อยู่ที่แถบเครื่องมือแล้วก็จริง แต่หน้าต่างแสดงรายละเอียดยังลอยอยู่ ให้กดที่ปุ่มรูปเฟืองที่อยู่มุมขวาบนแล้วเลือกที่ Float Mode เพื่อเอาเครื่องหมายถูกต้องออกซะ (ปิด Floating Mode)

เพียงเท่านี้ก็จะได้หน้าต่าง Documentation ที่แถบเครื่องมือแล้ว

ถ้าไม่ชอบ และอยากกลับไปใช้แบบเก่า สามารถกดที่ปุ่มรูปกากบาทสีแดงในหน้าต่าง Documentation ได้เลย เพียงเท่านี้ก็จะกลับไปแสดงแบบเดิมแล้ว

หน้าต่างแสดง Log ของเหตุการณ์ต่างๆที่เกิดขึ้นใน Android Studio

หน้าต่างคำสั่ง Gradle โดยจะมีรายชื่อคำสั่งของ Gradle ให้เลือกเพื่อให้คำสั่งทำงานกับโปรเจคนั้นๆ

หน้าต่างแสดง Log การทำงานของ Gradle

ในกรณีที่ Build Gradle แล้วมีข้อผิดพลาดเกิดขึ้น จะสามารถรู้ได้ที่หน้าต่างนี้
หน้าต่างสำหรับพิมพ์ Command Line (เหมือน CMD นั่นเอง) ทำให้สามารถเรียกใช้งาน Command Line ได้ตามใจชอบ

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

หน้าต่างนี้ไม่ได้ใช้ ดังนั้นก็ขอข้ามไปนะครับ
ในที่สุดก็ครบแล้วววววว….น้ำตาแทบจะไหล….
ซึ่งจะเห็นว่า Android Studio นั้นยัดเครื่องมือมาให้เยอะมาก นี่แค่ส่วนหนึ่งเท่านั้นนะเนี่ย!!! ดังนั้นเจ้าของบล็อกก็จะทอดยาวไปเป็นบทความถัดไปแทนนะครับ เผื่อไม่ให้บทความนี้ยาวเกินจำเป็น และจะได้แยกเป็นหมวดหมู่ไปในตัวด้วย~