เรียกใช้รูป Vector โดยไม่ง้อ Library ด้วย SF Symbols for iOS App

Source: https://developer.apple.com/news/images/og/sf-symbols-og.jpg

หลาย ๆ คนที่เป็น iOS Developer เวลาทำ UI ตาม Design น่าจะเคยเจอ Designer ที่ส่งรูป icon ต่าง ๆ ในรูปแบบไฟล์ jpeg, png โดยในรูป 1 รูปจะมี 3 size (1x, 2x, 3x) มาให้คุณทำ พอคุณเอารูป icon นั้นมาแปะใน UIImageView หรือ UIButton แล้วรูปมันไม่ Scale อย่างที่คุณต้องการเลย ขยายเยอะก็แตก คุณก็จะมาปวดกบาลเวลาทำให้มัน Scale ในทุก ๆ Device

หรือถ้า Designer ที่ทำรูป vector เป็นก็จะส่ง .svg มาให้แต่ Xcode มันไม่ได้รองรับการ render เลยจะต้องใช้ library ในการ render

แต่ใช่ว่า Xcode จะไม่ได้ support ไฟล์รูป vector เลยนะ ความจริงตั้งแต่ Xcode 9 ขึ้นไปนั้น Xcode ได้ support ไฟล์รูป .pdf ซึ่งจะไม่ต้องใช้ library ในการ render ใด ๆ เลย ก็แค่

1. ลากไฟล์รูป .pdf ลงใน folder Assets ของ project
2. เลือกรูปที่ต้องการ ติ๊กที่ Preserve Vector Data
3. เปลี่ยน Scales ให้เป็น Single Scale ดังรูปข้างล่าง

แค่นี้ project ของเราก็จะสามารถ support รูปที่เป็น vector ได้แล้ว สามารถ scale ได้ตามที่ต้องการโดยไม่ต้องกลัวว่าจะแตก

ซึ่งพอได้ทำแล้วก็สามารถแก้ปัญหาการ scale ได้ดีระดับนึง แต่ปัญหามันยังไม่หมดนี้สิ โดยเฉพาะเจ้าปุ่มหรือ UIButton เจ้าปัญหาจอมจุกจิกที่เมื่อก่อนแค่ต้องการให้รูปมัน scale เท่ากับขนาดของ font ของ text ก็ต้องทำหลายขั้นตอนด้วยกัน จะต้องไป set ImageEdgeInsets ปรับ inset ซ้ายขวาบนล่าง จนกว่ามันจะได้เป้ะ ๆ แล้วต้องไป set Content Mode ของ UIImageView ที่อยู่ในปุ่มให้เป็น Aspect Fit อีก ถึงจะได้รูปที่ scale เท่ากับขนาดของ font ของ text

แต่ในที่สุดดดดดดดดดดดดดดด ท่าน Lord Apple ของเราก็ได้สร้าง Tools มาช่วยเราแก้ไขปัญหาจุกจิกได้แล้ว จาก sessionในงาน WWDC2019 ที่ผ่านมา ซึ่ง Tools ตัวนั้นชื่อว่า SF Symbols มาช่วย support รูปที่เป็น vector โดย Xcode Project นั้นจะต้องใช้ Xcode 11 และ iOS 13 ขึ้นไปในการพัฒนา ซึ่งในแต่ก่อนนั้น Xcode version ต่ำกว่า 9 ลงไป ยังไม่มีการ Support ไฟล์รูป pdf, svg แต่สามารถใช้ Library ในการ render ได้

ซึ่งสามารถไปดู session ของ SF Symbols เพิ่มเติมได้ที่
https://developer.apple.com/videos/play/wwdc2019/206/

ถ้าใครอยากรู้วิธีการออกแบบ หรือ custom รูปเอาเองก็สามารถไปอ่าน guideline การออกแบบได้ที่

SF Symbols — SF Symbols — Human Interface Guidelines — Apple Developer

ซึ่งในบทความนี้เราจะอธิบายการใช้งานรูปภาพที่ผ่านการ validate ผ่าน SF Symbols App แล้ว โดยสามารถโหลด Tools ตัวนี้มาใช้ได้ที่
https://developer.apple.com/design/downloads/SF-Symbols.dmg

SF Symbols App

วิธีการใช้งาน Symbol Image

ไฟล์ภาพที่ได้จากการ validate ผ่าน SF Symbols App แล้ว จะเรียกไฟล์นั้นว่า Symbol Image

