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

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

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

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

لاستخدام مكتبة Palette، أضف ما يلي إلى 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'
}

إنشاء لوحة

يتيح لك عنصر 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 إلى وقت أطول عند إنشاء لوحة الألوان.

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

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

كل طريقة من طرق 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. مثال لصورة بشريط الأدوات الملون بألوان زاهية لون نص العنوان المقابل.