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 ana bileşenidir. Palet kitaplığı, görsel olarak ilgi çekici uygulamalar oluşturmak için resimlerdeki belirgin renkleri ayıklayan bir Jetpack kitaplığıdır.

Palet kitaplığını kullanarak düzen temaları tasarlayabilir ve uygulamanızdaki görsel öğelere özel renkler uygulayabilirsiniz. Örneğin, bir şarkının albüm kapağına göre renk koordineli 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 resmindeki renklere erişmenizi sağlar ve tasarım seçimleriniz için bit eşlemden altı ana renk profili sağlar.

Kitaplığı ayarlama

Palet kitaplığını kullanmak için aşağıdaki öğeleri build.gradle sayfanıza 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ştur

Palette nesnesi, resimdeki ana renklere ve yer paylaşımlı metin için karşılık gelen renklere 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 Bitmap öğesinden Palette.Builder örneklendirin. Paleti oluşturmadan önce özelleştirmek için Palette.Builder kullanabilirsiniz. Bu bölümde, bir bit eşlem görüntüsünden palet oluşturma ve özelleştirme konuları açıklanmaktadır.

Palette örneği oluştur

Önce Bitmap öğesinden Palette.Builder oluşturmak için 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şturma özelliğini 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'i, her iki palet oluşturma türü için de örnek yöntemler sağlar:

// 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ıralanmış bir görüntü veya nesne listesi için sürekli olarak paletler oluşturmanız gerekiyorsa kullanıcı arayüzü performansının yavaş olmasını önlemek amacıyla Palette örneklerini önbelleğe almayı değerlendirin. Paletleri ana iş parçacığınızda oluşturmayın.

Paletinizi özelleştirin

Palette.Builder, oluşturulan palette kaç renk olacağını, oluşturucunun paleti oluşturmak için resminizin hangi alanını kullanacağını ve palete hangi renklerin ekleneceğini belirleyerek paletinizi özelleştirmenizi sağlar. Ö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ından aşağıdaki yöntemleri kullanarak paletinizin boyutunda ve renklerinde ince ayar yapın:

addFilter()

Bu yöntem, oluşturulan palette hangi renklere izin verildiğini gösteren bir filtre ekler. Kendi Palette.Filter öğenizi iletin ve isAllowed() yöntemini değiştirerek Paletten hangi renklerin filtreleneceğini belirleyin.

maximumColorCount()

Bu yöntem, paletinizdeki maksimum renk sayısını ayarlar. Varsayılan değer 16'dır. Optimum değer, kaynak resme 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ında değerlere sahiptir. Palette.Builder uygulamasının daha fazla renk içeren paletleri oluşturması 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 bir bit eşlemden palet oluştururken kullanabilirsiniz. Palet, orijinal resmi etkilemez.

addTarget()

Bu yöntem, derleyiciye Target renk profili ekleyerek kendi renk eşleştirmenizi yapmanıza olanak tanır. Varsayılan Target yetersizse ileri düzey geliştiriciler Target.Builder kullanarak kendi Target'lerini oluşturabilirler.

Renk profillerini al

Malzeme Tasarımı standartlarına dayanarak, Palet kitaplığı yaygın olarak kullanılan renk profillerini bir resimden ayıklar. Her profil bir Target ile tanımlanır ve bit eşlem resminden çıkarılan renkler; doygunluk, parlaklık ve popülasyona (bit eşlemdeki renkle temsil edilen piksel sayısı) bağlı olarak her profile göre puanlanır. Her profil için, en iyi puana sahip renk, ilgili resme ait 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 almak, her bir renk profili için daha fazla olası eşleşme sağlar ancak palet oluşturulurken Palette.Builder ürününün daha uzun sürmesine neden olur.

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

• Açık Canlı
• Canlı
• Koyu Canlı
• Işık Geçirmez
• Sesi kapatılır.
• Koyu Renk Kapatılmış

Palette içindeki get<Profile>Color() yöntemlerinin her biri, söz konusu 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, bir fotoğraf ve bu fotoğrafa karşılık gelen renk profilleri get<Profile>Color() yöntemlerinden alınmıştır.

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

Palette sınıfı, her bir renk profili için Palette.Swatch nesne de oluşturur. Palette.Swatch nesneleri, hem bu profille ilişkili rengi hem de rengin piksel cinsinden popülasyonunu içerir.

Kartelalar, HSL değerleri ve piksel nüfusu gibi renk profili hakkında daha fazla bilgiye erişmek için ek yöntemler sunar. getBodyTextColor() ve getTitleTextColor() yöntemlerini kullanarak daha kapsamlı renk şemaları ve uygulama temaları oluşturmak için kartelalardan yararlanabilirsiniz. Bu yöntemler, örneğin rengi üzerinde kullanıma uygun renkleri döndürür.

Palette öğesindeki 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, varsayılan değer parametrelerini gerektirmese de, ilgili profil resimde yoksa null değerini döndürür. Bu nedenle, kartelayı kullanmadan önce boş değerli olup olmadığını kontrol edin. Örneğin, Canlı kartela null değilse aşağıdaki kod, bir paletten başlık metin rengini 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, eşzamanlı olarak bir palet oluşturmak, canlı kartelasını almak ve araç çubuğunun renklerini bit eşlem resmiyle eşleştirmek için önceki kod snippet'lerinden alınan yöntemleri kullanır. Şekil 2'de ortaya çıkan 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);
}