اختيار الألوان باستخدام Palette API

إنّ التصميم المرئي الجيد هو أمر أساسي لنجاح التطبيق، وأنظمة الألوان هي أحد المكونات الأساسية للتصميم. تشير رسالة الأشكال البيانية مكتبة لوحات الألوان هي حزمة Jetpack مكتبة تستخرج الألوان البارزة من الصور لإنشاء محتوى جذاب بصريًا التطبيقات.

يمكنك استخدام مكتبة "لوحة الألوان" لتصميم مظاهر التنسيق وتطبيق ألوان مخصّصة على العناصر المرئية في تطبيقك. على سبيل المثال، يمكنك استخدام لوحة ألوان لإنشاء بطاقة عنوان ملف شخصي متناسقة الألوان لأغنية استنادًا إلى غلاف الألبوم أو لتعديل لون شريط أدوات التطبيق عند تغيير صورة الخلفية. تشير رسالة الأشكال البيانية Palette يتيح لك الوصول إلى الألوان في صورة واحدة (Bitmap) مع توفير ستة ملفات شخصية رئيسية للألوان من الصورة النقطية لإبلاغ خيارات التصميم.

إعداد المكتبة

لاستخدام مكتبة Palette، أضف ما يلي إلى build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

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

رائع

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

إنشاء لوحة

يتيح لك عنصر Palette الوصول إلى الألوان الأساسية في بالإضافة إلى الألوان المقابلة للنص المركّب. استخدِم لوحات الألوان لتحديد أسلوب تطبيقك وتغيير مخطط ألوانه ديناميكيًا استنادًا إلى صورة مصدر معيّنة.

لإنشاء لوحة ألوان، أنشئ أولاً مثيلاً Palette.Builder من Bitmap. يمكنك بعد ذلك استخدام Palette.Builder من أجل تخصيص اللوحة قبل إنشائها. يصف هذا القسم إنشاء لوحة الألوان وتخصيصها من صورة نقطية.

إنشاء مثيل Palette

أنشئ مثيل Palette باستخدام الطريقة from(Bitmap bitmap) لإنشاء Palette.Builder أولاً من Bitmap.

يمكن لصانع المحتوى إنشاء لوحة الألوان بشكل متزامن أو غير متزامن. استخدِم إنشاء لوحة الألوان المتزامنة إذا كنت تريد إنشاء لوحة الألوان في السلسلة المتزامنة نفسها التي يتم استدعاء الطريقة فيها. إذا أنشأت لوحة الألوان بشكل غير متزامن، في سلسلة محادثات مختلفة، استخدِم الأسلوب onGenerated() للوصول إلى لوحة الألوان مباشرةً بعد إنشائها.

يقدّم مقتطف الرمز البرمجي التالي أمثلة على الطريقتَين ل إنشاء لوحة الألوان:

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

إذا كنت بحاجة إلى إنشاء لوحات باستمرار لقائمة مرتبة من الصور أو الكائنات، ضع في اعتبارك التخزين المؤقت Palette مثيل لمنع بطء أداء واجهة المستخدم لا تنشئ اللوحات على سلسلة التعليمات الرئيسية.

تخصيص لوحة الألوان

تتيح لك Palette.Builder تخصيص اللوحة من خلال اختيار عدد الألوان في لوحة الألوان الناتجة، ومساحة الصورة المستخدم لإنشاء لوحة الألوان، وما الألوان المضمنة في اللوحة. على سبيل المثال، يمكنك تصفية اللون الأسود أو التأكد من أن أداة الإنشاء فقط النصف العلوي من الصورة لإنشاء لوحتك.

يمكنك ضبط حجم لوحتك وألوانها بالطرق التالية من صف واحد (Palette.Builder):

addFilter()

تضيف هذه الطريقة فلترًا يشير إلى الألوان المسموح بها في لوحة الألوان الناتجة. اجتياز الاختبار الخاص بك Palette.Filter وتعديل طريقة isAllowed() لتحديد الألوان تصفيته من لوحة الألوان.

maximumColorCount()

تحدّد هذه الطريقة الحد الأقصى لعدد الألوان في لوحة الألوان. الإعداد التلقائي هي 16، وتعتمد القيمة المثلى على الصورة المصدر. بالنسبة إلى المناظر الطبيعية، تتراوح القيم المثلى بين 8 و16، في حين تتراوح القيم المعتادة للصور التي تحتوي على وجوه بين 24 و32. يستغرق Palette.Builder وقتًا أطول ل إنشاء لوحات ألوان تحتوي على المزيد من الألوان.

setRegion()

تشير هذه الطريقة إلى منطقة الصورة النقطية التي يستخدمها أداة الإنشاء عند إنشاء لوحة الألوان. لا يمكنك استخدام هذه الطريقة إلا عند إنشاء لوحة الألوان من صورة نقطية، ولا تؤثّر هذه الطريقة في الصورة الأصلية.

