настроить аналог ViewBounds в Jetpack Compose - PullRequest
Новая
       41

настроить аналог ViewBounds в Jetpack Compose

1 голос
/ 08 марта 2020

Я пытаюсь сделать так, чтобы изображение занимало ширину контейнера и имело высоту, основанную на соотношении изображений. В XML я бы использовал adjustViewBounds на ImageView. Есть ли аналог в Compose? Если нет, то как мне этого добиться?

1 Ответ

2 голосов
/ 12 марта 2020

Обновление для 0.1.0-dev09

SimpleImage устарело и заменено на Image, что немного более настраиваемо - по крайней мере, позволяет устанавливать модификаторы. Общая идея сохранения соотношения изображений остается прежней: 

val image = imageResource(R.drawable.android_studio_logo)
val imageRatio = image.width.toFloat() / image.height.toFloat()
Image(
    image = image,
    contentScale = ContentScale.Crop,
    modifier = LayoutWidth.Fill + LayoutAspectRatio(imageRatio)
)

Старый ответ для 0.1.0-dev06

Я не думаю, что что-то вроде adjustViewBounds в настоящее время поддерживается из поле в 0.1.0-dev06.

Глядя на исходный код, SimpleImage не кажется настраиваемым. Все, что он делает, это рисует изображение поверх Box с точно таким же размером, что и изображение: 

@Composable
fun SimpleImage(
    image: Image,
    tint: Color? = null
) {
    with(DensityAmbient.current) {
        val imageModifier = ImagePainter(image).toModifier(
            scaleFit = ScaleFit.FillMaxDimension,
            colorFilter = tint?.let { ColorFilter(it, BlendMode.srcIn) }
        )
        Box(LayoutSize(image.width.toDp(), image.height.toDp()) + ClipModifier + imageModifier)
    }
}

Но на основе этой реализации такой эффект, как adjustViewBounds, может быть достигнут с помощью модификатора другого размера. Вместо указания c точного размера мы можем применить LayoutWidth.Fill, чтобы занять всю ширину, а затем отрегулировать высоту, используя LayoutAspectRatio с соотношением изображения: 

val image = imageResource(R.drawable.android_studio_logo)
val imageRatio = image.width.toFloat() / image.height.toFloat()
val imageModifier = ImagePainter(image).toModifier(scaleFit = ScaleFit.FillMaxDimension)
Box(LayoutWidth.Fill + LayoutAspectRatio(imageRatio) + imageModifier)

Конечно, для лучшей возможности повторного использования и удобочитаемости мы можно обернуть его в функцию.
Вот как выглядит результат:

preview comparison

...