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

Thiết kế hình ảnh tốt là điều cần thiết cho một ứng dụng thành công và bảng phối màu là một thành phần chính của thiết kế. Thư viện Palette (Bảng khung hiển thị) là một thư viện Jetpack trích xuất các màu nổi bật từ hình ảnh để tạo ra các ứng dụng bắt mắt.

Bạn có thể dùng thư viện Bảng khung hiển thị để thiết kế giao diện bố cục và áp dụng màu tuỳ chỉnh cho các thành phần hình ảnh trong ứng dụng. Ví dụ: bạn có thể dùng bảng màu để tạo thẻ tiêu đề 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 trên 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 cấu hình màu chính từ bitmap để cung cấp thông tin cho các lựa chọn thiết kế.

Thiết lập thư viện

Để sử dụng thư viện Palette (Bảng khung hiển thị), hãy thêm các dòng sau vào build.gradle:

android {
    compileSdkVersion(33)
    ...
}

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

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 của 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 dựa trên một hình ảnh nguồn nhất định.

Để tạo bảng màu, 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ả việc tạo và tuỳ chỉnh bảng màu 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 phương thức from(Bitmap bitmap) để tạo Palette.Builder từ Bitmap trước.

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ính năng tạo bảng khung hiển thị đồng bộ nếu bạn muốn tạo bảng khung hiển thị 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 khung hiển thị một cách 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 khung hiển thị ngay sau khi tạo.

Đoạn mã sau đây cung cấp các phương thức mẫu cho cả hai kiểu tạo bảng màu:

// 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.
    }
}

// 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 các 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 lưu vào bộ nhớ đệm các thực thể Palette để ngăn hiệu suất giao diện người dùng bị chậm. Đừng tạo các bảng điều khiển 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 thu được, vùng hình ảnh mà trình tạo sử dụng để tạo bảng khung hiển thị 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 khung hiển thị bằng các phương thức sau từ 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 được cho phép trong bảng màu thu được. Truyền vào Palette.Filter của riêng bạn và sửa đổi phương thức isAllowed() để xác định màu nào được lọc khỏi bảng màu.

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. 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 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 mà trình tạo bitmap 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 màu từ bitmap và phương thức này sẽ không ảnh hưởng đến hình ảnh gốc.

addTarget()

Phương thức này cho phép bạn so khớp màu của riêng mình bằng cách thêm cấu hình màu Target vào trình tạo. Nếu Target mặc định không đủ, các nhà phát triển nâng cao có thể tạo Target của riêng mình bằng cách sử dụng Target.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ị) sẽ 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ơ được xác định bằng một Target và các màu được trích xuất từ hình ảnh bitmap được tính điểm dựa trên độ bão hoà, độ chói và tổng thể (số pixel trong bitmap được thể hiện bằng màu). Đối với mỗi hồ sơ, màu có điểm số cao nhất sẽ xác định cấu hình màu đó cho hình ảnh nhất định.

Theo mặc định, một đố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 hơn cho từng cấu hình màu, nhưng điều này 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 (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 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 6 cấu hình màu. Ví dụ: phương thức để lấy cấu hình Màu tối rực rỡ là getDarkVibrantColor(). Vì không phải hình ảnh nào cũng chứa mọi cấu hình màu, hãy cung cấp một màu mặc định để trả về.

Hình 1 hiển thị một ảnh và cấu hình màu tương ứng của ảnh đó trong các phương thức get<Profile>Color().

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 từng cấu hình màu. Các đối tượng Palette.Swatch chứa màu được liên kết cho hồ sơ đó cũng như tập hợp của 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à tập hợp pixel. Bạn có thể sử dụng các 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 phương thức getBodyTextColor() và getTitleTextColor(). Các phương thức này trả về màu thích hợp để sử dụng thay cho màu của bảng màu.

Mỗi phương thức get<Profile>Swatch() từ Palette sẽ 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ù các phương thức get<Profile>Swatch() của bảng khung hiển thị không yêu cầu các tham số giá trị mặc định, nhưng các phương thức này 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 bộ sưu tập không có giá trị rỗng trước khi sử dụng. Ví dụ: Mã sau đây sẽ lấy màu văn bản tiêu đề qua một bảng điều khiển nếu bảng màu rực rỡ không có giá trị rỗng:

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

Để truy cập vào tất cả màu trong một bảng màu, phương thức getSwatches() sẽ trả về danh sách tất cả các bảng màu được tạo từ một hình ảnh, bao gồm cả 6 cấu hình màu tiêu chuẩn.

Đoạn mã sau đây sử dụng phương thức từ các đoạn mã trước đó để tạo đồng bộ một bảng khung hiển thị, có được bảng màu rực rỡ và thay đổi màu sắc của thanh công cụ cho khớp với hình ảnh bitmap. Hình 2 cho thấy hình ảnh và thanh công cụ thu được.

// 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))
    }
}

// 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);
}