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

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

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

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

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

addFilter()

‫

This method adds a filter that indicates what colors are allowed in the resulting palette. מעבירים את 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 מנסה לחלץ את ששת פרופילי הצבעים הבאים:

• Light Vibrant
• מלא חיים
• Dark Vibrant
• מושתק קלות
• מושתק
• Dark Muted

כל אחת מהשיטות get<Profile>Color() ב-Palette מחזירה את הצבע בפלטה שמשויכת לפרופיל הספציפי הזה, כאשר <Profile> מוחלף בשם של אחד מששת פרופילי הצבעים. לדוגמה, השיטה לקבלת פרופיל הצבעים Dark Vibrant היא 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);
}