Chọn màu bằng Palette API (API Bảng khung hiển thị)

Thiết kế hình ảnh đẹp mắt là yếu tố cần thiết để tạo nên một ứng dụng thành công và bảng phối màu là thành phần chính của thiết kế. Thư viện bảng màu là một thư viện Jetpack giúp trích xuất các màu nổi bật từ hình ảnh để tạo ra các ứng dụng hấp dẫn về mặt hình ảnh.

Bạn có thể sử dụng thư viện Palette để thiết kế giao diện bố cục và áp dụng màu sắc tuỳ chỉnh cho các thành phần hình ảnh trong ứng dụng. Ví dụ: bạn có thể sử dụng Bảng khung hiển thị để tạo thẻ tiêu đề phối màu cho một bài hát dựa trên ảnh 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 thay đổi. Đối tượng 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 hồ sơ màu chính từ bitmap để giúp bạn đưa ra lựa chọn thiết kế.

Thiết lập thư viện

Để sử dụng thư viện Palette, hãy thêm đoạn mã sau vào tệp build.gradle:

Kotlin

android {
    compileSdkVersion(36)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

Groovy

android {
    compileSdkVersion 36
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

Tạo bảng màu

Đối tượng Palette cho phép bạ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 phủ lên. Sử dụng bảng màu để thiết kế kiểu cho ứng dụng và thay đổi linh động bảng phối màu của ứng dụng dựa trên một hình ảnh nguồn nhất định.

Để tạo bảng khung hiển thị, trước tiên, hãy tạo thực thể cho 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ả cách tạo và tuỳ chỉnh bảng màu từ hình ảnh bitmap.

Tạo một thực thể Palette

Tạo một thực thể Palette bằng phương thức from(Bitmap bitmap) của thực thể đó để trước tiên tạo một Palette.Builder từ Bitmap.

Trình tạo có thể tạo bảng màu đồng bộ hoặc không đồng bộ. Sử dụng tính nă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 luồng với phương thức đang được gọi. Nếu bạn tạo bảng màu không đồng bộ, trên một luồng khác, hãy sử dụng phương thức onGenerated() để truy cập vào bảng màu ngay sau khi tạo.

Đoạn mã sau đây cung cấp các phương thức ví dụ cho cả hai loại tạo bảng màu:

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 khung hiển thị cho một danh sách hình ảnh hoặc đối tượng được sắp xếp, hãy cân nhắc việc lưu vào bộ nhớ đệm các thực thể Palette để tránh làm chậm hiệu suất giao diện người dùng. Đừng tạo 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 số lượng màu trong bảng màu kết quả, vùng hình ảnh mà trình tạo sử dụng để tạo bảng màu và màu sắc 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 thức sau trong lớp Palette.Builder:

addFilter()
Phương thức này thêm một bộ lọc cho biết những màu nào được phép trong bảng màu kết quả. Truyền vào Palette.Filter của riêng bạn và sửa đổi phương thức isAllowed() của phương thức đó để xác định màu nào được lọc từ bảng màu.
maximumColorCount()
Phương thức này đặt số lượng màu tối đa trong bảng màu của bạn. Giá trị mặc định là 16 và giá trị tối ưu phụ thuộc vào hình ảnh nguồn. Đối với ảnh phong cảnh, giá trị tối ưu nằm trong khoảng từ 8 đến 16, trong khi ảnh có khuôn mặt thường có giá trị từ 24 đến 32. Palette.Builder mất nhiều thời gian hơn để tạo bảng màu có nhiều màu hơn.
setRegion()
Phương thức này cho biết vùng nào của bitmap mà trình tạo sử dụng khi tạo bảng khung hiển thị. Bạn chỉ có thể sử dụng phương thức này khi tạo bảng khung hiển thị từ bitmap và phương thức này không ảnh hưởng đến hình ảnh gốc.
addTarget()
Phương thức này cho phép bạn tự so khớp màu bằng cách thêm một hồ sơ màu Target vào trình tạo. Nếu Target mặc định không đủ, thì các nhà phát triển nâng cao có thể tạo Target của riêng họ bằng cách sử dụng Target.Builder.

Trích xuất cấu hình màu

Dựa trên các tiêu chuẩn của Material Design, thư viện Palette sẽ trích xuất các hồ sơ màu thường dùng từ một hình ảnh. Mỗi hồ sơ được xác định bằng một Target và màu sắc được trích xuất từ hình ảnh bitmap được tính điểm theo từng hồ sơ dựa trên độ bão hoà, độ sáng và số lượng (số pixel trong bitmap được biểu thị bằng màu sắc). Đối với mỗi hồ sơ, màu có điểm số cao nhất sẽ xác định hồ sơ màu đó cho hình ảnh đã cho.

Theo mặc định, đối tượng Palette chứa 16 màu chính từ một hình ảnh nhất định. 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 sẽ mang lại nhiều kết quả phù hợp tiềm năng hơn cho mỗi hồ sơ màu, nhưng cũng khiến Palette.Builder mất nhiều thời gian hơn khi tạo bảng màu.

Thư viện Palette cố gắng trích xuất 6 hồ sơ màu sau:

  • Sáng rực rỡ
  • Rực rỡ
  • Rực rỡ tối
  • Màu sáng nhẹ
  • Bị ẩn
  • Màu tối trầm

Mỗi phương thức get<Profile>Color() trong Palette sẽ trả về màu trong bảng màu liên kết với hồ sơ cụ thể đó, trong đó <Profile> được thay thế bằng tên của một trong sáu hồ sơ màu. Ví dụ: phương thức để lấy hồ sơ màu Sống động tối là getDarkVibrantColor(). Vì không phải hình ảnh nào cũng chứa tất cả hồ sơ màu, hãy cung cấp một màu mặc định để trả về.

Hình 1 cho thấy một bức ảnh và hồ sơ màu tương ứng từ các phương thức get<Profile>Color().

Hình ảnh cho thấy cảnh hoàng hôn ở bên trái và bảng màu được trích xuất ở bên phải.
Hình 1. Hình ảnh ví dụ và hồ sơ màu được trích xuất dựa trên số màu tối đa mặc định (16) cho bảng màu.

Sử dụng bảng màu để tạo bảng phối màu

Lớp Palette cũng tạo các đối tượng Palette.Swatch cho mỗi hồ sơ màu. Đối tượng Palette.Swatch chứa màu liên kết cho hồ sơ đó cũng như số lượng màu tính bằng pixel.

Mẫu màu có các phương thức bổ sung để truy cập thêm thông tin về hồ sơ màu, chẳng hạn như giá trị HSL và số lượng pixel. Bạn có thể sử 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 các phương thức getBodyTextColor() và getTitleTextColor(). Các phương thức này trả về màu sắc phù hợp để sử dụng trên màu của mẫu màu.

Mỗi phương thức get<Profile>Swatch() từ Palette sẽ trả về mẫu màu liên kết với hồ sơ cụ thể đó, trong đó <Profile> được thay thế bằng tên của một trong sáu hồ sơ màu. Mặc dù các phương thức get<Profile>Swatch() của bảng khung hiển thị không yêu cầu tham số giá trị mặc định, nhưng các phương thức này sẽ trả về null nếu hồ sơ cụ thể đó không tồn tại trong hình ảnh. Do đó, hãy kiểm tra để đảm bảo rằng mẫu màu không rỗng trước khi sử dụng. Ví dụ: đoạn mã sau đây lấy màu văn bản tiêu đề từ một bảng khung hiển thị nếu mẫu màu Sặc sỡ không 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ả màu trong bảng màu, phương thức getSwatches() sẽ trả về danh sách tất cả các mẫu màu được tạo từ một hình ảnh, bao gồm cả 6 hồ sơ màu tiêu chuẩn.

Đoạn mã sau đây sử dụng các phương thức từ đoạn mã trước đó để tạo bảng màu một cách đồng bộ, lấy mẫu 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 cho thấy hình ảnh và thanh công cụ thu được.

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);
}
Hình ảnh cho thấy cảnh hoàng hôn và thanh công cụ có TitleTextColor bên trong
Hình 2. Hình ảnh ví dụ có thanh công cụ màu rực rỡ và màu văn bản tiêu đề tương ứng.