ในกรณีที่เราจะใช้ Symbol Image ที่เป็น default ของ iOS อยู่แล้ว ก็คือที่มีอยู่ใน SF Symbols App นั้น เราไม่จำเป็นจะต้อง validate หรือ export ออกมาใช้ก็ได้ เพราะว่าตั้งแต่ Xcode 11 เป็นต้นไป project ของเราจะสามารถเข้าถึง Symbol Image ทั้งหมดได้ทันที ซึ่งเราสามารถเข้าถึง Symbol Image ได้จากการลองเปิดหน้า storyboard วาง UIImageView และเปิด Attribute Inspector ดูและเลือก Image จะเห็นว่าใน Section ของ System จะมี Symbol Image เหมือนกับใน SF Symbols App ทั้งหมดเลย ซึ่งสามารถเลือกใช้ได้เลย ดังรูป

หรือถ้าอยากจะเรียกใช้ด้วย Code ก็สามารถเรียกใช้ได้ โดยต้องกรอกชื่อของ Symbol Image ให้ถูกต้อง ดังนี้

let image = UIImage(systemName: "square.and.arrow.up.fill")
imageView.image = image

ต่อไปในกรณีที่ทำ Custom Symbol Image เองเสร็จแล้ว วิธีเรียกใช้ก็คือลากตัว Custom Symbol Image ของเราไปที่ folder assets ของ project ของเราได้เลย

Custom Symbol Image ที่เราทำเองนั้นจะต้องผ่านการ Validate ผ่าน SF Symbols App เท่านั้น

ซึ่งจากรูปด้านบนจะเห็นว่า ถ้าไฟล์ภาพที่เรา import เข้ามานั้นเป็น .svg ที่ถูกต้อง จะแสดงคำว่า Symbol Image บนมุมขวาบน และแสดง Weight (น้ำหนักความหนา) และ Scale (ขนาด) อะไรบ้างเป็นตาราง

โดยเราสามารถเรียกใช้ Custom Symbol Image ของเราผ่าน Attribute Inspector ได้เลย หรือจะเขียน Code เพื่อเรียกใช้ Symbol Image ได้ดังนี้

let image = UIImage(named: "ic_trash")
imageView.image = image

วิธี Set Configuration ให้กับ Symbol Image

Symbol Image มี Config ที่สามารถ set ได้ดังนี้

• Weight: ultraLight, thin, light, regular, medium, semibold, bold, heavy, black
• Scale: default, small, medium, large
• Point Size
• Font

เราสามารถ set config ต่าง ๆ ผ่าน storyboard หรือ xib หรือ codeโดยใช้ UIImage.SymbolConfiguration

ลอง set config ให้ Symbol Image มี point size เท่ากับ 40, weight เท่ากับ ultralight และ scale เท่ากับ large

// MARK: สร้าง Config
let config = UIImage.SymbolConfiguration(pointSize: 40, weight: .ultraLight, scale: .large)
// MARK: สามารถ set config ให้ UIImageView ได้ทั้ง 2 แบบ
// MARK: (1) set config ตอนเรียกใช้ Symbol Image โดยตรง
let image = UIImage(named: "ic_trash")?.withConfiguration(config)
// MARK: (2) set config ผ่าน UIImageView
imageView.preferredSymbolConfiguration = config

หรือจะ set font ให้กับ Symbol Image ก็ได้

let config = UIImage.SymbolConfiguration(font: .systemFont(ofSize: 50))

ต่อไปจะเป็นการ set config ให้กับ Symbol Image ของ button กัน

// MARK: set ขนาดของ Symbol Image ให้เท่ากับขนาดของ font ใน button
let config = UIImage.SymbolConfiguration(font: button.titleLabel!.font, weight: .ultraLight), scale: .small)
let image = UIImage(named: "ic_trash")?.withConfiguration(config)
button.setImage(image, for: .normal)

เพียงเท่านี้ก็สามารถทำให้รูปใน Button นั้นสามารถ Scale หรือปรับ config ได้ง่ายขึ้นกว่าเมื่อก่อนแล้ว เย้ ๆ

สรุป

SF Symbols เป็น Tools ตัวใหม่ที่จะช่วย iOS Developer เรียกใช้งานรูปภาพที่เป็น Vector ได้ง่ายขึ้น โดยไม่ต้องใช้ Library ช่วยเหมือนแต่ก่อนแล้ว พร้อมทั้งยังสามารถปรับ config ต่าง ๆ ได้แก่ weight, scale, point size และ font ได้เหมือนกับ Text ปกติได้เลย

ขอฝากตัวด้วยขอรับ

นี่ก็เป็นบทความแรกของผมนะครับ อาจจะเขียนมึนงงไปบ้าง (ครั้งแรกมันค่อนข้างเจ็บอะนะ 55555) ถ้าผิดพลาดประการใด ขออภัยมา ณ ที่นี้ด้วยนะครับ