يعد التصميم المرئي الجيد أمرًا ضروريًا لتطبيق ناجح، وتعد أنظمة الألوان المكون الأساسي للتصميم. تشير رسالة الأشكال البيانية مكتبة لوحات الألوان هي حزمة 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()
طريقة
استخدم العينات لإنشاء أنظمة ألوان
تنشئ الفئة 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); }