עיצוב חזותי טוב הוא חיוני לאפליקציה מוצלחת, וערכות צבעים הן המרכיב העיקרי בעיצוב. ספריית Palette היא Jetpack ספרייה שמחלצת צבעים בולטים מתמונות כדי ליצור תוכן מושך תרגום מכונה.
אפשר להשתמש בספריית 'לוח צבעים' כדי לעצב את הפריסה
עיצובים ולהחיל צבעים בהתאמה אישית על
של רכיבים חזותיים באפליקציה. לדוגמה, אפשר להשתמש בלוח כדי ליצור
רצועת כותרת בחלוקה לפי צבעים לשיר על סמך עטיפת האלבום שלו או כדי לערוך
צבע סרגל הכלים של האפליקציה כאשר תמונת הרקע שלה משתנה.
Palette
שנותן לכם גישה לצבעים
תמונה אחת (Bitmap
)
וגם לספק שישה פרופילים של צבעים עיקריים ממפת סיביות כדי לספק מידע
אפשרויות עיצוב.
הגדרת הספרייה
כדי להשתמש בספריית 'פלטות', צריך להוסיף את הפריטים הבאים אל
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
כדי
להתאים אישית את הלוח לפני יצירתו. בקטע הזה מתואר לוח הצבעים
יצירה והתאמה אישית מתמונה של מפת סיביות (bitmap).
יצירת מופע של פלטת צבעים
יצירת מכונה של Palette
באמצעות
from(Bitmap bitmap)
כדי ליצור קודם Palette.Builder
Bitmap
ה-builder יכול ליצור את לוח הצבעים באופן סינכרוני או אסינכרוני. כדאי להשתמש
יצירת לוח צבעים סינכרוני אם רוצים ליצור את לוח הצבעים
Thread בתור ה-method של הקריאה. אם יוצרים את לוח הצבעים באופן אסינכרוני,
בשרשור אחר, משתמשים
onGenerated()
כדי לגשת ללוח העריכה מיד לאחר יצירתו.
קטע הקוד הבא מספק שיטות לדוגמה לשני סוגי לוחות הצבעים של Google:
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
מכונות כדי למנוע ביצועים איטיים של ממשק המשתמש. אין ליצור את
לוחות צבעים
ה-thread הראשי.
התאמה אישית של לוח הצבעים
ב-Palette.Builder
אפשר להתאים אישית את לוח הצבעים
כמה צבעים קיימים בלוח הצבעים שמתקבל, איזה אזור בתמונה
ליצירת לוח הצבעים, ואילו צבעים כלולים
לוח צבעים. לדוגמה, ניתן לסנן את הצבע השחור או לוודא שהכלי
משתמשת רק בחצי העליון של התמונה כדי ליצור את לוח הצבעים.
כוונון הגודל והצבעים של לוח הצבעים באמצעות השיטות הבאות
כיתה אחת (Palette.Builder
):
addFilter()
- השיטה הזו מוסיפה מסנן שמציין אילו צבעים מותר להשתמש בהם
של התוצאות. הכרטיס בעצמך
Palette.Filter
ולשנות את השיטהisAllowed()
כדי לקבוע אילו צבעים מסונן דרך לוח הצבעים. maximumColorCount()
- השיטה הזו קובעת את מספר הצבעים המקסימלי בלוח הצבעים. ברירת המחדל
הוא 16, והערך האופטימלי תלוי בתמונת המקור. עבור
נופים, ערכים אופטימליים נעים בין 8 ל-16, בעוד שתמונות עם פנים בדרך כלל
הם בין 24 ל-32. הנסיעה ב
Palette.Builder
נמשכת יותר זמן עד ליצור לוחות צבעים עם יותר צבעים. setRegion()
- השיטה הזו מציינת את האזור במפת סיביות (bitmap) שבו הבונה משתמש יצירת לוח הצבעים. אפשר להשתמש בשיטה הזו רק ליצירת לוח הצבעים ממפת סיביות (bitmap), והוא לא משפיע על התמונה המקורית.
addTarget()
- השיטה הזו מאפשרת לך לבצע התאמת צבעים משלך על ידי הוספת
Target
פרופיל צבעים ל-builder. אם ערך ברירת המחדל הואTarget
מפתחים מתקדמים ומספיקים יכולים ליצורTarget
משלהם באמצעותTarget.Builder
.
חילוץ פרופילים של צבעים
על סמך
סטנדרטים של חומר
עיצוב, ספריית הצבעים מחלצת פרופילי צבעים נפוצים
תמונה. כל פרופיל מוגדר על ידי Target
, והצבעים שלו נשלפו
מהתמונה של מפת הסיביות מקבלים דירוג ביחס לכל פרופיל בהתבסס על רוויה,
בהארה, באוכלוסייה (מספר הפיקסלים במפת סיביות מיוצגים על ידי
בצבע). בכל פרופיל, הצבע עם הציון הטוב ביותר מגדיר את הצבע
של התמונה הנתונה.
כברירת מחדל, אובייקט Palette
מכיל 16 צבעי יסוד
של התמונה הנתונה. בזמן יצירת לוח הצבעים, ניתן
להתאים אישית את מספר הצבעים באמצעות
Palette.Builder
. חילוץ צבעים נוסף מעניק פוטנציאל גבוה יותר
תואם לכל פרופיל צבע, אבל הוא גם גורם ל-Palette.Builder
שייקח יותר זמן בעת יצירת לוח הצבעים.
ספריית הצבעים מנסה לחלץ את ששת הפרופילים הבאים של צבעים:
- מלא חיים בהיר
- מלא חיים
- כהה ועז
- השתקפות בהירה
- הושתק
- כהה מושתק
כל אחת מ-get<Profile>Color()
ה-methods ב-
הפונקציה Palette
מחזירה את הצבע של הלוח המשויך לזה
פרופיל ספציפי, שבו <Profile>
מוחלף ב-
השם של אחד מששת הפרופילים של צבעים. לדוגמה, השיטה לקבל את
פרופיל הצבעים הכהה הבהיר הוא
getDarkVibrantColor()
מאחר שלא כל התמונות כוללות את כל הפרופילים של הצבעים, יש לספק צבע ברירת מחדל ל
החזרה.
איור 1 מציג תמונה ופרופילי הצבע התואמים שלה
get<Profile>Color()
אמצעי תשלום.
שימוש בדוגמיות כדי ליצור ערכות צבעים
המחלקה Palette
יוצרת גם
Palette.Swatch
אובייקטים לכל פרופיל צבע. Palette.Swatch
אובייקטים מכילים את האובייקט
את הצבע המשויך לפרופיל הזה וגם את אוכלוסיית הצבע
פיקסלים.
לדוגמיות יש שיטות נוספות לגשת למידע נוסף על
פרופיל צבעים, כמו ערכי HSL ואכלוס פיקסלים. אפשר להשתמש בדוגמיות כדי
עוזרים ליצור ערכות צבעים ועיצובים מקיפים יותר לאפליקציות
getBodyTextColor()
וגם
getTitleTextColor()
שיטות. שיטות אלה מחזירות צבעים מתאימים לשימוש מעל
צבע.
בכל get<Profile>Swatch()
methods מ-
הפקודה Palette
מחזירה את הדוגמית שמשויכת לפרופיל הספציפי הזה,
כאשר <Profile>
מוחלף בשם של אחד מ-
פרופילים של ששת הצבעים. למרות שמאפיין לוח הצבעים
get<Profile>Swatch()
שיטות לא מחייבות ברירת מחדל
של ערך הפרמטר, הם מחזירה null
אם הפרופיל המסוים הזה
לא קיים בתמונה. לכן, צריך לוודא שדוגמית היא לא 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); }