Пользовательские вкладки с возможностью пролистывания для создания реактивного ранца Android (Материал 3)

Как я могу создать или есть ли какая-либо библиотека, которую я могу использовать для создания перелистываемых пользовательских вкладок, как на этом рисунке [Песни, Альбомы, Исполнители, Жанры => Вкладка],

Я знаю, что уже есть несколько встроенных вкладок, их нельзя смахивать прямо из коробки, но после некоторой работы мы можем сделать их пролистываемыми. Но на этом изображении столы выглядят так здорово! Мне нужна вкладка точного или похожего типа, которую я могу реализовать в своем приложении для создания реактивного ранца.

Также анимация, подобная этой, была бы плюсом.

HorizontalPager можно пролистывать. Вы также можете использовать его состояние, чтобы выделить определенный Tab в TabRow. Я не вижу здесь ничего, что нельзя было бы легко сделать с помощью встроенных компонуемых объектов. Тем не менее, такие запросы к библиотекам не относятся к теме StackOverflow. Если у вас возникнут какие-либо проблемы при реализации этого пейджера, вы можете задать новый вопрос о конкретной проблеме, которую вам трудно решить. Этот вопрос сейчас слишком широк и должен быть закрыт.

Leviathan 28.04.2024 18:42

На самом деле существует Composable, который позволяет размещать вкладки в горизонтально прокручиваемой строке, взгляните на ScrollableTabRow.

BenjyTec 29.04.2024 15:27
0
2
204
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Взгляните на ScrollableTabRow Composable, возможно, это именно то, что вы ищете. Вы можете применить собственный индикатор выбора в слоте indicator:

@Composable
fun MyComposable() {

    val tabsList = listOf("Songs", "Albums", "Artists", "Genres", "Dates", "Folders")
    var selectedTabIndex by remember { mutableIntStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Top
    ) {

        ScrollableTabRow(
            selectedTabIndex = selectedTabIndex,
            edgePadding = 0.dp,
            indicator = { tabPositions ->
                Column(
                    modifier = Modifier
                        .tabIndicatorOffset(tabPositions[selectedTabIndex])
                        .fillMaxSize()
                        .padding(10.dp)
                        .background(
                            MaterialTheme.colorScheme.secondaryContainer,
                            FilterChipDefaults.shape,
                        )
                ) {}
            }
        ) {
            tabsList.forEachIndexed { tabIndex, tabName ->
                FilterChip(
                    modifier = Modifier.
                    wrapContentSize()
                        .zIndex(2f),
                    selected = false,
                    border = null,
                    onClick = { selectedTabIndex = tabIndex },
                    label = {
                        Text(text = tabName, textAlign = TextAlign.Center)
                    }
                )
            }
        }

        // TODO add HorizontalPager with Modifier.weight(1f)
    }
}

Выход:

Теперь вам нужно интегрировать его с HorizontalPager.

Я не думаю, что он будет анимироваться при смене вкладок, но, по крайней мере, реализовать такую ​​систему вкладок — классная идея. Использование чипов — действительно умная идея.

Mehedi Hasan 30.04.2024 05:59

Что именно вы хотите анимировать? В своем посте вы ничего подобного не упомянули.

BenjyTec 30.04.2024 08:34

Теперь я обновляю свой пост и упоминаю об эффекте анимации.

Mehedi Hasan 30.04.2024 11:01

Другие вопросы по теме