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 tốt là điều cần thiết cho sự thành công của ứng dụng và bảng phối màu là thành phần chính của thiết kế. Chiến lược phát hành đĩa đơn Thư viện bảng khung hiển thị là một Jetpack thư viện trích xuất các màu nổi bật từ hình ảnh để tạo hình ảnh hấp dẫn của chúng tôi.

Bạn có thể 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 tuỳ chỉnh cho các phần tử hình ảnh trong ứng dụng của mình. Ví dụ: bạn có thể sử dụng bảng màu để tạo một thẻ tiêu đề được 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 thanh công cụ của ứng dụng khi hình nền của ứng dụng thay đổi. Chiến lược phát hành đĩa đơn 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 để thông báo cho 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 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 ứng dụng và linh động thay đổi bảng phối màu của ứng dụng 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ả bảng màu tạo và tuỳ chỉnh 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 from(Bitmap bitmap) để tạo Palette.Builder từ mộ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ạ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 làm phương thức được gọi. Nếu bạn tạo bảng màu một cách không đồng bộ, trên một chuỗi khác, hãy sử dụng onGenerated() để truy cập vào bảng màu ngay sau khi bảng được 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 một danh sách hình ảnh hoặc mà bạn cần cân nhắc lưu vào bộ nhớ đệm Palette để ngăn hiệu suất giao diện người dùng bị chậm. Đừng tạo các 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 pháp này thêm một bộ lọc cho biết màu nào đượ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 giúp thiết lập số lượng màu tối đa trong bảng màu của bạn. Mặc định giá trị là 16 và giá trị tối ưu phụ thuộc vào hình ảnh nguồn. Cho phong cảnh, giá trị tối ưu nằm trong khoảng từ 8 đến 16, trong khi các ảnh có khuôn mặt thường có các giá trị từ 24-32. Palette.Builder mất nhiều thời gian hơn để tạo các bảng màu với 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 màu. Bạn chỉ có thể sử dụng phương thức này khi tạo bảng màu từ một bitmap và 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ơ do một Target xác định và các màu được trích xuất từ hình ảnh bitmap được tính điểm cho từng hồ sơ dựa trên độ bão hoà, độ chói và tổng thể (số pixel trong bitmap được biểu thị bằng giá trị màu). Đối với mỗi hồ sơ, màu có điểm số cao nhất sẽ xác định màu đó cho hình ảnh đã cho.

Theo mặc định, một đối tượng Palette chứa 16 màu chính trong một hình ảnh được cung cấp. 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 giúp tăng tiềm năng khớp với từng cấu hình màu, nhưng cũng gây ra Palette.Builder mất nhiều thời gian hơn khi tạo bảng.

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 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ị ảnh và các cấu hình màu tương ứng từ get<Profile>Color() phương thức.

Hình ảnh cho thấy cảnh hoàng hôn ở bên trái và bảng màu đã trích xuất ở bên phải. — **Hình 1.** Một hình ảnh ví dụ và hồ sơ màu đã trích xuất dựa trên giá trị 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 Palette.Swatch cho từng cấu hình màu. Đối tượng Palette.Swatch chứa màu được liên kết cho cấu hình đó cũng như tập hợp của màu trong điểm ảnh.

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ể 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 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 6 cấu hình màu. Mặc dù bảng màu Phương thức get<Profile>Swatch() không yêu cầu giá trị mặc định các tham số giá trị này, chúng sẽ trả về null nếu cấu hình cụ thể đó không tồn tại trong hình ảnh này. Do đó, hãy kiểm tra để đảm bảo một bộ sưu tập trước đó có giá trị rỗng đang sử dụng nó. 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 dùng các phương thức của mã trước đó các đoạn mã để tạo một cách đồng bộ bảng màu, tạo ra bảng 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ả.

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 thể hiện cả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.