El cajón de navegación es un diseño que se puede ver en ciertas aplicaciones, que consta de algunos accesos directos de otras actividades (intentos). Este cajón generalmente se puede ver en el borde izquierdo de la pantalla, que es el predeterminado. Un botón para acceder al cajón de navegación se proporciona de forma predeterminada en la barra de acción.
Los cambios en la interfaz de usuario se pueden aplicar al cajón de navegación. Una de esas ideas para cambiar la interfaz de usuario del cajón de navegación es hacer que su borde exterior sea un arco interior o exterior. Esto le da un aspecto creativo y más rico al Cajón. Dado que algunos cambios están limitados por los paquetes de Android Studio, dichas implementaciones requieren una biblioteca externa para realizar los cambios deseados. Esto se hace implementando una dependencia conocida (biblioteca) de una implementación que es deseable. Del mismo modo, también implementamos una dependencia para cumplir con nuestros requisitos.
Diseño de arco interior en el cajón de navegación
Para crear un diseño de arco interior para el cajón de navegación en un dispositivo Android, siga los siguientes pasos:
Paso 1: Crear un nuevo proyecto
Cree una actividad del cajón de navegación en Android Studio. Cómo crear/iniciar un nuevo proyecto en Android Studio Al hacer clic en Finalizar, el proyecto se compila y puede demorar uno o dos minutos.
Paso 2: agregue la dependencia al build.gradle de la aplicación
Agregue la siguiente dependencia al archivo build.gradle (aplicación) .
implementación ‘com.rom4ek: arcnavigationview: 2.0.0’
Paso 3: trabajar con el archivo activity_main.xml
Cuando la configuración esté lista, vaya al archivo activity_main.xml , que representa la interfaz de usuario del proyecto. Agregue el Script como se muestra a continuación entre el elemento de diseño de cajón de apertura y cierre.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--ArcNavigationView Element--> <com.rom4ek.arcnavigationview.ArcNavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/white" android:fitsSystemWindows="true" app:itemBackground="@android:color/white" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" app:arc_cropDirection="cropInside" app:arc_width="96dp"/> </androidx.drawerlayout.widget.DrawerLayout>
Salida: ejecutar en el emulador
Diseño de arco exterior en el cajón de navegación
De manera similar, para crear un arco exterior, realice cambios en el archivo de diseño. Cambios realizados en el archivo activity_main.xml :
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--ArcNavigationView Element--> <com.rom4ek.arcnavigationview.ArcNavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/white" android:fitsSystemWindows="true" app:itemBackground="@android:color/white" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" app:arc_width="96dp" app:arc_cropDirection="cropOutside"/> </androidx.drawerlayout.widget.DrawerLayout>
Salida: ejecutar en el emulador
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA