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

Thiết kế hình ảnh hợp lý 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 khung hiển thị (Palette) 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ể sử 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ể sử 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 của bài hát đó thay đổi. Đối tượng Palette cho phép bạn sử dụng 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 Bảng khung hiển thị, hãy thêm nội dung sau đây 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 sử dụng màu chính trong hình ảnh cũng như các màu tương ứng của văn bản ở lớp phủ. Hãy sử dụng bảng màu để thiết kế kiểu ứ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 một 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ả 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 (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 có thể tạo bảng 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 khung hiển thị:

// 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 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 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 có trong bảng màu thu được, vùng hình ảnh mà trình tạo sử 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 rằng 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 của bảng màu 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 nào đượ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() để xác định các màu được lọc khỏi bảng màu.

maximumColorCount()

Phương pháp 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 phong cảnh, giá trị tối ưu nằm trong khoảng từ 8 đến 16, trong khi hình ảnh có mặt thường có giá trị từ 24 đến 32. Palette.Builder mất nhiều thời gian hơn để tạo các 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ể dùng phương thức này khi tạo bảng màu từ mộ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 thực hiện quá trình 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 đủ, 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 hồ sơ màu

Dựa trên tiêu chuẩn của Material Design, thư viện 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ơ do một Target xác định và các màu trích xuất từ hình ảnh bitmap được tính điểm cho từng hồ sơ dựa trên độ rực màu, độ sáng và tập hợp (số pixel trong bitmap được biểu thị bằng màu sắc). Đối với mỗi cấu hình, màu có điểm số cao nhất sẽ xác định cấu hình 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 Palette.Builder. Việc trích xuất thêm màu mang lại nhiều khả năng trùng khớp hơn cho từng cấu hình 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 Bảng màu cố gắng trích xuất sáu cấu hình màu sau đây:

• Ánh sáng rực rỡ
• Rực rỡ
• Tối rực rỡ
• Đã tắt tiếng đèn
• Bị tắt tiếng
• Đã tắt tiếng giao diện 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 sắc rực rỡ là getDarkVibrantColor(). Vì không phải mọi hình ảnh đều chứa tất cả cấu hình màu, hãy cung cấp màu mặc định để trả về.

Hình 1 hiển thị ảnh và các cấu hình màu tương ứng của ả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 mỗi 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 màu sắc tính theo pixel.

Các 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ư các giá trị HSL và tập hợp 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ác 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 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 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 màu 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 không có hồ sơ cụ thể đó trong hình ảnh. Do đó, hãy kiểm tra để đảm bảo rằng một bảng màu không rỗng trước khi sử dụng. Ví dụ: Mã sau đây lấy màu văn bản tiêu đề từ một bảng màu nếu bảng màu rực rỡ không phải là màu 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ả cá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 các phương thức từ các đoạn mã trước để tạo đồng bộ một bảng màu, lấy bảng màu rực rỡ và thay đổi màu sắc của thanh công cụ cho phù hợp với hình ảnh bitmap. Hình 2 hiển thị thanh công cụ và hình ảnh kết quả.

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