Используя индикаторы страниц, вы можете помочь пользователям понять их текущее положение в контенте вашего приложения, обеспечивая визуальную индикацию прогресса. Эти навигационные подсказки полезны при последовательном представлении контента, например при реализации каруселей, галерей изображений и слайд-шоу или нумерации страниц в списках.
Совместимость версий
Для этой реализации требуется, чтобы в 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) ) } }
Ключевые моменты о коде
- В коде реализован
HorizontalPager
, который позволяет горизонтально перемещаться между разными страницами контента. В этом случае на каждой странице отображается номер страницы. - Функция
rememberPagerState()
инициализирует пейджер и устанавливает количество страниц, равное 4. Эта функция создает объект состояния, который отслеживает текущую страницу и позволяет вам управлять пейджером. - Свойство
pagerState.currentPage
используется для определения индикатора страницы, который следует выделить. - Индикатор страницы отображается в пейджере, наложенном реализацией
Row
. - Для каждой страницы пейджера рисуется круг размером 16 dp. Индикатор текущей страницы отображается как
DarkGray
, а остальные круги индикатора —LightGray
. -
Text
, компонуемый вHorizontalPager
отображает текст «Страница: [номер страницы]» на каждой странице.
Результаты
Коллекции, содержащие это руководство
Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Отобразить список или сетку
