Cajón de navegación de curvas en Android usando ArcNavigationView

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. 

Example of Google Drive Navigation Drawer.

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *