🟠Создание базового макета
Начнем с создания базового макета без функций анимации и перетаскивания. Можно разделить дизайн на два основных компонента: перетаскиваемый ползунок и округлый макет кнопки с иконками уменьшения, сброса и увеличения.
Понадобится также корневой макет для хранения этих двух компонентов. Поскольку кнопка сброса скрыта под перетаскиваемым ползунком, а ползунок можно перетаскивать по вертикали за пределы кнопки, мы будем использовать компонент Box, позволяющий реализовать перекрывающиеся элементы.
Первоначальная composable корневого макета:
@Composable
private fun CounterButton(
value: String,
modifier: Modifier = Modifier
) {
Box(
contentAlignment = Alignment.Center,
modifier = modifier
.width(200.dp)
.height(80.dp)
) {
ButtonContainer(
onValueDecreaseClick = { /*TODO*/ },
onValueIncreaseClick = { /*TODO*/ },
onValueClearClick = { /*TODO*/ },
modifier = Modifier
)
DraggableThumbButton(
value = value,
onClick = { /*TODO*/ },
modifier = Modifier.align(Alignment.Center)
)
}
}
🟠 Теперь рассмотрим composable ButtonContainer, в которой размещаются кнопки-иконки. Будем использовать компонент Row, поскольку три кнопки должны располагаться горизонтально. Arrangement.SpaceBetween поможет горизонтально расположить кнопки в начале, центре и конце макета. Кнопки представлены как composable IconControlButton, которая является просто оберткой IconButton.
ПРИМЕЧАНИЕ: ЧТОБЫ ПРИМЕНИТЬ ТАКИЕ ЖЕ ИКОНКИ, ДОБАВЬТЕ В ПРОЕКТ ЗАВИСИМОСТЬ ANDROIDX.COMPOSE.MATERIAL:MATERIAL-ICONS-EXTENDED ИЛИ ИКОНКИ ВРУЧНУЮ.
Мы будем использовать модификатор clip(RoundedCornerShape()) для получения необходимой формы фона, а также зададим цвет фона. Изменим альфа-канал цветового насыщения фона, поскольку позже понадобится анимировать его при перетаскивании ползунка. То же самое касается насыщенности цвета кнопок. Кнопку сброса пока скроем, так как будем работать над ее логикой потом.
ПРИМЕЧАНИЕ: НЕ РЕКОМЕНДУЕТСЯ ХАРДКОДИТЬ ЦВЕТА ПОДОБНЫМ ОБРАЗОМ, ТАК КАК ЭТО ВЫЗОВЕТ ПРОБЛЕМЫ СО СВЕТЛОЙ/ТЕМНОЙ ТЕМОЙ. В ДАННОМ ПРИМЕРЕ ЭТО ДЕЛАЕТСЯ ТОЛЬКО ДЛЯ ТОГО, ЧТОБЫ МАКСИМАЛЬНО СОКРАТИТЬ КОД.
Composable контейнера кнопки:
📌 Продолжение
@android_its