Để tạo giao diện độc đáo trong ứng dụng Android, công cụ Cyanea cung cấp một giải pháp mạnh mẽ. Bài viết này sẽ hướng dẫn bạn cách sử dụng Cyanea từ việc cấu hình JSON cho đến việc thực hiện mã nguồn để tùy chỉnh giao diện ứng dụng.
Tổng quan về Cyanea
Cyanea là một động cơ chủ đề (theme engine) cho phép các nhà phát triển dễ dàng tùy chỉnh giao diện ứng dụng Android. Nó hỗ trợ cả việc định nghĩa chủ đề thông qua tệp JSON và thay đổi động qua mã nguồn. Cyanea tương thích tốt với nhiều phiên bản Android và đảm bảo tính nhất quán trên các thiết bị khác nhau.
Các ưu điểm chính của Cyanea
- Dễ sử dụng: Chỉ cần cấu hình qua tệp JSON mà không cần tìm hiểu sâu về hệ thống chủ đề gốc của Android.
- Tùy biến cao: Hỗ trợ điều chỉnh nhiều thuộc tính màu sắc như màu chủ đạo, màu nhấn, màu nền,...
- Chuyển đổi động: Cho phép chuyển đổi chủ đề ngay khi ứng dụng đang chạy.
- Tương thích rộng rãi: Hoạt động ổn định trên nhiều phiên bản Android.
Cấu hình chủ đề bằng JSON: Đơn giản hóa việc tạo phong cách trực quan
Cyanea sử dụng tệp JSON để định nghĩa chủ đề, giúp quá trình tạo và sửa đổi chủ đề trở nên đơn giản và trực quan hơn. Tệp cấu hình chủ đề thường nằm tại library/src/main/assets/themes/cyanea_themes.json.
Phân tích cấu trúc JSON của chủ đề
Mỗi chủ đề trong tệp JSON được biểu diễn dưới dạng một đối tượng chứa các thuộc tính sau:
theme_name: Tên chủ đề dùng để nhận diện và chọn chủ đề trong ứng dụng.base_theme: Chủ đề cơ sở có thể là "LIGHT" hoặc "DARK".primary: Màu chủ đạo.primary_dark: Phiên bản tối của màu chủ đạo.primary_light: Phiên bản sáng của màu chủ đạo.accent: Màu nhấn.accent_dark: Phiên bản tối của màu nhấn.accent_light: Phiên bản sáng của màu nhấn.background: Màu nền.background_dark: Phiên bản tối của màu nền.background_light: Phiên bản sáng của màu nền.
Tạo chủ đề tùy chỉnh trong JSON
Để thêm một chủ đề mới, chỉ cần thêm một đối tượng chủ đề vào tệp cyanea_themes.json. Ví dụ dưới đây minh họa cách tạo một chủ đề tên là "CustomTheme":
{
"theme_name": "CustomTheme",
"base_theme": "DARK",
"primary": "#FF3F51B5",
"primary_dark": "#FF303F9F",
"primary_light": "#FF7986CB",
"accent": "#FFFFEB3B",
"accent_dark": "#FFF57C00",
"accent_light": "#FFFFF59D",
"background": "#FF212121",
"background_dark": "#FF000000",
"background_light": "#FF424242"
}
Trong ví dụ này, chúng ta đã xác định một chủ đề tối với màu xanh lam làm màu chủ đạo và màu vàng làm màu nhấn.
Chủ đề mặc định sẵn có
Cyanea cũng cung cấp nhiều chủ đề mặc định như "Rio", "Vitamin Sea", "Brave",... Bạn có thể sử dụng trực tiếp hoặc tham khảo để tạo chủ đề riêng.
Triển khai mã nguồn: Tích hợp Cyanea vào dự án của bạn
Thêm phụ thuộc
Để sử dụng Cyanea trong dự án của mình, trước tiên bạn cần thêm nó làm phụ thuộc. Thực hiện theo các bước sau:
- Cloning kho lưu trữ Cyanea:
git clone https://gitcode.com/gh_mirrors/cy/Cyanea
- Thêm thư viện Cyanea vào dự án của bạn.
Khởi tạo Cyanea
Khởi tạo Cyanea trong lớp Application của ứng dụng:
class MyApp : Application() {
override fun onCreate() {
super.onCreate()
Cyanea.init(this)
}
}
Sử dụng chủ đề Cyanea
Để áp dụng chủ đề Cyanea trong một Activity, hãy kế thừa từ lớp cơ sở CyaneaActivity:
class MainActivity : CyaneaActivity() {
// Mã nguồn của Activity
}
Chuyển đổi chủ đề động
Cyanea hỗ trợ chuyển đổi chủ đề trong thời gian chạy. Dưới đây là một ví dụ về cách chuyển đổi chủ đề:
// Lấy instance của Cyanea
val cyanea = Cyanea.instance
// Tải chủ đề từ tệp JSON
cyanea.loadTheme("CustomTheme")
// Áp dụng thay đổi chủ đề
recreate()
Điều chỉnh thuộc tính chủ đề tùy chỉnh
Ngoài cách sử dụng chủ đề từ tệp JSON, bạn cũng có thể thay đổi thuộc tính chủ đề qua mã nguồn:
cyanea.primary = Color.parseColor("#FF4CAF50")
cyanea.accent = Color.parseColor("#FF00BCD4")
recreate()
Ví dụ ứng dụng
Cyanea bao gồm hai ví dụ ứng dụng để minh họa cách sử dụng động cơ chủ đề này:
demo-main
demo-main là một ứng dụng đầy đủ chức năng, hiển thị nhiều tính năng của Cyanea như chuyển đổi chủ đề và tùy chỉnh view. Mã nguồn chính nằm trong thư mục demo-main/src/main/java/com/jaredrummler/cyanea/demo/.
demo-simple-java
demo-simple-java là một ví dụ đơn giản trong Java, giúp bạn hiểu cách tích hợp và sử dụng Cyanea trong dự án Java. Mã nguồn chính nằm trong thư mục demo-simple-java/src/main/java/com/jaredrummler/cyanea/javademo/.