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

Thiết kế hình ảnh đẹp là yếu tố thiết yếu để tạo nên 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 là một thư viện Jetpack trích xuất các màu sắc 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 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 màu để tạo thẻ tiêu đề được phối màu cho một bài hát dựa trên bìa đĩa 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 để thông báo cho lựa chọn thiết kế của bạn.

Thiết lập thư viện

Để sử dụng thư viện Palette, hãy thêm nội dung 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 cho phép bạn truy cập vào các màu chính trong hình ảnh cũng như các màu tương ứng cho văn bản được phủ lên. Sử dụng bảng màu để thiết kế kiểu của ứng dụng và thay đổi linh hoạt 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 bản sao của 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 một cách đồ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 mẫu cho cả hai loại 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 bảng màu cho danh sách hình ảnh hoặc đối tượng đã 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 hiệu suất giao diện người dùng bị chậm. Đừ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 thu được, khu vực 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.

Điều 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 đây 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 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() của bảng màu để xác định màu nào được lọc ra khỏi 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. 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 ngang, giá trị tối ưu dao độ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 bitmap mà trình tạo 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ừ 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 hồ sơ màu Target vào trình tạo. Nếu Target mặc định không đủ, 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 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à 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à số lượng (số pixel trong bitmap được biểu thị bằng màu). Đố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ẽ cung cấp 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ỡ
• Dark Vibrant
• Light Muted
• Tắt tiếng
• Tối bị tắt tiếng

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 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ắc độ đậm rực rỡ 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 hiển thị một bức ảnh và hồ sơ màu tương ứng của bức ảnh đó từ 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 hồ sơ màu. Các đối tượng Palette.Swatch chứa màu được liên kết cho hồ sơ đó cũng như số lượng màu trong pixel.

Bảng 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 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 sáu hồ sơ màu. Mặc dù các phương thức get<Profile>Swatch() của bảng màu 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 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 bảng màu không có giá trị rỗng trước khi sử dụng. Ví dụ: mã sau đây lấy màu văn bản tiêu đề từ bảng màu nếu bảng màu Sắc độ sống động không 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 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 bảng 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 trong các đoạn mã trước đó để đồng bộ tạo một bảng màu, lấy bảng màu sống động 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ụ 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);
}