Palette API ile renkleri seçme

İyi bir görsel tasarım, başarılı bir uygulama için olmazsa olmazdır ve renk şemaları tasarımın birincil bileşenidir. Palet kitaplığı, görsellerden belirgin renkleri çıkararak görsel açıdan ilgi çekici uygulamalar oluşturan bir Jetpack kitaplığıdır.

Düzen temaları tasarlamak ve uygulamanızdaki görsel öğelere özel renkler uygulamak için Palet kitaplığını kullanabilirsiniz. Örneğin, bir şarkı için albüm kapağına göre renk koordineli bir başlık kartı oluşturmak veya bir uygulamanın arka plan resmi değiştiğinde araç çubuğu rengini ayarlamak için bir palet kullanabilirsiniz. Palette nesnesi, Bitmap resimdeki renklere erişmenizi sağlamanın yanı sıra tasarım seçimlerinizi bildirmek için bit eşlemden altı ana renk profili sağlar.

Kitaplığı kurun

Palet kitaplığını kullanmak için build.gradle öğenize aşağıdakileri ekleyin:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

Modern

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

Palet oluşturun

Palette nesnesi, bir resimdeki ana renklere ve yer paylaşımlı metin için karşılık gelen renklere erişmenizi sağlar. Belirli bir kaynak resme göre uygulamanızın stilini tasarlamak ve uygulamanızın renk şemasını dinamik olarak değiştirmek için paletleri kullanın.

Palet oluşturmak için önce Bitmap öğesinden bir Palette.Builder örneği oluşturun. Ardından, oluşturmadan önce paleti özelleştirmek için Palette.Builder kullanabilirsiniz. Bu bölümde, bit eşlem resimden palet oluşturma ve özelleştirme açıklanmaktadır.

Palet örneği oluşturma

İlk olarak Bitmap öğesinden Palette.Builder oluşturmak için bu öğenin from(Bitmap bitmap) yöntemini kullanarak Palette örneği oluşturun.

Oluşturucu, paleti eşzamanlı veya eşzamansız olarak oluşturabilir. Paleti çağrılan yöntemle aynı iş parçacığı üzerinde oluşturmak istiyorsanız eşzamanlı palet oluşturmayı kullanın. Paleti eşzamansız olarak başka bir iş parçacığında oluşturursanız palete oluşturulduktan hemen sonra erişmek için onGenerated() yöntemini kullanın.

Aşağıdaki kod snippet'i, her iki palet oluşturma türü için örnek yöntemler sağlar:

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

Resimlerin veya nesnelerin sıralı listesi için sürekli olarak paletler oluşturmanız gerekiyorsa kullanıcı arayüzü performansının yavaş olmasını önlemek için Palette örneklerini önbelleğe almayı düşünün. Paletleri ana iş parçacığınızda oluşturmayın.

Paletinizi özelleştirin

Palette.Builder, ortaya çıkan palette kaç renk olacağını, oluşturucunun paleti oluşturmak için resmin hangi alanını kullanacağını ve palete hangi renklerin dahil edileceğini seçerek paletinizi özelleştirmenize olanak tanır. Örneğin, siyah rengi filtreleyebilir veya oluşturucunun, paletinizi oluşturmak için yalnızca resmin üst yarısını kullanmasını sağlayabilirsiniz.

Palette.Builder sınıfında yer alan aşağıdaki yöntemleri kullanarak paletinizin boyutunda ve renklerinde ince ayarlar yapın:

addFilter()
Bu yöntem, üretilen palette hangi renklere izin verildiğini gösteren bir filtre ekler. Kendi Palette.Filter öğenizi geçirin ve Paletten hangi renklerin filtrelendiğini belirlemek için isAllowed() yöntemini değiştirin.
maximumColorCount()
Bu yöntem, paletinizdeki maksimum renk sayısını belirler. Varsayılan değer 16'dır ve optimum değer kaynak görüntüye bağlıdır. Manzaralar için optimum değerler 8-16 arasında değişirken yüz içeren resimler genellikle 24-32 arasındadır. Palette.Builder daha fazla renk içeren paletler oluşturmak için daha uzun sürer.
setRegion()
Bu yöntem, oluşturucunun paleti oluştururken bit eşlemin hangi alanını kullandığını gösterir. Bu yöntemi yalnızca bit eşlemden palet oluştururken kullanabilirsiniz ve bu yöntem orijinal resmi etkilemez.
addTarget()
Bu yöntem, oluşturucuya bir Target renk profili ekleyerek kendi renk eşleştirmenizi yapmanızı sağlar. Varsayılan Target yeterli değilse ileri düzey geliştiriciler Target.Builder kullanarak kendi Target kodlarını oluşturabilirler.

