Palette API ile renkleri seçme

Başarılı bir uygulama için iyi bir görsel tasarım şarttır ve renk şemaları, tasarımın temel bileşenlerinden biridir. İlgili içeriği oluşturmak için kullanılan Palet kitaplığı bir Jetpack'tir görsel olarak ilgi çekici öğeler oluşturmak için resimlerden göze çarpan renkleri çıkaran kitaplık

Düzen temaları tasarlamak ve uygulamanızdaki görsel öğelere özel renkler uygulamak için Palet kitaplığını kullanabilirsiniz. Örneğin, bir şarkının albüm kapağına göre renk uyumlu bir başlık kartı oluşturmak veya arka plan resmi değiştiğinde uygulamanın araç çubuğu rengini ayarlamak için palet kullanabilirsiniz. Palette nesnesi, bir Bitmap resimdeki renklere erişim sağlarken, tasarım seçimlerinizi bilgilendirmek için bitmap'ten altı ana renk profili de sunar.

Kitaplığı ayarlama

Palet kitaplığını kullanmak için aşağıdaki öğeleri 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'
}

Palet oluşturma

Palette nesnesi, bir resimdeki birincil renklerin yanı sıra yer paylaşımlı metnin karşılık gelen renklerine erişmenizi sağlar. Uygulamanızın stilini tasarlamak ve belirli bir kaynak resme göre uygulamanızın renk şemasını dinamik olarak değiştirmek için paletleri kullanın.

Palet oluşturmak için önce bir Bitmap'dan Palette.Builder sınıfı örneği oluşturun. Ardından, paleti oluşturmadan önce özelleştirmek için Palette.Builder simgesini kullanabilirsiniz. Bu bölümde, palet oluşturma ve bitmap resimden özelleştirme işlemleri açıklanmaktadır.

Palette örneği oluştur

Önce bir Bitmap'dan Palette.Builder oluşturmak için from(Bitmap bitmap) yöntemini kullanarak bir Palette örneği oluşturun.

Oluşturucu, paleti senkronize veya asenkron olarak oluşturabilir. Paleti, çağrılan yöntemle aynı iş parçacığında oluşturmak istiyorsanız senkronize palet oluşturma özelliğini kullanın. Paleti farklı bir iş parçacığında eşzamansız olarak oluşturursanız oluşturulduktan hemen sonra palete erişmek için onGenerated() yöntemini kullanın.

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

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

Sıralı bir resim veya nesne listesi için sürekli olarak palet oluşturmanız gerekiyorsa kullanıcı arayüzünün yavaşlamasını önlemek için Palette örneklerini önbelleğe almayı deneyin. Paletleri ana ileti dizisinde oluşturmayın.

Paletinizi özelleştirin

Palette.Builder, oluşturulan paletin kaç renk içereceğini, paleti oluşturmak için oluşturucunun resminizin 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 bir resmin üst yarısını kullandığından emin olabilirsiniz.

Aşağıdaki yöntemlerden yararlanarak paletinizin boyutunda ve renklerinde ince ayar yapın: Palette.Builder sınıf:

addFilter()

Bu yöntem, oluşturuyoruz. Kendi Palette.Filter öğenizi iletin ve paletten hangi renklerin filtreleneceğini belirlemek için isAllowed() yöntemini değiştirin.

maximumColorCount()

Bu yöntem, paletinizdeki maksimum renk sayısını ayarlar. Varsayılan değer 16'dır ve optimum değer kaynak görüntüye bağlıdır. Örneğin, için optimum değerler 8-16 arasında değişirken, yüz içeren resimler genellikle 24 ile 32 arasında değerlere sahiptir. Palette.Builder daha uzun sürer daha fazla renkte paletler oluşturabilir.

setRegion()

Bu yöntem, oluşturucunun paleti oluşturuyoruz. Bu yöntemi yalnızca paleti oluştururken kullanabilirsiniz orijinal resmi etkilemez.

addTarget()

Bu yöntem, oluşturucuya bir renk profili ekleyerek kendi renk eşleştirmenizi yapmanıza olanak tanır. Target Varsayılan Target yeterli değilse ileri düzey geliştiriciler Target.Builder kullanarak kendi Target'lerini oluşturabilir.

Renk profillerini al

Palet kitaplığı, Materyal Tasarımın standartlarına göre bir resimden yaygın olarak kullanılan renk profillerini ayıklayıp düzenler. Her profil bir Target ile tanımlanır ve bitmap resminden ayıklanan renkler, doygunluk, parlaklık ve nüfusa (renk tarafından temsil edilen bitmap'teki piksel sayısı) göre her profil için puanlanır. Her profil için en yüksek puana sahip renk, söz konusu resim için renk profilini tanımlar.

Varsayılan olarak Palette nesnesi, belirli bir resimdeki 16 birincil rengi içerir. Paletinizi oluştururken Palette.Builder simgesini kullanarak renk sayısını özelleştirebilirsiniz. Daha fazla renk ayıklamak, daha fazla potansiyel her renk profili için eşleşir, ancak aynı zamanda Palette.Builder daha uzun sürmesine yardımcı olur.

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

• Işık Parlak
• Canlı
• Koyu Canlı
• Açık Tonlu Sessiz
• Sesi kapatılır.
• Koyu Renk Kapatılmış

Şuradaki get<Profile>Color() yöntemin her biri: Palette, bu değerle ilişkili Paletteki rengi döndürür <Profile> yerine ve altı renk profilinden birinin adını girin. Örneğin, dönüşüm hunisinin Koyu Canlı renk profili: getDarkVibrantColor() Tüm resimler tüm renk profillerini içermediğinden, dön.

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

Şekil 1. Aşağıdaki Palet için varsayılan maksimum renk sayısı (16).

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

Palette sınıfı ayrıca şunları da oluşturur: Palette.Swatch nesneleri seçin. Palette.Swatch nesneleri, ilgili profilin rengini ve rengin piksel cinsinden nüfusunu içerir.

Kartelalar, öğe hakkında daha fazla bilgiye erişmek için ek yöntemler sunar. renk profili için de geçerlidir. getBodyTextColor() ve getTitleTextColor() yöntemlerini kullanarak daha kapsamlı renk şemaları ve uygulama temaları oluşturmak için paletleri kullanabilirsiniz. Bu yöntemler, kartela renginin üzerine uygulanması için uygun renkleri döndürür.

Şuradaki her get<Profile>Swatch() yöntem: Palette, söz konusu profille ilişkilendirilen kartelayı döndürür. Burada <Profile>, seçtik. Paletin get<Profile>Swatch() yöntemleri varsayılan değer parametreleri gerektirmese de söz konusu profil resimde yoksa null döndürürler. Bu nedenle, bir paleti kullanmadan önce paletin boş olup olmadığını kontrol edin. Örneğin, aşağıdaki kod, başlık metin rengini bir Canlı kartela null değilse palet:

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, bir paleti senkronize olarak oluşturmak, canlı palet örneğini almak ve bir araç çubuğunun renklerini bitmap resmiyle eşleşecek şekilde değiştirmek için önceki kod snippet'lerindeki yöntemleri kullanır. Şekil 2'de, oluşturulan resim ve araç çubuğu gösterilmektedir.

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

Şekil 2. Canlı renkli araç çubuğu ve karşılık gelen başlık metin rengi.