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

Thiết kế trực quan tốt là yếu tố cần thiết để có 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 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 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 Bảng khung hiển thị để thiết kế bố cục giao diện và áp dụng màu sắc tuỳ chỉnh cho các phần tử trực quan trong ứng dụng. Ví dụ: bạn có thể sử dụng bảng màu để tạo thẻ tiêu đề có màu phối hợp 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 Bitmaptrong khi cũng cung cấp sáu hồ sơ màu chính từ bitmap để thông báo cho các 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(36)
    ...
}

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

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 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 ứng dụng và thay đổi bảng phối màu của ứng dụng một cách linh hoạt dựa trên hình ảnh nguồn đã cho.

Để tạo 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ả cách tạo và tuỳ chỉnh bảng màu từ hình ảnh bitmap.

Tạo thực thể Palette

Tạo 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à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:

// 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 lưu vào bộ nhớ đệm các Palette thực thể để ngăn hiệu suất chậm của giao diện người dùng. Khô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 nào được đưa vào bảng màu. Ví dụ: bạn có thể lọc 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 đâ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 nào được phép có trong bảng màu kết quả. Truyền của riêng bạn Palette.Filter và sửa đổi phương thức isAllowed() để xác định những 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. 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.

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 thực hiện việc so khớp màu của riêng mình 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 họ 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 trích xuất các hồ sơ màu thường dùng 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 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). Đố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 đã cho. 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:

• Light Vibrant
• Vibrant
• Dark Vibrant
• Light Muted
• Muted
• Dark Muted

Mỗi phương thức get<Profile>Color() trong Palette trả về màu trong 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 hồ sơ màu. Ví dụ: phương thức để lấy hồ sơ màu Dark Vibrant là getDarkVibrantColor(). Vì không phải tất cả hình ảnh đều chứa tất cả hồ sơ màu, hãy cung cấp màu mặc định để trả về.

Hình 1 hiển thị một bức ảnh và các 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 mẫu màu để tạo bảng phối màu

Lớp Palette cũng tạo Palette.Swatch đối tượng cho mỗi 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 pixel của màu.

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 mẫu màu để giúp 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 trên màu của mẫu màu.

Mỗi phương thức get<Profile>Swatch() từ Palette trả về mẫu 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 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 tham số giá trị mặc định, nhưng chúng 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 phải là giá trị 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ừ Bảng khung hiển thị nếu mẫu màu Rực rỡ không phải là 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 bảng màu, phương thức getSwatches() trả về danh sách tất cả mẫu màu được tạo 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ừ các đoạn mã trước để tạo bảng màu đồ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 hiển thị hình ảnh và thanh công cụ 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);
}