Renk profillerini ayıklama

Palet kitaplığı, Malzeme Tasarımı standartlarına dayalı olarak, bir resimden yaygın olarak kullanılan renk profillerini çıkarır. Her profil bir Target ile tanımlanır ve bit eşlem resminden çıkarılan renkler, doygunluk, parlaklık ve popülasyona (renkle temsil edilen bit eşlemdeki piksel sayısı) göre her bir profile göre puanlanır. Her profil için, en yüksek puanı alan renk, ilgili resmin renk profilini tanımlar.

Varsayılan olarak, bir Palette nesnesi, belirli bir resimden 16 birincil renk içerir. Paletinizi oluştururken Palette.Builder kullanarak renk sayısını özelleştirebilirsiniz. Daha fazla renk ayıklamak her bir renk profili için daha fazla potansiyel eşleşme sağlar ancak palet oluşturulurken Palette.Builder ürününün daha uzun sürmesine de neden olur.

Palet kitaplığı aşağıdaki altı renk profilini çıkarmaya çalışır:

  • Açık Renkli
  • Canlı
  • Koyu Canlı
  • Hafif Kapatılmış
  • Sesi kapatılır.
  • Koyu Renk Kapatılmış

Palette içindeki get<Profile>Color() yöntemlerinin her biri, ilgili profille ilişkili paletteki rengi döndürür. Burada <Profile>, altı renk profilinden birinin adıyla değiştirilir. Örneğin, Koyu Canlı renk profilini alma yöntemi getDarkVibrantColor() şeklindedir. Tüm resimler tüm renk profillerini içermediğinden, döndürülecek varsayılan bir renk sağlayın.

Şekil 1'de get<Profile>Color() yöntemlerinden bir fotoğraf ve ilgili renk profilleri gösterilmektedir.

Solda gün batımını ve sağda ayıklanan renk paletini gösteren bir resim.
Şekil 1. Palet için varsayılan maksimum renk sayısı (16) değerine sahip bir örnek resim ve bu resmin ayıklanmış renk profilleri.

Renk şemaları oluşturmak için kartelaları kullanma

Palette sınıfı ayrıca her bir renk profili için Palette.Swatch nesne oluşturur. Palette.Swatch nesneleri, söz konusu profil için ilişkili rengi ve renk popülasyonunu piksel cinsinden içerir.

Kartelalarda, renk profili hakkında daha fazla bilgiye (ör. HSL değerleri ve piksel popülasyonu) erişmek için ek yöntemler bulunur. getBodyTextColor() ve getTitleTextColor() yöntemlerini kullanarak daha kapsamlı renk şemaları ve uygulama temaları oluşturmaya yardımcı olması için kartelaları kullanabilirsiniz. Bu yöntemler, kartelanın rengi üzerinde kullanılmaya uygun renkleri döndürür.

Palette içindeki her get<Profile>Swatch() yöntemi, söz konusu profille ilişkili kartelayı döndürür. Burada <Profile>, altı renk profilinden birinin adıyla değiştirilir. Paletin get<Profile>Swatch() yöntemleri için varsayılan değer parametreleri gerekmese de söz konusu profil resimde yoksa null değerini döndürür. Bu nedenle, kartelayı kullanmadan önce boş olup olmadığını kontrol edin. Örneğin, aşağıdaki kod, Canlı kartela boş değilse başlık metin rengini bir paletten alır:

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

Bir paletteki tüm renklere erişmek için getSwatches() yöntemi, standart altı renk profili de dahil olmak üzere, bir resimden oluşturulan tüm kartelaların listesini döndürür.

Aşağıdaki kod snippet'i, eş zamanlı olarak bir palet oluşturmak, canlı kartelasını almak ve araç çubuğunun renklerini bit eşlem resmiyle eşleşecek şekilde değiştirmek için önceki kod snippet'lerinde bulunan yöntemleri kullanır. Şekil 2'de elde edilen resim ve araç çubuğu görüntülenmektedir.

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);
}
Gün batımını ve içinde TitleTextColor bulunan bir araç çubuğunu gösteren resim
Şekil 2. Canlı renkli araç çubuğu ve karşılık gelen başlık metin rengini içeren örnek bir resim.