Thiết kế hình ảnh tốt là điều cần thiết cho sự thành công của ứng dụng và bảng phối màu là thành phần chính của thiết kế. Chiến lược phát hành đĩa đơn Thư viện bảng khung hiển thị là một Jetpack thư viện trích xuất các màu nổi bật từ hình ảnh để tạo hình ảnh hấp dẫn của chúng tôi.
Bạn có thể dùng thư viện Bảng khung hiển thị để thiết kế bố cục
giao diện và áp dụng màu tuỳ chỉnh cho
các phần tử hình ảnh trong ứng dụng của mình. Ví dụ: bạn có thể sử dụng bảng màu để tạo một
thẻ tiêu đề được phối màu cho một bài hát dựa trên bìa đĩa nhạc hoặc để điều chỉnh
màu thanh công cụ của ứng dụng khi hình nền của ứng dụng thay đổi. Chiến lược phát hành đĩa đơn
Palette
cho phép bạn truy cập vào các màu trong
Hình ảnh Bitmap
đồng thời cung cấp 6 cấu hình màu chính từ bitmap để thông báo cho
lựa chọn thiết kế.
Thiết lập thư viện
Để sử dụng thư viện Bảng khung hiển thị, hãy thêm các thông tin sau vào
build.gradle
:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Groovy
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Tạo bảng màu
Đối tượng Palette
cấp cho bạn quyền truy cập vào các màu chính trong một
hình ảnh cũng như các màu tương ứng cho văn bản ở lớp phủ. Sử dụng bảng màu để
thiết kế kiểu ứng dụng và linh động thay đổi bảng phối màu của ứng dụng
trên một hình ảnh nguồn nhất định.
Để tạo một bảng màu, trước tiên, hãy tạo thực thể
Palette.Builder
từ Bitmap
. Sau đó, bạn có thể sử dụng Palette.Builder
để
tuỳ chỉnh bảng màu trước khi tạo. Phần này mô tả bảng màu
tạo và tuỳ chỉnh từ hình ảnh bitmap.
Tạo một thực thể Palette (Bảng khung hiển thị)
Tạo một thực thể Palette
bằng
from(Bitmap bitmap)
để tạo Palette.Builder
từ một
Bitmap
.
Trình tạo này có thể tạo bảng khung hiển thị một cách đồng bộ hoặc không đồng bộ. Sử dụng
tạo bảng màu đồng bộ nếu bạn muốn tạo bảng màu trên cùng một
làm phương thức được gọi. Nếu bạn tạo bảng khung hiển thị một cách không đồng bộ,
trên một chuỗi khác, hãy sử dụng
onGenerated()
để truy cập vào bảng màu ngay sau khi bảng được tạo.
Đoạn mã sau đây cung cấp các phương thức mẫu cho cả hai loại bảng màu thế hệ:
Kotlin
// Generate palette synchronously and return it. fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate() // Generate palette asynchronously and use it on a different thread using onGenerated(). fun createPaletteAsync(bitmap: Bitmap) { Palette.from(bitmap).generate { palette -> // Use generated instance. } }
Java
// Generate palette synchronously and return it. public Palette createPaletteSync(Bitmap bitmap) { Palette p = Palette.from(bitmap).generate(); return p; } // Generate palette asynchronously and use it on a different thread using onGenerated(). public void createPaletteAsync(Bitmap bitmap) { Palette.from(bitmap).generate(new PaletteAsyncListener() { public void onGenerated(Palette p) { // Use generated instance. } }); }
Nếu bạn cần liên tục tạo bảng màu cho một danh sách hình ảnh hoặc
mà bạn cần cân nhắc
lưu vào bộ nhớ đệm
Palette
để ngăn hiệu suất giao diện người dùng bị chậm. Đừng tạo
các bảng màu trên
luồng chính.
Tuỳ chỉnh bảng màu
Palette.Builder
cho phép bạn tuỳ chỉnh bảng màu bằng cách chọn
có bao nhiêu màu trong bảng kết quả, vùng hình ảnh của bạn
trình tạo dùng để tạo bảng màu và những màu có trong bảng màu
. Ví dụ: bạn có thể lọc ra màu đen hoặc đảm bảo trình tạo
chỉ sử dụng nửa trên của hình ảnh để tạo bảng màu.
Tinh chỉnh kích thước và màu sắc của bảng màu bằng các phương pháp sau từ
Lớp Palette.Builder
:
addFilter()
- Phương pháp này thêm một bộ lọc cho biết màu nào được phép trong
bảng màu thu được. Truyền nội dung của riêng bạn
Palette.Filter
và sửa đổi phương thứcisAllowed()
để xác định màu nào được lọc khỏi bảng. maximumColorCount()
- Phương thức này giúp thiết lập số lượng màu tối đa trong bảng màu của bạn. Mặc định
giá trị là 16 và giá trị tối ưu phụ thuộc vào hình ảnh nguồn. Cho
phong cảnh, giá trị tối ưu nằm trong khoảng từ 8 đến 16, trong khi các ảnh có khuôn mặt thường
có các giá trị từ 24-32.
Palette.Builder
mất nhiều thời gian hơn để tạo bảng màu với nhiều màu hơn. setRegion()
- Phương thức này cho biết vùng mà trình tạo bitmap sử dụng khi tạo bảng màu. Bạn chỉ có thể sử dụng phương thức này khi tạo bảng màu từ một bitmap và không ảnh hưởng đến hình ảnh gốc.
addTarget()
- Phương pháp này cho phép bạn so khớp màu của riêng mình bằng cách thêm
Target
vào trình tạo. NếuTarget
mặc định là đủ, các nhà phát triển nâng cao có thể tạoTarget
của riêng mình sử dụngTarget.Builder
.
Trích xuất hồ sơ màu
Dựa trên
các tiêu chuẩn của Material
Design, thư viện Palette (Bảng khung hiển thị) trích xuất các cấu hình màu thường dùng từ một
hình ảnh. Mỗi hồ sơ do một Target
xác định và các màu được trích xuất
từ hình ảnh bitmap được tính điểm cho từng hồ sơ dựa trên độ bão hoà,
độ chói và tổng thể (số pixel trong bitmap được biểu thị bằng giá trị
màu). Đối với mỗi hồ sơ, màu có điểm số cao nhất sẽ xác định màu đó
cho hình ảnh đã cho.
Theo mặc định, một đối tượng Palette
chứa 16 màu chính trong một
hình ảnh được cung cấp. Khi tạo bảng màu, bạn có thể
tuỳ chỉnh số lượng màu bằng cách sử dụng
Palette.Builder
. Việc trích xuất nhiều màu hơn giúp tăng tiềm năng
khớp với từng cấu hình màu, nhưng cũng gây ra Palette.Builder
mất nhiều thời gian hơn khi tạo bảng.
Thư viện Palette (Bảng khung hiển thị) cố gắng trích xuất 6 cấu hình màu sau:
- Sáng rực rỡ
- Rực rỡ
- Rực rỡ tối
- Đã tắt tiếng đèn
- Bị tắt tiếng
- Đã tắt tiếng màn hình tối
Mỗi phương thức get<Profile>Color()
trong
Palette
trả về màu trong bảng màu liên kết với màu đó
hồ sơ cụ thể, trong đó <Profile>
được thay thế bằng
tên của một trong sáu cấu hình màu. Ví dụ: phương thức lấy giá trị
Hồ sơ màu tối rực rỡ hiện tại
getDarkVibrantColor()
.
Vì không phải hình ảnh nào cũng chứa tất cả cấu hình màu, hãy cung cấp màu mặc định cho
lợi nhuận.
Hình 1 hiển thị ảnh và các cấu hình màu tương ứng từ
get<Profile>Color()
phương thức.
Sử dụng bảng màu để tạo bảng phối màu
Lớp Palette
cũng tạo
Palette.Swatch
cho từng cấu hình màu. Đối tượng Palette.Swatch
chứa
màu được liên kết cho cấu hình đó cũng như tập hợp của màu trong
điểm ảnh.
Các mẫu màu có các phương thức bổ sung để truy cập thêm thông tin về
cấu hình màu, chẳng hạn như giá trị HSL và tập hợp pixel. Bạn có thể dùng bảng màu để
tạo bảng phối màu và giao diện ứng dụng toàn diện hơn bằng cách sử dụng
getBodyTextColor()
và
getTitleTextColor()
. Các phương thức này trả về màu sắc thích hợp để sử dụng thay vì màu của mẫu
.
Mỗi phương thức get<Profile>Swatch()
từ
Palette
trả về bảng màu được liên kết với hồ sơ cụ thể đó,
trong đó <Profile>
được thay thế bằng tên của một trong
6 cấu hình màu. Mặc dù bảng màu
Phương thức get<Profile>Swatch()
không yêu cầu giá trị mặc định
các tham số giá trị này, chúng sẽ trả về null
nếu cấu hình cụ thể đó
không tồn tại trong hình ảnh. Do đó, hãy kiểm tra để đảm bảo một bộ sưu tập trước đó có giá trị rỗng
đang sử dụng nó. Ví dụ: mã sau đây lấy màu văn bản tiêu đề từ một
nếu bảng màu rực rỡ không có giá trị rỗng:
Kotlin
val vibrant = myPalette.vibrantSwatch // In Kotlin, check for null before accessing properties on the vibrant swatch. val titleColor = vibrant?.titleTextColor
Java
Palette.Swatch vibrant = myPalette.getVibrantSwatch(); if(vibrant != null){ int titleColor = vibrant.getTitleTextColor(); // ... }
Để truy cập vào tất cả các màu trong một bảng màu,
getSwatches()
phương thức trả về danh sách tất cả các mẫu được tạo từ một hình ảnh, bao gồm
6 màu chuẩn.
Đoạn mã sau dùng các phương thức của mã trước đó các đoạn mã để tạo một cách đồng bộ bảng màu, tạo ra bảng màu rực rỡ và thay đổi màu của thanh công cụ cho phù hợp với hình ảnh bitmap. Hình 2 hiển thị hình ảnh và thanh công cụ kết quả.
Kotlin
// Set the background and text colors of a toolbar given a bitmap image to // match. fun setToolbarColor(bitmap: Bitmap) { // Generate the palette and get the vibrant swatch. val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch // Set the toolbar background and text colors. // Fall back to default colors if the vibrant swatch isn't available. with(findViewById<Toolbar>(R.id.toolbar)) { setBackgroundColor(vibrantSwatch?.rgb ?: ContextCompat.getColor(context, R.color.default_title_background)) setTitleTextColor(vibrantSwatch?.titleTextColor ?: ContextCompat.getColor(context, R.color.default_title_color)) } }
Java
// Set the background and text colors of a toolbar given a bitmap image to // match. public void setToolbarColor(Bitmap bitmap) { // Generate the palette and get the vibrant swatch. // See the createPaletteSync() method from the preceding code snippet. Palette p = createPaletteSync(bitmap); Palette.Swatch vibrantSwatch = p.getVibrantSwatch(); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // Load default colors. int backgroundColor = ContextCompat.getColor(getContext(), R.color.default_title_background); int textColor = ContextCompat.getColor(getContext(), R.color.default_title_color); // Check that the Vibrant swatch is available. if(vibrantSwatch != null){ backgroundColor = vibrantSwatch.getRgb(); textColor = vibrantSwatch.getTitleTextColor(); } // Set the toolbar background and text colors. toolbar.setBackgroundColor(backgroundColor); toolbar.setTitleTextColor(textColor); }