Trang này được dịch bởi Cloud Translation API.

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 Bảng khung hiển thị, hãy thêm các thông tin sau vào build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

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

Groovy

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 cho văn bản ở lớp phủ. 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ả bảng màu tạo và tuỳ chỉnh 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 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 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 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 bảng màu thế hệ:

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 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 có bao nhiêu màu trong bảng kết quả, vùng hình ảnh của bạn trình tạo 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 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 pháp 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 phép trong bảng màu thu được. Truyền nội dung của riêng bạn Palette.Filter và sửa đổi phương thức isAllowed() để xác định màu nào được lọc khỏi bảng.
maximumColorCount(): Phương thức này đặt số lượng màu tối đa trong bảng màu. Mặc định giá trị 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 pháp này cho phép bạn so khớp màu của riêng mình bằng cách thêm Target vào trình tạo. Nếu Target mặc định là đủ, các nhà phát triển nâng cao có thể tạo Target của riêng mình 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ị) 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à 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:

Rực rỡ sáng
Rực rỡ
Dark Vibrant
Đã tắt tiếng đèn
Bị 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 màu đó hồ sơ cụ thể, trong đó <Profile> được thay thế bằng tên của một trong sáu cấu hình màu. Ví dụ: phương pháp lấy giá trị Hồ sơ màu tối rực rỡ hiện tại getDarkVibrantColor(). Vì không phải hình ảnh nào cũng chứa tất cả cấu hình màu, hãy cung cấp màu mặc định cho lợi nhuận.

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().

Hình ả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 mẫu và hồ sơ màu được trích xuất của hình ảnh đó dựa trên số lượng 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 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.

Các mẫu màu có các phương thức bổ sung để truy cập thêm thông tin về cấu hình màu, chẳng hạn như 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á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 thích hợp để sử dụng thay vì màu của mẫu .

Mỗi phương thức get<Profile>Swatch() từ Palette 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ừ một nếu bảng màu rực rỡ không có giá trị 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ả các màu trong một bảng màu, getSwatches() phương thức trả về danh sách tất cả các mẫu được tạo từ một hình ảnh, bao gồm 6 mà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 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.

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 hoàng hôn và thanh công cụ có TitleTextColor bên trong — **Hình 2.** Hình ảnh ví dụ với thanh công cụ có màu sắc rực rỡ và màu văn bản tiêu đề tương ứng.