การทำ Theme Colorให้แอพพลิเคชั่นโดยใช้ Assets
การทำแอพพลิเคชั่น ซักตัวหนึ่ง ในการออกแบบจะมี Theme สีของแอพฯ ไม่เยอะมาก ส่วนใหญ่จะมีสีหลักไม่เกิน 10 สีด้วยซ้ำเช่น แอพฯ Facebook


แต่ว่า การเขียน Application เท่าที่เห็นมา จะเขียนโค้ดสำหรับใช้งาน หรือสร้าง Class ซักคลาสไว้เก็บข้อมูล Theme Color ของแต่ละหน้า ซึ่งโค้ดสีทั้งหมดจะอยู่ในคลาส แต่ปัญหาคือ หน้า UI ที่เป็น Story Board หรือ Xib จะมองไม่เห็น Theme Color ที่สร้างขึ้นจาก ไฟล์ Swift ทำให้การใส่ Color ของแอพฯ ค่อนข้างกระจัดกระจาย
วันนี้มีวิธีมานำเสนอครับโดยการสร้าง Theme Color สำหรับเก็บสีที่ XCode มีมาให้อยู่แล้ว มาเริ่มกันเลย
การสร้าง Theme.assets
- คลิกขวาที่ Folder ของ Project ซักที่แล้วกด New File

2. Search หาไฟล์ที่ชื่อ Asset เลือกไฟล์ Asset Catalog แล้วกด Next และตั้งชื่อไฟล์ว่า Theme

3. จะได้ไฟล์ดังรูปในโปรเจคก์ของเรา

กดจิ้มที่ไฟล์เลยจ้า ขั้นตอนต่อไปเราจะทำการสร้าง UIColor ในนี้กัน

ทำการกดจิ้มปุ่ม + ที่ด้านล่างก่อนครับจากนั้นเลือก New Color Set จะมี Asset Color ขึ้นมาดังรูปให้เราตั้งค่าตามในรูปได้เลยครับ

จากนั้นทำการกดตาม Step ในรูปได้เลย โดย Step 2 ผมจะตั้งค่าให้ใส่ Hex Color นะครับ กดเลือกตามนี้ได้เลยและตั้งค่าสีตาม สีที่เราต้องการ ตอนนี้เราจะได้โค้ดสีตามที่ต้องการแล้วนะครับ มาตั้งค่า UI กันต่อเลย
การใชังาน Color Asset ใน UI (Storyboard or Xib)
ตอนนี้เราเข้ามาดูที่ UI กันนะครับ ผมสร้างตัว Button ตัวหนึ่งซึ่งผมจะกำหนดสี Background ของ Button จากเดิมเราจะ Custom Color เข้าไปเลย ซึ่งเราต้องใส่ Hex Code เอง

ตอนนี้ผมสร้าง Theme.asset ขึ้นมาแล้วเมื่อตอนที่เลือก Background Color จะมีเมนูของ Theme ที่เราสร้างเข้ามาด้วย ดังรูปครับ

ตอนนี้เราสามารถคุม Theme Color ของแอพฯเราได้แล้วครับจากตัวอย่างข้างต้น ผลลัพธ์ที่ได้จะเป็นดังนี้

การใชังาน Color Asset โดยการเขียนโปรแกรม
แต่เราสามารถใช้สีที่อยู่ใน Theme.asset ได้ไหมในโค้ด
คำตอบคือได้ครับผม เราสามารถเขียนโปรแกรมด้วยภาษา Swift ให้เรียก UIColor ได้เลย
ผมสร้าง Color ใน Theme Asset ขึ้นมาใหม่อีกหนึ่งตัวครับ ชื่อว่า NunColor

จากนั้นผมจากทำการสร้าง UIColor โดยใช้ UIColor(Named: “NunColor”) อ้างอิงชื่อของ Color ที่เราสร้างไว้ที่ Theme.asset ได้เลย
struct Theme {
static let nunColor: UIColor = UIColor(named: "NunColor")!
} class ViewController: UIViewController {
@IBOutlet weak var mainBarButton: UIButton!
@IBOutlet weak var secondBarButton: UIButton!
@IBOutlet weak var bottomBarButton: UIButton! override func viewDidLoad() {
super.viewDidLoad()
} override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
mainBarButton.backgroundColor = Theme.nunColor
secondBarButton.backgroundColor = Theme.nunColor
bottomBarButton.backgroundColor = Theme.nunColor
}
}
ผลลัพธ์ที่ได้ ดังนี้

UI จะเปลี่ยนไปตามที่เราตั้งค่าใน Source Code ทุกประการครับผม
สรุป
ผมชอบวิธีนี้พอสมควรครับ เพราะเราสามารถรวม Theme Color ที่กระจัดกระจายอยู่ตามแต่ละส่วนของแอพฯ เอามาไว้ใน Theme ที่เดียวและสามารถตั้งค่าTheme Color ใน UI ได้ด้วย และเราสามารถจัด Group ให้ Color ของแต่ละหน้าได้
แต่เมื่อมีการจัด Group เกิดขึ้นแสดงให้เห็นว่า…
แอพฯเริ่มมีหลากหลายของ Thems ในแต่ละหน้าละครับ เมื่อถึงตอนนี้จะให้เกิด Color ที่กระจัดกระจายเหมือนเดิมแต่แค่มารวมไว้ใน Theme Color เท่านั้น ถ้ามาถึงจุดนี้อยากให้ย้อนไปตั้งแต่ขั้นตอนการออกแบบ แอพพลิเคชั่นแล้วครับว่า Theme Color มันไปในแนวทางเดียวกันหรือเปล่า!!
ขอบคุณที่เข้ามาอ่านบทความกันนะครับ