addTarget()

تتيح لك هذه الطريقة مطابقة الألوان عن طريق إضافة Target ملف تعريف الألوان إلى أداة الإنشاء. إذا كانت قيمة Target التلقائية هي غير كافية، يمكن للمطوّرين المتقدمين إنشاء Target خاصة بهم باستخدام Target.Builder

استخراج ملفات تعريف الألوان

استنادًا إلى معايير المواد للتصميم، تستخرج مكتبة لوحة الألوان ملفات تعريف الألوان الشائعة الاستخدام من . يتم تحديد كل ملف شخصي من خلال Target، ويتم استخراج الألوان. من الصورة النقطية في مقابل كل ملف تعريفي بناءً على تشبعها، الضوء والسكان (عدد وحدات البكسل في الصورة النقطية التي يمثلها اللون). بالنسبة لكل ملف تعريف، يحدد اللون الحاصل على أفضل درجة هذا اللون الخاص بالصورة المحددة.

يحتوي عنصر Palette بشكل تلقائي على 16 لونًا أساسيًا من الصورة المحددة. عند إنشاء لوحة الألوان، يمكنك تخصيص عدد الألوان باستخدام Palette.Builder. تؤدي عملية استخراج المزيد من الألوان إلى توفير المزيد من المطابقات المحتملة لكل ملف ألوان، ولكنّها تؤدي أيضًا إلى أن يستغرق Palette.Builder وقتًا أطول عند إنشاء لوحة الألوان.

تحاول مكتبة Palette استخراج الملفات الستة التالية لملفات تعريف الألوان:

• ألوان ساطعة
• نابض
• نابض بالحياة
• ضوء خافت
• كتم الصوت
• تم كتم الصوت

كل طريقة من طرق get<Profile>Color() في تعرض Palette اللون في اللوحة المرتبطة بذلك ملف شخصي معين، حيث يتم استبدال <Profile> اسم أحد ملفات تعريف الألوان الستة. على سبيل المثال، طريقة الحصول على ملف ألوان Dark Vibrant هي getDarkVibrantColor(). بما أنّ بعض الصور لا تحتوي على جميع الملفات الشخصية للألوان، قدِّم لونًا تلقائيًا لمحاولة معالجة الصورة.

يعرض الشكل 1 صورة وملفات تعريف الألوان المقابلة لها من get<Profile>Color() طريقة

الشكل 1. مثال على صورة وملفات ألوان مستخرَجة منها استنادًا إلى العدد التلقائي الأقصى للألوان (16) في لوحة الألوان

استخدم العينات لإنشاء أنظمة ألوان

تنشئ الفئة Palette أيضًا. Palette.Swatch الكائنات لكل ملف تعريف للألوان. تحتوي عناصر Palette.Swatch على اللون المرتبط بهذا الملفّ الشخصي بالإضافة إلى عدد مثيلات اللون في البكسلات.

تتوفر في العينات طرق إضافية للوصول إلى مزيد من المعلومات حول مثل قيم HSL وسكان البكسل. يمكنك استخدام عيّنات الألوان للمساعدة في إنشاء أنظمة ألوان ومظاهر تطبيقات أكثر شمولاً باستخدام الطريقتَين getBodyTextColor() و getTitleTextColor() . تعرض هذه الطرق ألوانًا مناسبة للاستخدام على لون عيّنة اللون.

تُعرِض كل طريقة من طرق get<Profile>Swatch() من Palette عيّنة اللون المرتبطة بهذا الملف الشخصي المحدّد، حيث يتم استبدال <Profile> باسم أحد ملفات ألوان الملابس الستة. على الرغم من أنّ طرق get<Profile>Swatch() لوحة الألوان لا تتطلّب مَعلمات قيمة تلقائية، فإنّها تعرض null إذا لم يكن هذا الملف الشخصي متوفّرًا في الصورة. لذلك، تأكَّد من أنّ عيّنة اللون ليست فارغة قبل استخدامها. على سبيل المثال، تحصل التعليمة البرمجية التالية على لون نص العنوان من إذا لم تكن العينة الحيوية فارغة:

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

للوصول إلى جميع الألوان في لوحة ما، getSwatches() قائمة بجميع العينات التي تم إنشاؤها من صورة، بما في ذلك ستة ملفات تعريفية للألوان القياسية.

تستخدِم المقتطف التالي من الرمز البرمجي طُرقًا من مقتطفات الرمز البرمجي السابقة لإنشاء لوحة ألوان بشكل متزامن، والحصول على عيّنة ألوانها الحيوية، وتغيير ألوان شريط الأدوات لمطابقة صورة البِتّات. يعرض الشكل 2 الصورة وشريط الأدوات الناتجة.

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

الشكل 2. مثال على صورة تتضمّن شريط أدوات بألوان زاهية ولون نص العنوان المقابل