В Jetpack Compose создание визуально приятных пользовательских интерфейсов часто включает в себя выравнивание изображений и текстовых элементов в ряд. Одно из общих требований — сделать высоту изображения и текста одинаковой, создавая сбалансированный и гармоничный макет. В этой статье мы рассмотрим несколько методов достижения этого эффекта с помощью Jetpack Compose, а также приведем примеры кода, демонстрирующие каждый подход.

Метод 1: использование Box и Modifier.height

Один простой способ — поместить изображение и текстовые элементы в контейнер Box и применить к ним один и тот же модификатор высоты. Используя модификатор Modifier.height, мы можем установить определенное значение высоты для обоих элементов, гарантируя, что они совпадают по размеру. Вот пример:

Box(modifier = Modifier.height(50.dp)) {
    Image(
        painter = painterResource(R.drawable.my_image),
        contentDescription = "My Image",
        modifier = Modifier.fillMaxHeight()
    )
    Text(
        text = "My Text",
        modifier = Modifier.fillMaxHeight()
    )
}

Метод 2: использование ConstraintLayout

Jetpack Compose также предоставляет ConstraintLayout, который позволяет нам определять ограничения между различными элементами. Мы можем использовать этот макет, чтобы выровнять элементы изображения и текста и установить одинаковую их высоту. Вот пример:

ConstraintLayout(modifier = Modifier.height(50.dp)) {
    val (image, text) = createRefs()
    Image(
        painter = painterResource(R.drawable.my_image),
        contentDescription = "My Image",
        modifier = Modifier.constrainAs(image) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
        }
    )
    Text(
        text = "My Text",
        modifier = Modifier.constrainAs(text) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(image.end)
            end.linkTo(parent.end)
        }
    )
}

Метод 3: использование строки и Modifier.aspectRatio

Другой подход — использовать макет «Строки» и настроить соотношение сторон изображения в соответствии с высотой текста. Установив соотношение сторон, мы можем гарантировать, что изображение будет занимать то же вертикальное пространство, что и текст. Вот пример:

Row(verticalAlignment = Alignment.CenterVertically) {
    Image(
        painter = painterResource(R.drawable.my_image),
        contentDescription = "My Image",
        modifier = Modifier.aspectRatio(1f)
    )
    Text(
        text = "My Text"
    )
}

Достижение одинаковой высоты изображения и текста в Jetpack Compose необходимо для создания визуально сбалансированного дизайна пользовательского интерфейса. В этой статье мы рассмотрели три метода: использование Box и Modifier.height, использование ConstraintLayout и настройку соотношения сторон с помощью Row и Modifier.aspectRatio. В зависимости от ваших конкретных требований к макету вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Поэкспериментируйте с этими методами и создавайте потрясающие пользовательские интерфейсы в своих приложениях Android с помощью Jetpack Compose.