Скользящий экран в Android

Опубликовано: 30 Ноября, 2021

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

Приложения скользящего экрана

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

Атрибуты скользящего экрана

Атрибуты	Описание
layout_width	Используется для задания ширины макета.
layout_height	Используется для задания высоты макета.
сила тяжести	Используется для придания силы тяжести.
umanoPanelHeight	Используется для придания панели высоты.
umanoShadowHeight	Используется для отображения высоты тени.

Пошаговая реализация

Шаг 1. Создайте новый проект

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать / запустить новый проект в Android Studio». Обратите внимание, что выберите Java в качестве языка программирования.

Шаг 2. Добавьте зависимость библиотеки Sliding Up Screen в файл build.gradle

Затем перейдите к скриптам Gradle, а затем к уровню build.gradle (модуль) . Добавьте строку ниже в файл build.gradle в разделе зависимостей.

implementation ‘com.sothree.slidinguppanel:library:3.4.0’

теперь нажмите « Синхронизировать». Теперь все ваши файлы будут синхронизированы в build.gradle () .

Шаг 3. Создайте новый скользящий экран в файле activity_main.xml.

Перейдите к приложению> res> layout, чтобы открыть файл activity_main.xml. Ниже приведен код файла activity_main.xml.

XML

 <? xml version = "1.0" encoding = "utf-8" ?>
 < RelativeLayout
    xmlns:android = " http://schemas.android.com/apk/res/android "
    xmlns:tools = " http://schemas.android.com/tools "
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:paddingLeft = "16dp"
    android:paddingTop = "16dp"
    android:paddingRight = "16dp"
    android:paddingBottom = "16dp"
    tools:context = ".MainActivity" >
 
    <!--Sliding Up Screen-->
    < com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree = " http://schemas.android.com/apk/res-auto "
        android:id = "@+id/sliding_layout"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        android:gravity = "bottom"
        sothree:umanoPanelHeight = "68dp"
        sothree:umanoShadowHeight = "4dp" >
 
        <!--First Screen-->
        < include
            layout = "@layout/layout_first"
            android:layout_width = "match_parent"
            android:layout_height = "match_parent" />
 
        <!--Second Screen-->
        < include
            layout = "@layout/layout_second"
            android:layout_width = "match_parent"
            android:layout_height = "match_parent" />
    </ com.sothree.slidinguppanel.SlidingUpPanelLayout >
     
</ RelativeLayout > 

Шаг 4. Создайте screen1 и screen 2 в папке макета.

Перейдите к приложению> res> layout и создайте файлы layout_first.xml и layout_second.xml в папке layout. Следуйте приведенному ниже коду.

layout_first.xml файл:

XML

 <? xml version = "1.0" encoding = "utf-8" ?>
 < LinearLayout
    xmlns:android = " http://schemas.android.com/apk/res/android "
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:layout_gravity = "center"
    android:gravity = "center"
    android:orientation = "vertical" >
 
    <!--Text view to display text-->
    < TextView
        android:id = "@+id/textView"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "This is First Screen" />
     
    <!--Button for click-->
    < Button
        android:id = "@+id/button"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "Click" />
     
</ LinearLayout > 

layout_second.xml файл:

XML

 <? xml version = "1.0" encoding = "utf-8" ?>
 < LinearLayout
    xmlns:android = " http://schemas.android.com/apk/res/android "
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:layout_gravity = "center"
    android:gravity = "center"
    android:orientation = "vertical" >
 
    <!--Text view to display text-->
    < TextView
        android:id = "@+id/textView2"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "This is Second Screen" />
 
    <!--Button for click-->
    < Button
        android:id = "@+id/button2"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "Click Again" />
     
</ LinearLayout > 

Теперь нажмите на опцию запуска, это займет некоторое время, чтобы построить Gradle . После этого вы получите вывод на свое устройство, как показано ниже.

Выход:

Вниманию читателя! Не прекращайте учиться сейчас. Ознакомьтесь со всеми важными концепциями Java Foundation и коллекций с помощью курса "Основы Java и Java Collections" по доступной для студентов цене и будьте готовы к работе в отрасли. Чтобы завершить подготовку от изучения языка к DS Algo и многому другому, см. Полный курс подготовки к собеседованию .

Technical Scripter Android Java

Скользящий экран в Android

Приложения скользящего экрана

Атрибуты скользящего экрана

Пошаговая реализация

XML

XML

XML

Выход:

РЕКОМЕНДУЕМЫЕ СТАТЬИ