สร้าง List (TableView) ง่ายๆด้วย SwiftUI
ก่อนหน้านี้เราได้ทำการสร้าง Table view โดยใช้ Storyboard หรือไม่ก็ใช้ xibs (Mac OS X Interface Builder) ซึ่งสร้างความยุ่งยากและต้องใช้เวลาพอสมควร แต่เมื่อปี 2019 แอปเปิ้ลได้ทำการเปิดตัว SwiftUI ในงาน WWDC 2019 ซึ่งสร้างความฮืแฮาแก่เหล่า Developer พอสมควร ซึ่ง SwiftUI ช่วยให้เราสามารถสร้าง UI ได้ไวกว่า Storyboard แบบเดิมๆ ดังนั้นวันนี้เรามาดูวิธีการสร้าง List View ง่ายๆ บน SwiftUI กัน
โดยหน้าตาของ App ที่เราจะสร้างเป็นดังนี้
ก่อนที่ทุกท่านจะเริ่ม จะต้องเตรียม Xcode 11 หรือใหม่กว่า และ MacOS Catalina.
ถ้าทุกคนเตรียมแล้ว เรามาเริ่มกันเลย….
- สร้าง Project ใหม่ โดยเลือก Use SwiftUI
2. สร้าง Model ของ Post (Post.swift)
3. สร้าง Post Data (Data.swift)จำลองข้อมูลดังนี้
4. สร้าง Avatar View ชื่อไฟล์ AvartarView.swift ดังนี้
โดย set Image view ขนาด 150 * 150 และเป็นวงกลม รวมทั้ง resize รูปภาพด้วย
5. สร้าง Post View ชื่อไฟล์ PostView.swift ดังนี้
โดยใช้ HStack ในการเรียง Element ของ View จะเป็นหน้าตาดังนี้
6. สร้าง List ใน ContentView.swift ดังนี้
จะได้ผลลัพธ์ดังนี้
จากวิธีทางด้านบนจะเห็นได้ว่าเราสามารถสร้าง List View ได้ง่ายกว่า Storyboard มาก ซึ่งจะช่วยให้นักพัฒนาสามารถสร้างสรรค์ผลงานได้อย่างรวดเร็วยิ่งขึ้น 🎉
