Manage Colour Schemes for iOS Application Development
Giả sử chúng ta có một câu chuyện như sau, chúng ta đang làm một dự án ios, đó là một dự án lớn với hơn 30 storyboards. Rồi bỗng một ngày đẹp trời bên bộ phận thiết kế yêu cầu thay đổi toàn bộ theme hiện tại của ứng dụng từ Light theme sang Dark theme. Đó chắc hẳn là một tin rất tệ, nhưng là một lập trình viên không gì ngoài việc chúng ra ngồi xuống và giải quyết hết cả đống UI components cho phù hợp với thiết kế mới. Nhưng không ai có thể chắc một điều rằng với 30 storyboards như vậy thì liệu rằng có bỏ sót một phần nào không. Điều đó thật mất thời gian.
Solution
Vậy làm thế nào để đối phó với các vấn đề trên. Chúng ta sẽ tạo ra một bảng màu để sử dụng trong dự án. Chúng ta sẽ chia thành thành nhiều phần mỗi phần có các chức năng riêng biệt như sau:
- Theme Colour. Cho Navigation Bar, Button Titles, Progress Indicator etc.
- Border Colour: Line separators giữa Views hoặc Cells
- Shadow Colour: Màu đổ bóng
- Dark Background Colour: Dark Background cho Light Content
- Light Background Colour: Light Background cho Dark Content
- Dark Text Colour:
- Light Text Colour:
- Affirmation: Màu hiển thị khi thực hiện một action nào đó thành công
- Negation: Màu hiển thị khi thực hiện một action nào đó thất bại
Đó là những phần chính mình liệt kê, tuỳ vào từng dự án có đặc thù khác nhau các bạn có thể thêm vào những phần khác.
Vậy là đã xong phần Color Scheme, nhưng đó mới chỉ là trên lý thuyết, vậy muốn implement nó thì ta phải làm thế nào?
Implementation
Chúng ta sẽ tạo một class extend từ UIColor, nghiệm vụ của nó sẽ nhận vào một hexString color và trả về một UIColor
Sau đó chúng ta sẽ xem những files thiết kế được bàn giao, chúng ta sẽ liệt kê tất cả các màu được sử dụng trong ứng dụng, đơn giản nhất chúng ta sẽ tạo ra 1 class Enumeration chứa tất cả các màu trong đó vì vậy có thể dễ dàng lấy ra và sử dụng.
Tiếp theo, chúng ta sẽ xác định những thành phần trong ứng dụng sử dụng màu gì, chẳng hạn như background màu gì? text màu nào? Bằng cách tạo ra 1 class ColorScheme
Vậy là xong, bây giờ mình sẽ tạo một ứng dụng demo implement class MyColorScheme, ứng dụng rất đơn giản, chỉ bao gồm 1 UILabel và 1 MyButton như sau
Và đây là kết quả.
Conclude
Trong ví dụ trên, mình đã giới thiệu cách cài đặt cũng như sử dụng ColorScheme. Mình mới liệt kê 1 số thành phần cơ bản trong 1 ứng dụng để áp dụng ColorScheme. Trong dự án thực tế sẽ có thể có nhiều trường hợp hơn nữa, do đó hãy sử dụng nó sao cho hợp lý. Những ưu điểm / nhược điểm của việc sử dụng ColrScheme mình sẽ liệt kê bên dưới.
Advantages
- Tốn ít thời gian thay đổi màu sắc ứng dụng
- Hỗ trợ việc thay đổi yêu cầu thiết kế.
- Có thể tái sử dụng trong các ứng dụng khác nhau
cons
- Tất cả các màu đều phải được hard-code trong code
- Chúng ta không thể nhìn sự thay đổi màu trực tiếp trên Storyboard
Bài viết này được mình lấy cảm hứng từ bài viết
Thank you for reading!
