ลองทำ Xcode Preview เปลี่ยนโค้ดให้เป็น UI ในพริบตา

Xcode Preview ตัวช่วยใหม่ที่จะเปลี่ยนโค้ดของคุณให้เป็น UI เสมือนจริง แถมกดเล่นได้ด้วยนะ !!

Xcode Preview คืออะไร ?

Xcode Preview ก็คือการแสดงโค้ดที่เราเขียนในไฟล์ให้ออกมาแสดงเป็น UI นั่นเอง! ซึ่งจะทำให้เราเห็นโค้ดที่เราเขียนใด้ในทันที แบบ Realtime คล้ายๆกับการเขียน Flutter นั่นแหละ โดยอันดับแรกเราจะต้องสร้าง Object ที่เป็น UI เตรียมไว้ในโค้ดของเราก่อน จากนั้นเราถึงนำ Object เหล่านี้จัดวางตามที่เราต้องการ

ข้อดีของ Xcode Preview

มันสามารถช่วยแสดงโค้ดที่เราเขียนได้ในทันที โดยที่เราไม่ต้องสั่ง Run ใน Simulator ซึ่งมันจะช่วยลดระยะเวลาการทำพัฒนาลง เพราะเราสมมุติว่าหน้าที่เราทำอยู่ลึกมากๆ เราจะไม่ต้องเสียเวลาเพื่อกดปุ่มต่างๆเพื่อไปยังหน้านั้นเลย

ต่างจาก Storyboard ยังไง?

Storyboard เป็นการแสดง Preview จาก UI ต่างๆที่เราดึงมาวาง ต่างจาก Xcode Preview ที่เป็นการแสดง UI จากโค้ดโดยตรงเลย ซึ่งมาถึงขั้นตอนนี้หลายๆคนก็อาจจะไม่ถนัดกับการสร้าง UI จากโค้ด เพราะการเขียนโค้ดเพื่อจัด Layout Constraint นั้น ค่อนข้างจะเยอะ และทำให้โค้ดเรารกมากๆ แต่เดี๋ยวก่อน เรามีตัวช่วย!

Xcode Preview กับ LBTA Tools

LBTA Tools เป็นไลบรารี่บน Github ที่เราสามารถดึงมาใช้ฟรี ซึ่งตัวไลบรารี่จะเป็นตัวช่วยในการจัดการกับการวาง UI ในโค้ดของเรา ด้วยวิธีการเขียนที่ง่ายมากๆ โดยยกตัวอย่างเช่น เราต้องการจะสร้างวิว 1 อัน และตั้งค่า Layout Constraint ให้ชิดขอบ บน ซ้าย และ ขวา โดยไม่ต้องชิดของล่าง สามารถเขียนได้ดังนี้

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

ทดลองทำ Xcode Preview

เกริ่นมาซะเนินนานได้เวลามาลองของจริงกันแล้ว ไหนของมาสร้างหน้า Hello world โดยให้มันแสดง Preview กัน

เริ่มต้นด้วยการสร้างหน้า View Controller ที่มี Label วางอยู่แบบนี้

สร้างตัว PreviewProvider ซึ่งตัวนี้เป็นของ SwiftUI ที่เป็นตัวสร้าง Preview ให้เราครับ เพราะเนื่องจากตัว Swift นั่นไม่ได้รองรับการใช้งาน Xcode Preview ครับ

จัดเตรียมโค้ดเสร็จแล้ว เราก็มาเปิด Preview กันเลยโดยกดไปที่ปุ่ม Adjust Editor Option จากนั้นเลือก Canvas

และจากนั้นเราก็จะได้ตัว Preview ของเรากันแล้วแบบนี้เลย

สร้างหน้า Hello World แบบพื้นฐานกันได้แล้ว มาลองทำแบบ Advance ให้มันแสดง Table View ดูซิจะหน้าตาเป็นยังไงนะ

เริ่มต้นด้วยก็สร้าง Cell ให้ Table ของเราก่อน

จากนั้นทำการสร้าง TableView และทำ Data Scource

แค่นี้ก็เรียบร้อย ของใครยังไม่ขึ้น ลองกดปุ่ม Resume ด้านบนขวาไปซักป้าบ

ผลลัพธ์ที่ได้ก็จะออกมาเป็นแบบนี้ครับ

เท่านั้นยังไม่พอ เรายังสามารถกดปุ่ม Play สีน้ำเงินที่อยู่ข้างๆ ตัวเครื่อง เพื่อลองเลื่อนจอและกดปุ่มต่างๆได้เลยครับบ!

เท่ใช่ไหมล่ะ โค้ดไปด้วย เห็น UI ไปด้วยเลย ไหนใครเริ่มติดใจการใช้ Xcode Preview แล้วบ้างยกมือขึ้น

สรุปว่า Xcode Preview ทำให้เราสบายขึ้น (จริงเหรอ?)

Xcode Preview ตัวช่วยตัวใหม่จากทีมนักพัฒนา Xcode ช่วยให้เราสามารถเขียนโค้ดไปพร้อมๆกับดูหน้าตาของแอปพลิเคชันเราได้ในทันที คล้ายๆกับการเขียน Flutter ใน Android Studio นับว่าเป็นแนวทางใหม่ของการเขียนแอพเลยทีเดียว แต่เนื่องจากเพึ่งเป็นเวอร์ชั่นแรกก็อาจมีบางครั้งที่ตัว Preview เกิดอาการ Error ไม่รีเฟรชตัวเองโดยอัตโนมัติบางครั้ง และเนื่องด้วยตัว Preview นี้ทำมาเพื่อตัว SwiftUI ก็เลยอาจทำให้การเขียนแบบ Swift ปกติมีปัญหาบ้าง แต่ก็นับว่าเป็นแนวทางที่ดี และผู้เขียนหวังว่าตัว Preview นี้จะถูกพัฒนาให้ดียิ่งขึ้นในเวอร์ชั่นถัดไปครับ

หากใครมีข้อสงสัยเกี่ยวกับตัว Preview หรือลองทำแล้วเกิดปัญหา ก็คอมเมนท์สอบถามได้ที่ใต้บทความนี้ได้เลยครับบบ