Для большинства приложений обычно требуется экран подключения. Экраны адаптации помогают пользователям начать работу с приложением. Большинство экранов подключения обычно представляют собой три экрана, на которых пользователи должны провести по горизонтали и увидеть все необходимые экраны, а когда они будут готовы, они могут нажать кнопку, чтобы начать работу с приложением. Давайте посмотрим, чего мы хотим достичь ниже.
Установить зависимости
На момент написания этой статьи Jetpack Compose и Android Studio Arctic Fox были стабильными. Создайте новый проект в Android Studio Arctic Fox и выберите пустой шаблон действия Compose, чтобы получить зависимости для установки Jetpack Compose. Когда вы закончите, обновите версию Jetpack compose до последней (1.0.0) и добавьте зависимости для индикаторов Pager и Pager.
Ваш блок зависимостей должен быть таким, как показано ниже
Как устроен экран / страница? У каждого есть заголовок, описание и изображение. Для этого мы создадим класс данных для представления каждого экрана, как показано ниже.
Затем мы создадим список страниц с тремя элементами в качестве источника данных, как показано ниже;
Мы создаем составной элемент для представления каждой страницы, простой столбец, содержащий изображение, заголовок и описание.
На этом этапе мы все готовы к созданию пользовательского интерфейса для входа в систему. В нашем случае мы будем использовать HorizontalPager, потому что мы хотим, чтобы пользователи пролистывали горизонтально. HorizontalPager требует, чтобы мы передавали ему необходимое количество страниц. Это будет примерно так, как показано ниже.
val pagerState = rememberPagerState(pageCount = 3,initialOffscreenLimit = 1)
Для initialOffScreenLimit установлено значение 2, что означает, что одна страница должна быть сохранена по обе стороны от текущей страницы. По умолчанию это значение равно 1, поэтому нам не нужно его указывать. У нас будет фактический экран, представляющий собой столбец, в котором размещены различные компоненты, как показано выше: текст, составляемый с текстом «Пропустить», HorizontalPager, и мы будем отображать кнопку начала работы только тогда, когда пользователь находится на последней странице. Кроме того, нажатие кнопки «Пропустить» приведет к тому же действию, что и кнопка «Начать». Мы хотим, чтобы, когда пользователь нажимает кнопку «Начало работы», мы не должны снова показывать экран подключения при следующем запуске. Код извлечен из моего приложения под названием Easy MoMo. В этом случае я устанавливаю логическое значение в общих настройках, чтобы подключение было завершено. Окончательный код будет следующим.
Обратите внимание, что мы показываем кнопку «Начало работы» только тогда, когда находимся на последней странице. Каждый из двух методов, переданных в OnboardingUI, будет выполняться при нажатии кнопки или при нажатии составного текста «Пропустить». Вот и все.
Аккомпанемент действительно отличная библиотека или набор API, когда дело доходит до Jetpack Compose. Вот и все. Увидимся в следующем выпуске «Compose in the Room».
