Paylaşılan öğelerin yaygın kullanım alanları

Paylaşılan öğeleri animasyonlandırırken belirli kullanım alanları için özel öneriler vardır.

Eşzamansız resimler

Resimleri eşzamansız olarak yüklemek için kitaplık kullanmak yaygın bir uygulamadır. Örneğin, Coil'in AsyncImage composable'ını kullanırken bu yöntemi tercih edebilirsiniz. İki composable arasında sorunsuz çalışması için placeholderMemoryCacheKey() ve memoryCacheKey() değerlerinin, paylaşılan öğe anahtarından türetilen bir dize olarak aynı anahtara ayarlanması önerilir. Böylece, eşleşen paylaşılan öğeler için önbellek anahtarı aynı olur. Yeni paylaşılan öğe, yeni resmi yükleyene kadar yer tutucu olarak eşleşmesinin önbelleğini kullanır.

AsyncImage için tipik kullanım şu şekildedir:

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("your-image-url")
        .crossfade(true)
        .placeholderMemoryCacheKey("image-key") //  same key as shared element key
        .memoryCacheKey("image-key") // same key as shared element key
        .build(),
    placeholder = null,
    contentDescription = null,
    modifier = Modifier
        .size(120.dp)
        .sharedBounds(
            rememberSharedContentState(
                key = "image-key"
            ),
            animatedVisibilityScope = this
        )
)
SharedElementCommonUseCaseSnippets.kt

Metin

fontSize değişikliklerini canlandırmak için Modifier.sharedBounds(), resizeMode = ScaleToBounds() kullanın. Bu geçiş, boyut değişikliğini nispeten akıcı hale getirir. contentScale parametresi, belirli bir yazı tipi ağırlığını veya stilini canlandıracak şekilde ayarlanabilir.

Text(
    text = "This is an example of how to share text",
    modifier = Modifier
        .wrapContentWidth()
        .sharedBounds(
            rememberSharedContentState(
                key = "shared Text"
            ),
            animatedVisibilityScope = this,
            enter = fadeIn(),
            exit = fadeOut(),
            resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
        )
)
SharedElementCommonUseCaseSnippets.kt

TextAlign değişiklikleri varsayılan olarak animasyonlu değildir. Bunun yerine, paylaşılan geçişler için farklı TextAlign kullanmak yerine Modifier.wrapContentSize() veya Modifier.wrapContentWidth() kullanın.