SF Symbols đã được giới thiệu trong WWDC 2019 và là một món quà lớn cho các bạn iOS Developers. Apple về cơ bản đã cung cấp các symbols (bộ icon) miễn phí để sử dụng trong ứng dụng nó thậm chí còn rất dễ sử dụng! Với SF Symbols 2.0 được giới thiệu trong WWDC 2020, chúng ta thậm chí còn có nhiều khả năng hơn để hiển thị các biểu tượng đẹp trong ứng dụng của mình.
Tìm hiểu khoá ngắn hạn Lập trình iOS Swift 2020
Kiểm tra trắc nghiệm đầu vào 👉 để Rinh quà ưu đãi!
SF Symbols là gì?
SF Symbols là một bộ gồm hơn 1.500 biểu tượng mà bạn có thể sử dụng trong ứng dụng của mình. Họ liên kết và cấu hình trong một loạt các trọng lượng và tỷ lệ để thích ứng với thiết kế của bạn. Khi chúng được tích hợp vào phông chữ hệ thống San Francisco, chúng sẽ tự động đảm bảo căn chỉnh dọc ngang với văn bản cho tất cả các trọng lượng và kích cỡ (weight và size).
Những nền tảng nào hỗ trợ SF Symbols?
Các nền tảng được hỗ trợ cho Biểu tượng SF là:
- iOS 13 hoặc cao hơn
- watchOS 6 hoặc cao hơn
- tvOS 13 hoặc cao hơn
Vì các ký hiệu được bao gồm trong phông chữ hệ thống San Francisco, bạn cũng có thể sử dụng chúng trong ứng dụng Mac nhưng cần phải thoả thuận các điều khoản.
SF Symbols 2.0 - có gì mới?
WWDC 2020 đã giới thiệu SF Symbols 2.0 với một vài thay đổi rất đáng hoan nghênh:
Hơn 750 biểu tượng mới trên các phiên bản beta mới nhất
Biểu tượng SF 2.0 bao gồm hơn 750 biểu tượng mới, bao gồm các thiết bị, biểu tượng sức khỏe, vận chuyển, ... Các biểu tượng mới chỉ có trên các phiên bản beta của iOS 14, iPadOS 14 và macOS Big Sur.
Cải thiện vấn đề căn chỉnh
Một trong những thách thức của việc sử dụng Biểu tượng SF là căn chỉnh. Căn chỉnh dọc được tự động đảm bảo nếu được sử dụng với phông chữ hệ thống San Fransisco nhưng cho đến phiên bản 1.1, không thể căn chỉnh các biểu tượng theo chiều ngang để làm cho chúng trông đẹp trong mọi trường hợp.
Với bản cập nhật 2.0, giờ đây bạn có thể cung cấp cho các biểu tượng lề bên âm được hỗ trợ bởi cả biểu tượng tiêu chuẩn và biểu tượng tùy chỉnh.
Điều này sẽ cung cấp cho bạn đủ quyền kiểm soát để căn chỉnh trực quan các biểu tượng theo chiều ngang. Ví dụ: bạn có thể có một biểu tượng bao gồm một huy hiệu trong trường hợp bạn muốn di chuyển trực quan biểu tượng một chút theo chiều ngang.
Multicolor Symbols
Nếu không quen thuộc, ban đầu có vẻ như bạn có thể tô màu các Biểu tượng SF. Tuy nhiên, điều này đã có thể bằng cách áp dụng một tông màu đơn giản. Các biểu tượng nhiều màu mới được giới thiệu là duy nhất so với các biểu tượng được tô màu khi chúng tự động thích ứng với các chế độ xuất hiện, cài đặt trợ năng và độ rung. Đây có thể là một cách tuyệt vời để nhanh chóng hỗ trợ nhiều kịch bản khác nhau.
Các biến thể biểu tượng địa phương
Một tính năng mới tuyệt vời khác là các biến thể biểu tượng được bản địa hóa để hỗ trợ các hệ thống chữ viết từ phải sang trái cũng như các ký hiệu dành riêng cho chữ viết cho tiếng Do Thái, tiếng Ả Rập và Devanagari. Những biến thể này được tối ưu hóa để trông tuyệt vời trong các hệ thống đó.
Biểu tượng bị hạn chế
Ngoài các thỏa thuận cấp phép, còn có một danh sách các biểu tượng chỉ có thể được sử dụng để tham khảo các công nghệ cụ thể của Apple. Thật tốt khi truy cập danh sách này thường xuyên để tránh nếu bạn sử dụng các biểu tượng bị hạn chế, ứng dụng của bạn sẽ bị từ chối khi đưa lên App Store.
Một danh sách đầy đủ của các biểu tượng có thể được tìm thấy dưới đoạn Biểu tượng để sử dụng As-Is.
Làm thế nào tôi có thể duyệt các biểu tượng có sẵn?
Apple cung cấp ứng dụng SF Symbols cho phép bạn duyệt, sao chép và xuất bất kỳ biểu tượng có sẵn nào. Có thể tải xuống ứng dụng tại đây và có sẵn cho macOS 10.14 trở lên.
Ứng dụng cho phép bạn duyệt các biểu tượng và hiển thị chúng theo weight đã chọn. Hình ảnh trên cho thấy biểu tượng ở trọng lượng trung bình trong khi hình ảnh tiếp theo cho thấy các biểu tượng tương tự trông như thế nào trong trọng lượng UltraLight:
Điều này là tuyệt vời để tìm đúng biểu tượng có weight theo ý thích.
Nếu bạn thích, bạn cũng có thể duyệt các biểu tượng có sẵn theo dạng list (danh sách)
Xuất một symbols
Ứng dụng Mac cho phép bạn hỗ trợ tất cả các biểu tượng dưới dạng SVG bằng cách sử dụng File -> Export Symbol... hoặc ⌘E. Đây là một cách tuyệt vời để đưa biểu tượng vào những nơi bạn không thể sử dụng phông chữ. Tuy nhiên, hãy ghi nhớ các thỏa thuận cấp phép.
Duyệt các biểu tượng trên web
Điều đáng nói là bạn cũng có thể duyệt các biểu tượng tại website sfsymbols.com
Một lợi ích bạn có bằng cách tìm kiếm trên trang web này là bạn có thể thấy luôn các hạn chế áp dụng cho từng biểu tượng nếu chúng tồn tại:
Tuy nhiên, do các hạn chế giấy phép được mô tả trước đó, chúng chỉ có thể hiển thị tên của các biểu tượng mà không có hình ảnh, vậy thì tốt hơn bạn nên sử dụng phần mềm đã tải về.
Tạo biểu tượng tùy chỉnh
Một biểu tượng tùy chỉnh có thể được tạo bất cứ khi nào có một biểu tượng có sẵn phù hợp với yêu cầu của bạn. Phiên bản SVG xuất một biểu tượng có cấu trúc tốt và có thể được sử dụng làm cơ sở cho biểu tượng tùy chỉnh của bạn.
The Introducing SF Symbols session from WWDC 2019 gives an in-depth explanation on how to use custom symbols
Chọn biểu tượng đúng làm tham chiếu cơ sở
Nó tốt nhất để bắt đầu với một biểu tượng gần với biểu tượng mà bạn muốn có. Bạn có biết rằng họ có bản quyền và bạn có thể sử dụng bản sao các sản phẩm của Apple hoặc sao chép chúng trong các biểu tượng tùy chỉnh của bạn. Ngoài ra, hãy kiểm tra các biểu tượng được đề cập trong danh sách Symbols for Use As-Is vì chúng có thể không được tuỳ chỉnh.
Hầu hết các hình dạng cũng có sẵn mà không có biểu tượng trong đó. Ví dụ circle hoặc circle.fill
Làm cách nào để xác thực Biểu tượng SF tùy chỉnh của tôi?
Ứng dụng cho phép bạn xác thực Biểu tượng SF tùy chỉnh thông qua menu: File ➞ Validate Custom Symbols.... Điều hướng và chọn biểu tượng tùy chỉnh của bạn để bắt đầu xác nhận.
Xuất và sử dụng biểu tượng tùy chỉnh
Khi bạn xuất biểu tượng của mình sang SVG, bạn chỉ cần kéo biểu tượng vào Danh mục Assets Catalog của mình trong Xcode.
Nó hiển thị bản xem trước của biểu tượng của bạn và cho phép bạn định cấu hình tên, giao diện, hướng và bản địa hóa của nó.
Sử dụng biểu tượng tùy chỉnh trên iOS 12 trở xuống
Biểu tượng chỉ được hỗ trợ trên iOS 13 trở lên. Apple đã làm một công việc tuyệt vời để giúp chúng tôi dễ dàng quay lại hình ảnh trong trường hợp phiên bản hệ thống cũ hơn. Chỉ cần đặt tên hình ảnh của bạn cùng tên với biểu tượng tùy chỉnh của bạn và dòng mã sau sẽ quay lại hình ảnh nếu cần:
let customSymbol = UIImage(named: "my_custom_symbol")Cách sử dụng Biểu tượng SF trong Swift
Sử dụng một SF Symbols trong Swift, bạn có thể sử dụng khởi tạo UIImage(systemName:)
let image = UIImage(systemName: "square.and.pencil")Như bạn có thể thấy, Apple đã thực sự dễ dàng sử dụng các ký hiệu SF:
- Duyệt và tìm biểu tượng của bạn trong SF Symbols Mac app
- Sử dụng
⇧⌘Cđể sao chép tên của biểu tượng - Sử dụng tên bên trong trình khởi tạo
UIImage(systemName:) - Sử dụng hình ảnh bên trong UIImageView, UIButton hoặc bất kỳ thành phần UI nào khác
Làm cách nào để thay đổi tỉ lệ của Biểu tượng SF trong Swift?
Để thay đổi tỷ lệ của Biểu tượng SF, bạn có thể sử dụng Cấu hình Biểu tượng UIImage.
Nó cho phép bạn đặt phông chữ, tỷ lệ, kích thước, trọng lượng và kiểu văn bản.
let smallConfiguration = UIImage.SymbolConfiguration(scale: .small)
let smallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: smallConfiguration)Tỷ lệ mặc định là medium , như bạn có thể thấy trong Swift Playground sau đây:
Làm cách nào để thay đổi weight của Biểu tượng SF trong Swift?
let ultraLightConfiguration = UIImage.SymbolConfiguration(weight: .ultraLight)
let ultraLightSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: ultraLightConfiguration)Nó là một cách tuyệt vời để làm cho biểu tượng của bạn phù hợp hơn với thiết kế.
Thay đổi cấu hình biểu tượng trong UIImageView và UIButton
UIImageView and UIButton đi kèm với thuộc tính mới preferredSymbolConfiguration cho phép bạn áp dụng một cấu hình cụ thể cho bất kỳ biểu tượng nào được đặt trong chế độ xem hình ảnh.
let imageView = UIImageView(image: defaultSymbolImage)
let updatedConfiguration = UIImage.SymbolConfiguration(weight: .bold)
imageView.preferredSymbolConfiguration = updatedConfigurationNhư bạn có thể thấy trong hình ảnh Swift Playground sau đây, biểu tượng cũng được thay đổi thành màu xanh lam.
Điều này được kế thừa từ màu sắc được đặt trên chế độ xem hình ảnh. Nếu bạn muốn đảm bảo một biểu tượng luôn xuất hiện trong một màu cụ thể, bạn có thể sử dụng phương thức withTintColor :
let heartImage = UIImage(systemName: "heart.fill")!
let redHeartImage = heartImage.withTintColor(.red, renderingMode: .alwaysOriginal)
Đối với các nút, nó hoạt động ít nhiều giống nhau bằng cách sử dụng UIButton.setPreferredSymbolConfiguration(_:forImageIn:). Các kiểu mặc định được áp dụng cho các nút hệ thống là .body và .large.
Kết hợp các cấu hình
Trong trường hợp bạn có thể lưu nhiều cấu hình để sử dụng trong toàn bộ ứng dụng của mình, có thể bạn muốn áp dụng một điều chỉnh nhỏ trên đầu cấu hình được chia sẻ.
let boldLargeConfig = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .bold, scale: .large)
let smallConfig = UIImage.SymbolConfiguration(scale: .small)
let boldSmallConfig = boldLargeConfig.applying(smallConfig)
let boldSmallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: boldSmallConfig)Như bạn có thể thấy trong Playground sau, hình ảnh nhỏ hơn nhưng đậm:
Căn chỉnh biểu tượng
Phương thức mới UIImage.withBaselineOffset(fromBottom:) cho phép bạn áp dụng một phần bù mới cho một hình ảnh từ dưới cùng của hình ảnh. Phương pháp này cũng có thể hữu ích trong việc sử dụng chung hình ảnh.
Làm cách nào để sử dụng Biểu tượng SF trong iOS 12 trở xuống?
Thật không may, bạn không thể sử dụng biểu tượng SF trực tiếp trên iOS 12 trở xuống như bạn có thể trên iOS 13 trở lên. Nếu bạn muốn sử dụng bất kỳ biểu tượng nào trên iOS 12 trở xuống, bạn cần xuất chúng từ ứng dụng SF Symbols Mac và thêm chúng vào Asset Catalog như cách thêm ảnh bình thường
Kết luận
Apple đã cho chúng ta một món quà tuyệt vời trong WWDC 2019 với hơn 1.500 biểu tượng để sử dụng. Đặc biệt, nếu bạn không có một designer và bạn muốn nhanh chóng có các biểu tượng đẹp để sử dụng cho app của mình.
Bài viết được tham khảo tại avanderlee.com
Cảm ơn bạn đã đón đọc và hãy theo dõi các bài viết khác trên Blog Techmaster Việt Nam nhé!
Bình luận