เอา Design Token มาใช้กับ Native iOS กันเถอะ: ตอนที่ 3
จากตอนที่แล้ว เอา Design Token มาใช้กับ Native iOS กันเถอะ: ตอนที่ 2 เราได้ทำการสร้าง Gradient จากค่าของ CSS ใน design token กันไปแล้ว ครั้งนี้เราจะมาทำเรื่องที่มันง่ายขึ้น นั่นคือการสร้างเงาให้แก่ component ทั้งหลายใน iOS ครับ
ในส่วนของเงาที่ได้รับมาจากทีมดีไซเนอร์นั้น จะเป็นเงาที่มีอยู่สองเลเยอร์โดยที่เลเยอร์แรกจะเป็นเงามืด และอีกเลเยอร์จะเป็นเงามัว น่าจะเพื่อให้เงาออกมาดูสวยงามสมจริงกว่าการทำเงาแค่เลเยอร์เดียว
จากโค้ดข้างบนเราจะได้รับค่าพารามิเตอร์ที่สำคัญอยู่ 5 ค่านั่นคือ color, x, y, blur, spread ครับ โดยที่
color คือ สีของเงา
x คือ ตำแหน่งในแกน x
y คือ ตำแหน่งในแกน y
blur คือ ความฟุ้งของเงา
spread คือ ความแผ่ขยายของเงา ซึ่งมันจะทำให้เกิดความรู้สึกว่า component มันถูก ยกให้ลอยขึ้นมาครับ
เพื่อนำเอาค่าเหล่านี้มาใช้ เราจะสร้าง struct ขึ้นมาเพื่อเก็บค่าเหล่านี้ครับ
เนื่องจาก shadowLayer ของ swift นั้นรับตำแหน่งของเงาเป็น offset เราจึงใช้ค่า x,y ที่ได้มาเป็น offset: CGSize ครับ
แล้วเราก็มาจัดการกับตัว Formatter ของ StyleDictionary ครับ
ที่เราต้องเอา 255 ไปหารกับค่า RGBA เพราะใน swift ค่า RGBA มันมีค่าได้แค่ตั้งแต่ 0 ถึง 1 นั่นเอง
พอเราทำการ generate เสร็จเราจะได้โค้ดพร้อมใช้ราว ๆนี้ โดยที่ตัว shadow เราจะได้ type เป็น Turple ของ Shadow ครับ
ตอนนี้ก็ถึงเวลาเอามันมาใช้งานแล้ว ซึ่งเราจะนำมาใช้งานใน extension ของ UIView กัน เพราะแทบจะทุก component ของ iOS ล้วนแต่ extend มาจาก UIView ทั้งนั้น ถ้าเราเอามันไปใส่ไว้ใน UIView ก็แปลว่าแทบจะทุก UI component จะสามารถมีเงาตาม design system ได้
เนื่องจาก swift มันมี shadowLayer แค่ชั้นเดียว แต่ทีนี้เรามีสองชั้น เราจึงต้องลงมือเพิ่มนิดหน่อยโดยการสร้าง shadowLayer ขึ้นมา
เราไม่สามารถใส่ค่า spread ไปได้โดยตรง จึงต้องวาด path ขึ้นมาเองโดย inset ออกมาจาก bound ในทิศทางตรงกันข้าม (inset มันเข้าไปข้างใน จึงต้องติดลบเพื่อให้มันออกมาข้างนอกนั่นเอง)
เสร็จแล้วก็นำไปใช้ใน UIView
ต่อไปก็ลองนำไปใช้งานครับ ลองใช้ gradient box จากตอนที่แล้วมาใส่เงาเข้าไปดู
ก็จะได้ผลออกมาเป็นแบบนี้ครับ
ก็เรียบร้อยกันไปแล้วครับ สำหรับการนำ design token มาใช้ใน iOS application ต่อไปคือการนำของเหล่านี้ไปรวมเข้ากับ theme หรือสร้าง alias ในการเรียกใช้ต่อไปครับ ซึ่งเชื่อว่าไม่เกินความสามารถของคุณผู้อ่านแน่นอน
สำหรับเรื่องของการใช้ design token ก็ขอจบไว้แต่เพียงเท่านี้ครับ โอกาสหน้าอาจจะเขียนเรื่องเกี่ยวกับการทำแอปหลายภาษาโดยที่ไม่ต้องโค้ดเพิ่มหรือ build ใหม่ครับ เพราะเราจะย้ายตัวหนังสือในแอปทั้งหมดไปไว้บน remote server ครับ แล้วถ้าตัวหนังสืออยู่บน server ทั้งหมดถ้าเน็ตเสียหรือ server พัง มันจะยังแสดงผลได้ตามปกติได้อย่างไร? ฝากกดติดตามกันมาเยอะ ๆนะครับ
