Добавить пользовательский индикатор страницы

Используя индикаторы страниц, вы можете помочь пользователям понять их текущее положение в контенте вашего приложения, обеспечивая визуальную индикацию прогресса. Эти навигационные подсказки полезны при последовательном представлении контента, например при реализации каруселей, галерей изображений и слайд-шоу или нумерации страниц в списках.

Совместимость версий

Для этой реализации требуется, чтобы в minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Создайте горизонтальный пейджер с пользовательским индикатором страницы.

Следующий код создает горизонтальный пейджер с индикатором страницы, который дает пользователю визуальные подсказки о том, сколько страниц и какая страница видна: 

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

Ключевые моменты о коде

  • В коде реализован HorizontalPager , который позволяет горизонтально перемещаться между разными страницами контента. В этом случае на каждой странице отображается номер страницы.
  • Функция rememberPagerState() инициализирует пейджер и устанавливает количество страниц, равное 4. Эта функция создает объект состояния, который отслеживает текущую страницу и позволяет вам управлять пейджером.
  • Свойство pagerState.currentPage используется для определения индикатора страницы, который следует выделить.
  • Индикатор страницы отображается в пейджере, наложенном реализацией Row .
  • Для каждой страницы пейджера рисуется круг размером 16 dp. Индикатор текущей страницы отображается как DarkGray , а остальные круги индикатора — LightGray .
  • Text , компонуемый в HorizontalPager отображает текст «Страница: [номер страницы]» на каждой странице.

Результаты

Рисунок 1. Пейджер с круговым индикатором под содержимым.

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Списки и сетки позволяют вашему приложению отображать коллекции в визуально приятной форме, удобной для использования пользователями.
Сборник кратких руководств
Узнайте, как компонуемые функции позволяют легко создавать красивые компоненты пользовательского интерфейса на основе системы дизайна Material Design.
Сборник кратких руководств

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.
Перейти к часто задаваемым вопросам Оставить отзыв