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. Palet kitaplığı, görsel açıdan ilgi çekici uygulamalar oluşturmak için resimlerden belirgin renkleri ayıklayan 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ı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 build.gradle dosyanıza aşağıdakileri ekleyin:

android {
    compileSdkVersion(33)
    ...
}

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

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şturma

Ö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:

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

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ştirme

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ı kullanmasını sağlayabilirsiniz.

Palette.Builder sınıfındaki aşağıdaki yöntemlerle paletinizin boyutunu ve renklerini hassaslaştırın:

addFilter()

Bu yöntem, ortaya çıkan palette hangi renklere izin verildiğini belirten bir filtre ekler. 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ı belirler. Varsayılan değer 16'dır ve optimum değer kaynak görüntüye bağlıdır. Manzara fotoğraflarında optimum değerler 8-16 arasındayken yüzlerin yer aldığı resimlerde genellikle 24-32 arasında değerler kullanılır. Palette.Builder'ün daha fazla renk içeren paletler oluşturması daha uzun sürer.

setRegion()

Bu yöntem, paleti oluştururken derleyicinin bitmap'in hangi alanını kullandığını belirtir. Bu yöntemi yalnızca paleti bir bitmap'ten oluştururken kullanabilirsiniz. Bu yöntem 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 ayıklama

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, her renk profili için daha fazla olası eşleşme sağlar ancak paleti oluştururken Palette.Builder süresinin uzamasına da neden olur.

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

• Işık Canlı
• Canlı
• Koyu Canlı
• Açık Tonlu Sessiz
• Ses kapalı
• Koyu ve Tonu Azaltılmış

Palette içindeki get<Profile>Color() yöntemlerinin her biri, ilgili profille ilişkili paletteki rengi döndürür. Bu yöntemlerde <Profile>, altı renk profilinden birinin adıyla değiştirilir. Örneğin, Koyu Canlı renk profilini elde etme yöntemi getDarkVibrantColor()'tür. 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öntemlerine ait bir fotoğraf ve bu fotoğrafın renk profilleri gösterilmektedir.

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

Palette sınıfı, her renk profili için Palette.Swatch sınıfından nesneler de oluşturur. Palette.Swatch nesneleri, ilgili profilin rengini ve rengin piksel cinsinden nüfusunu içerir.

Paletlerde, renk profili hakkında daha fazla bilgiye (ör. HSL değerleri ve piksel sayısı) erişmek için ek yöntemler bulunur. 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.

Palette içindeki her get<Profile>Swatch() yöntemi, söz konusu profille ilişkili paleti döndürür. Bu yöntemlerde <Profile>, altı renk profilinden birinin adıyla değiştirilir. 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 kodda Canlı renk paleti boş değilse başlık metni rengini paletten alır:

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

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.

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