Chào mọi người, hôm nay mình sẽ tìm hiểu về chế độ DarkMode một chút và demo nho nhỏ về sử dụng DarkMode trong iOS App. Mọi người có thể xem tóm tắt qua video này. 😉
Tổng quan
Về DarkMode
thì đã được Apple giới thiệu trong MacOS 10.14 và để thực sự đem nó lên iOS thì mới bắt đầu trên iOS SDK 13
. Nó là gì?
Là một chế độ giao diện trong iOS và MacOS mà người dùng có thể lựa chọn (light & dark). Với DarkMode thì Image, Color của giao diện sẽ thay đổi. Mục đích làm nỗi bật lên nội dung và hướng người dùng tập trung nhiều hơn vào nội dung của ứng dụng.
Về mặt vật lí thì nó tiết kiệm pin hơn cho thiết bị, vì với các OS mới hiện nay việc hiển thị pixel màu đen (tối) đơn giản chỉ là tắt điểm ảnh đó trên màn hình.
Lập trình thì như thế nào?
Về mặt phát triển ứng dụng thì khá là vất vả. Khi giao diện ứng dụng của mình phải hiển thị đẹp trên cả 2 chế độ (light và dark). Nghĩa là bạn phải design lại toàn bộ ứng dụng của bạn cho DarkMode.
- Nếu người dùng chọn chế độ DarkMode cho toàn bộ OS thì tất cả các ứng dụng mặc định sẽ được chạy với chế độ DarkMode.
- Nếu ứng dụng của bạn không hỗ trợ DarkMode thì nó vẫn ở chạy ở chế độ bình thường.
- Nếu bạn muốn ứng dụng của bạn chỉ chạy ở 1 trong 2 chế độ thì bạn sẽ thiết lập trong project của bạn.
- Có thể các
UI Control
của hệ thống sẽauto
thay đổi (Color) theo chế độ hiển thị của OS.
Hiện tại, các ứng dụng trên các nền tảng khác thì rất nhiều ứng dụng đã hỗ trợ DarkMode. Tuy nhiên vẫn còn phải tùy chỉnh bằng tay. Với Apple, trong tương lai có thể bắt buộc bạn phải hỗ trợ chế độ DarkMode trong ứng dụng của bạn khi bạn muốn đưa nó lên AppStore. Còn hiện tại thì chưa có quy định gì, nên mọi thứ vẫn không sao 😀
Tutorial
Mình sẽ demo nhỏ với iOS app với Xcode 11.0 và iOS 13. Tất cả mọi thứ bạn chỉ cần thay đổi trong file Assets.xcassets
. Bạn thêm mới 1 Color Set
> chọn Appearances
với “Any, Light, Dark” > Sau đó chọn màu mà mình thích.
Sử dụng vẫn không thay đổi nhiều so với trước đây.
// macOS let aColor = NSColor(named: NSColor.Name("customControlColor")) // iOS let aColor = UIColor(named: "customControlColor")
So EZ, bây giời tới bước xem thành quả. Bạn hay run project với iSimulator (iOS 13 SDK). Và tùy chọn chế độ hiển thị của simulator ở thành công cụ phía dưới của Xcode.
Còn nhiều điểm thú vị khác với DarkMode. Còn bài viết của mình xin dừng tại đây, chúc bạn demo thành công.
Thanks for watching!
Tham khảo : Supporting Dark Mode in Your Interface
Written by chuotfx
Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!
Leave a Reply Cancel reply
Fan page
Tags
Recent Posts
- Charles Proxy – Phần 1 : Giới thiệu, cài đặt và cấu hình
- Complete Concurrency với Swift 6
- 300 Bài code thiếu nhi bằng Python – Ebook
- Builder Pattern trong 10 phút
- Observer Pattern trong 10 phút
- Memento Pattern trong 10 phút
- Strategy Pattern trong 10 phút
- Automatic Reference Counting (ARC) trong 10 phút
- Autoresizing Masks trong 10 phút
- Regular Expression (Regex) trong Swift
Archives
- September 2024 (1)
- July 2024 (1)
- June 2024 (1)
- May 2024 (4)
- April 2024 (2)
- March 2024 (5)
- January 2024 (4)
- February 2023 (1)
- January 2023 (2)
- November 2022 (2)
- October 2022 (1)
- September 2022 (5)
- August 2022 (6)
- July 2022 (7)
- June 2022 (8)
- May 2022 (5)
- April 2022 (1)
- March 2022 (3)
- February 2022 (5)
- January 2022 (4)
- December 2021 (6)
- November 2021 (8)
- October 2021 (8)
- September 2021 (8)
- August 2021 (8)
- July 2021 (9)
- June 2021 (8)
- May 2021 (7)
- April 2021 (11)
- March 2021 (12)
- February 2021 (3)
- January 2021 (3)
- December 2020 (3)
- November 2020 (9)
- October 2020 (7)
- September 2020 (17)
- August 2020 (1)
- July 2020 (3)
- June 2020 (1)
- May 2020 (2)
- April 2020 (3)
- March 2020 (20)
- February 2020 (5)
- January 2020 (2)
- December 2019 (12)
- November 2019 (12)
- October 2019 (19)
- September 2019 (17)
- August 2019 (10)