בחירת צבעים באמצעות Palette API

עיצוב חזותי טוב הוא חיוני לאפליקציה מוצלחת, וערכות צבעים הן רכיב ראשי בעיצוב. ספריית Palette היא ספריית Jetpack שמנתחת צבעים בולטים מתמונות כדי ליצור אפליקציות מרתקות מבחינה ויזואלית.

אתם יכולים להשתמש בספריית Palette כדי לעצב עיצובים של פריסות ולהחיל צבעים בהתאמה אישית על רכיבים חזותיים באפליקציה. לדוגמה, אתם יכולים להשתמש בלוח צבעים כדי ליצור כרטיס כותרת עם צבעים תואמים לשיר על סמך עטיפת האלבום שלו, או כדי לשנות את צבע סרגל הכלים של האפליקציה כשתמונת הרקע שלה משתנה. האובייקט Palette מספק גישה לצבעים בתמונה Bitmap, וגם שישה פרופילי צבעים ראשיים מהביטמפט שיעזרו לכם לבצע בחירות עיצוב.

הגדרת הספרייה

כדי להשתמש בספרייה Palette, מוסיפים את הקוד הבא ל-build.gradle:

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 באמצעות ה-method‏ from(Bitmap bitmap) כדי ליצור קודם Palette.Builder מ-Bitmap.

ה-builder יכול ליצור את הצבעים באופן סינכרוני או אסינכררוני. כדאי להשתמש ביצירת צבעים רציפה אם רוצים ליצור את הצבעים באותו חוט שבו נקראת השיטה. אם יוצרים את הצבעים באופן אסינכררוני, בשרשור אחר, צריך להשתמש ב-method‏ onGenerated() כדי לגשת לצבעים מיד אחרי היצירה שלהם.

קטע הקוד הבא מכיל שיטות לדוגמה לשני סוגי היצירה של צבעים:

// 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.
    }
}

// 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 אפשר להתאים אישית את לוח הצבעים על ידי בחירה של מספר הצבעים בלוח הצבעים שנוצר, האזור בתמונה שבו ה-builder משתמש כדי ליצור את לוח הצבעים ואילו צבעים ייכללו בלוח הצבעים. לדוגמה, אפשר לסנן את הצבע שחור או לוודא שהכלי ישתמש רק בחלק העליון של התמונה כדי ליצור את הצבעים בצבעים.

אפשר לשנות את הגודל והצבעים של לוח הצבעים באמצעות השיטות הבאות מהקלאס Palette.Builder:

addFilter()

השיטה הזו מוסיפה מסנן שמציין אילו צבעים מותרים בלוח הצבעים שנוצר. מעבירים את Palette.Filter שלכם ומשמנים את השיטה isAllowed() כדי לקבוע אילו צבעים יסוננו מהלוח.

maximumColorCount()

השיטה הזו מגדירה את מספר הצבעים המקסימלי בלוח הצבעים. ערך ברירת המחדל הוא 16, והערך האופטימלי תלוי בתמונה המקורית. בתמונות לאורך, הערכים האופטימליים נעים בין 8 ל-16, ובתמונות עם פנים הערכים בדרך כלל נעים בין 24 ל-32. יצירת לוחות צבעים עם יותר צבעים נמשכת יותר זמן ב-Palette.Builder.

setRegion()

השיטה הזו מציינת באיזה אזור של קובץ ה-bitmap ה-builder משתמש כשיוצר את הצבעים. אפשר להשתמש בשיטה הזו רק כשיוצרים את הצבעים מ-bitmap, והיא לא משפיעה על התמונה המקורית.

addTarget()

השיטה הזו מאפשרת לבצע התאמת צבעים משלכם על ידי הוספת פרופיל צבע Target ל-builder. אם Target שמוגדרת כברירת מחדל לא מספיקה, מפתחים מתקדמים יכולים ליצור Target משלהם באמצעות Target.Builder.

חילוץ פרופילי צבע

על סמך הסטנדרטים של עיצוב חדשני תלת-ממדי, ספריית Palette מחלצת תמונות מתמונה פרופילי צבעים נפוצים. כל פרופיל מוגדר על ידי Target, והצבעים שחולצו מתמונת הבייטמאפ מקבלים ניקוד לפי כל פרופיל על סמך הרוויה, הלומינסנציה והאוכלוסייה (מספר הפיקסלים בביטמאפ שמיוצגים על ידי הצבע). לכל פרופיל, הצבע עם הדירוג הגבוה ביותר מגדיר את פרופיל הצבע הזה לתמונה הנתונה.

כברירת מחדל, אובייקט Palette מכיל 16 צבעים ראשיים מתמונה נתונה. כשיוצרים לוח צבעים, אפשר להתאים אישית את מספר הצבעים שלו באמצעות הערך Palette.Builder. חילוץ של יותר צבעים מספק יותר התאמות פוטנציאליות לכל פרופיל צבע, אבל גם מאריך את זמן היצירה של לוח הצבעים ב-Palette.Builder.

ספריית Palette מנסה לחלץ את ששת פרופילי הצבעים הבאים:

• בהיר ועז
• מלא חיים
• כהה וססגוני
• אור מושתק
• הושתק
• כהה מושתק

כל אחת מהשיטות 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 אם הפרופיל הספציפי לא קיים בתמונה. לכן, לפני שמשתמשים במדגם, צריך לוודא שהוא לא null. לדוגמה, הקוד הבא מקבל את צבע הטקסט של הכותרת מתוך צבעים, אם תבנית הצבעים של Vibrant לא ריקה:

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

כדי לגשת לכל הצבעים בלוח, ה-method‏ getSwatches() מחזיר רשימה של כל דוגמיות הצבע שנוצרו מהתמונה, כולל ששת פרופילי הצבעים הרגילים.

קטע הקוד הבא משתמש בשיטות מקטע הקוד הקודם כדי ליצור לוח צבעים באופן סינכרוני, לקבל את תבנית הצבעים הזוהרת שלו ולשנות את הצבעים בסרגל הכלים כך שיתאים לתמונה בפורמט bitmap. באיור 2 מוצגים התמונה וסרגל הכלים שנוצרו.

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

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