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. Palette kitaplığı, görsel açıdan ilgi çekici uygulamalar oluşturmak için resimlerden belirgin renkleri çıkaran bir Jetpack kitaplığıdır.

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

Kitaplığı ayarlama

Palette kitaplığını kullanmak için aşağıdakileri build.gradle dosyanıza ekleyin:

android {
    compileSdkVersion(36)
    ...
}

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

android {
    compileSdkVersion 36
    ...
}

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

Palet oluşturma

Palette nesnesi, bir resimdeki birincil renklere ve yer paylaşımlı metin için karşılık gelen renklere erişmenizi sağlar. Paletleri kullanarak uygulamanızın stilini tasarlayabilir ve uygulamanızın renk şemasını belirli bir kaynak resme göre dinamik olarak değiştirebilirsiniz.

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

Palette örneği oluşturma

Önce Bitmap kullanarak Palette.Builder oluşturmak için from(Bitmap bitmap) yöntemini kullanarak bir 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ığında oluşturmak istiyorsanız eşzamanlı palet oluşturma yöntemini kullanın. Paleti eşzamansız olarak farklı 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'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ü performansının yavaşlamasını önlemek için Palette örneklerini önbelleğe almayı düşünebilirsiniz. Paletleri ana iş parçacığınızda oluşturmayın.

Paletinizi özelleştirme

Palette.Builder, sonuç paletinde kaç renk olacağını, oluşturucunun paleti oluşturmak için 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öntemleri kullanarak paletinizin boyutunu ve renklerini hassas bir şekilde ayarlayın:

addFilter()

Bu yöntem, sonuç paletinde hangi renklere izin verildiğini belirten bir filtre ekler. Kendi Palette.Filter nesnenizi 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 resme bağlıdır. Manzara fotoğrafları için optimum değerler 8-16 arasında değişirken yüzlerin bulunduğu resimlerde genellikle 24-32 arasında değerler kullanılır. Palette.Builder, daha fazla renk içeren paletler oluşturmak için daha fazla zamana ihtiyaç duyar.

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. Bu yöntem, orijinal resmi etkilemez.

addTarget()

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

Renk profillerini ayıklama

Palette kitaplığı, Materyal Tasarım standartlarına göre bir resimden en çok tercih edilen renk profillerini ayıklar. Her profil bir Target ile tanımlanır ve bit eşlem görüntüsünden çıkarılan renkler; doygunluk, parlaklık ve popülasyona (bit eşlemde renkle temsil edilen piksel sayısı) göre her profile karşı puanlanır. Her profil için en iyi puana sahip renk, söz konusu resmin renk profilini tanımlar.

Varsayılan olarak, bir Palette nesnesi belirli bir resimden 16 birincil renk 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 potansiyel eşleşme sağlar ancak Palette.Builder uygulamasının paleti oluştururken daha uzun sürmesine neden olur.

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

• Açık Canlı
• Canlı
• Koyu Canlı
• Işık kapatıldı
• Sesi kapatılır.
• Koyu Sessiz

Palette sınıfındaki get<Profile>Color() yöntemlerinin her biri, ilgili profille ilişkili paletteki rengi döndürür. <Profile>, altı renk profilinden birinin adıyla değiştirilir. Örneğin, Koyu Canlı renk profilini almak için kullanılan yöntem 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 bir fotoğraf ve get<Profile>Color() yöntemlerinden elde edilen ilgili renk profilleri gösterilmektedir.

Renk şemaları oluşturmak için renk örneklerini kullanma

Palette sınıfı, her renk profili için Palette.Swatch nesneleri de oluşturur. Palette.Swatch nesneleri, söz konusu profil için ilişkili rengi ve rengin piksel cinsinden yoğunluğunu içerir.

Renk örnekleri, renk profili hakkında daha fazla bilgiye (ör. HSL değerleri ve piksel sayısı) erişmek için ek yöntemlere sahiptir. getBodyTextColor() ve getTitleTextColor() yöntemlerini kullanarak daha kapsamlı renk şemaları ve uygulama temaları oluşturmak için renk örneklerinden yararlanabilirsiniz. Bu yöntemler, renk örneğinin rengi üzerinde kullanıma uygun renkler döndürür.

Palette sınıfındaki her get<Profile>Swatch() yöntemi, ilgili profille ilişkili renk örneğini döndürür. Burada <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 değerini döndürür. Bu nedenle, kullanmadan önce renk örneğinin boş olmadığını kontrol edin. Örneğin, aşağıdaki kod, Canlı renk örneği boş değilse başlıktaki metin rengini bir 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 renk örneklerinin listesini döndürür.

Aşağıdaki kod snippet'i, önceki kod snippet'lerindeki yöntemleri kullanarak eşzamanlı olarak bir palet oluşturur, paletin canlı renk örneğini alır ve araç çubuğunun renklerini bitmap görüntüsüyle eşleşecek şekilde değiştirir. Şekil 2'de, sonuç olarak elde edilen görüntü 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);
}