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

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

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

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

لاستخدام مكتبة لوحة الألوان، أضِف ما يلي إلى 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 باستخدام طريقته 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.

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

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

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

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

• نابض بالحياة
• نابض
• نابض بالحياة الداكن
• تم كتم صوت المصابيح
• كتم الصوت
• تم كتم الصوت ببشرة داكنة

تعرض كل طريقة من طرق get<Profile>Color() في Palette اللون في اللوحة المرتبطة بهذا الملف الشخصي تحديدًا، حيث يتم استبدال <Profile> باسم أحد ملفات تعريف الألوان الستة. على سبيل المثال، طريقة الحصول على ملف تعريف الألوان النابضة بالحياة هي 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. مثال على صورة مع شريط أدوات بألوان زاهية ولون نص العنوان المقابل لها.