Cómo implementar el cajón de navegación en su aplicación de Android con un ejemplo

Hola a todos, bienvenidos de nuevo a androidhunger.com. Aquí en esta sesión, voy a discutir sobre la implementación de un cajón de navegación en su aplicación de Android con una aplicación de muestra para estudiantes.

Ejemplo de cajón de navegación - androidhunger.com

Esta aplicación tiene diferentes secciones, como la tabla de horarios, el calendario de exámenes, la asistencia y la sección de resultados, que ayudan al estudiante a actualizarse con todas las cosas de la universidad y su participación en él. Sin embargo, todos los datos que se muestran aquí son datos estáticos, pero puede ampliar la idea de esto para desarrollar una nueva aplicación de este tipo.

Entonces empecemos.

Contenido:

  • Crear una nueva aplicación del cajón de navegación
  • Menú de Navegación
  • Elemento del menú de navegación - Fragmento de inicio
  • Elemento del menú de navegación - TimeTableFragment
  • Elemento del menú de navegación - ExamScheduleFragment
  • Elemento del menú de navegación - Fragmento de asistencia
  • Elemento del menú de navegación - Fragmento de resultado
  • Elemento del menú de navegación - WebViewFragment

Crear una nueva aplicación del cajón de navegación

Crearé una nueva aplicación para Android seleccionando la actividad Navegación del cajón en Android Studio. Consulte la imagen a continuación,

Ejemplo de cajón de navegación - androidhunger.com

Entonces, después de que Android Studio hace lo suyo y finalmente le muestra 'Gradle build terminado' (: P es broma, si tiene una buena configuración, todo se cargará bien), puede ver algunos archivos de diseño y un archivo de actividad (MainActivity.java) con algún código escrito en él. Básicamente, tiene el menú de navegación, íconos, encabezado y manejo de los clics del elemento del menú y todo eso. Aquí lo usaré y lo extenderé para aprovechar el código que Android Studio nos dio por defecto: D

Menú de Navegación

Iré paso a paso y te contaré sobre la aplicación que vamos a construir. Primero, terminaré el diseño del menú de navegación.

Si abre el archivo activity_main.xml en el directorio app / res / layout, puede ver el código de NavigationMenu.

En el fragmento anterior en la aplicación de la última línea: menu = "@ menu / activity_main_drawer" que dice que el menú para esto se encuentra en el directorio de menú en la carpeta res. Así que ahora editemos los elementos del menú.

Abra el archivo activity_main_drawer.xml y coloque el siguiente código en él.



        
        
        
        
        
    

        
            
            
            
            
            
        
    

Si observa el código anterior, creé un menú usando menú, elemento y grupo.
menú que es el elemento raíz y puede tener elementos secundarios secundarios o secundarios como elemento y grupo.

elemento que es el elemento de menú único, podemos dividir / separar el menú creando otro menú como el elemento secundario secundario del elemento elemento. También le di un título al submenú como 'Social'.

Ejemplo de cajón de navegación - androidhunger.comEjemplo de cajón de navegación - androidhunger.com

En las capturas de pantalla anteriores, puede ver un ícono al lado de cada elemento del menú, que se puede configurar con el atributo de ícono de Android android: icon = "@ drawable / image_name", estos íconos son imágenes predeterminadas de Android o puede descargar cualquier ícono de su desear y usarlos. Los iconos de redes sociales que utilicé son de https://icons8.com/ los otros iconos son iconos predeterminados de Android.

Entonces, ahora se ha completado NaviginationMenu, ahora vincularé los clics de este elemento de menú a su fragmento relacionado.

En el archivo MainActivity.java,

Inicialicé el NavigationView usando las siguientes líneas,

NavigationView navigationView = (NavigationView) findViewById (R.id.nav_view);
navigationView.setNavigationItemSelectedListener (esto);

Manejaré los elementos de clic del menú en las siguientes líneas de código,

public boolean onNavigationItemSelected (elemento MenuItem) {
        int id = item.getItemId ();
        Fragmento fragmento = nulo;
        Bundle bundle = new Bundle ();
        if (id == R.id.home) {
            fragmento = nuevo HomeFragment ();
        } else if (id == R.id.timeTable) {
            fragment = new TimeTableFragment ();
        } else if (id == R.id.examSchedule) {
            fragmento = nuevo ExamScheduleFragment ();
        } else if (id == R.id.attendence) {
            fragment = new AttendenceFragment ();
        } else if (id == R.id.result) {
            fragmento = nuevo ResultFragment ();
        } else if (id == R.id.fb) {
            bundle.putString ("url", "https://www.facebook.com/androidhungerAH");
            fragmento = nuevo WebViewFragment ();
            fragment.setArguments (paquete);
        } else if (id == R.id.gplus) {
            bundle.putString ("url", "https://plus.google.com/+Androidhunger");
            fragmento = nuevo WebViewFragment ();
            fragment.setArguments (paquete);
        } else if (id == R.id.twitter) {
            bundle.putString ("url", "https://www.twitter.com/android_hunger");
            fragmento = nuevo WebViewFragment ();
            fragment.setArguments (paquete);
        } else if (id == R.id.github) {
            bundle.putString ("url", "https://github.com/avinashn/androidhunger.com");
            fragmento = nuevo WebViewFragment ();
            fragment.setArguments (paquete);
        } else if (id == R.id.youtube) {
            bundle.putString ("url", "https://www.youtube.com/androidhunger");
            fragmento = nuevo WebViewFragment ();
            fragment.setArguments (paquete);
        }
        if (fragmento! = nulo) {
            FragmentTransaction ft = getSupportFragmentManager (). BeginTransaction ();
            ft.replace (R.id.content_frame, fragmento);
            ft.commit ();
        }
        DrawerLayout drawer = (DrawerLayout) findViewById (R.id.drawer_layout);
        drawer.closeDrawer (GravityCompat.START);
        volver verdadero;
    }

Aquí obtuve la identificación de cada elemento del menú y utilizo esa identificación para verificar e iniciar un nuevo fragmento y para enlaces sociales, también paso la URL del enlace de red social apropiado para Android Hunger y comienzo una nueva actividad, aquí uso el mismo WebViewFragment para cargar todas mis páginas web de diferentes redes sociales.

Ahora veamos cada uno de los fragmentos y lo que hace.

Elemento del menú de navegación - Fragmento de inicio

En el archivo HomeFragment.java en la función onCreate, inicializo el diseño (R.layout.home) para este fragmento.

Public view onCreateView (inflador LayoutInflater, contenedor ViewGroup, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.home, contenedor, falso);
    }

Veamos el archivo home.xml en res / layout / home.xml

Ejemplo de cajón de navegación - androidhunger.comEjemplo de cajón de navegación - androidhunger.com

En las capturas de pantalla anteriores, anidé diferentes diseños, vista de desplazamiento horizontal y vertical, una vista personalizada para dibujar una línea divisoria horizontal y muchos más.

También puede mirar el árbol de componentes del diseño,

Ejemplo de cajón de navegación - androidhunger.com

Utilicé un LinearLayout para mostrar el nombre, semestre, departamento y número de registro, el diseño es el siguiente,


        

 

Luego, usé un atributo Ver para mostrar una línea horizontal como separador,

 

Luego, un simple TextView que dice Información importante.

Ahora un ScrollView con algunos TextView en él. Como sabes, ScrollView debería tener solo un hijo, por lo que utilizo un LinearLayout y coloco todo el TextView allí.


A continuación, mostraré un HorizontalScrollView para mostrar algunos botones,



Ahora manejaré los clics de este botón en su Fragmento (HomeFragment).

Inicialice los botones, en el método viewCreated (), coloque las siguientes líneas.

Botón btn = (Botón) getView (). FindViewById (R.id.btnID);

Voy a configurar un oyente de clics,

btn.setOnClickListener (esto);

Así que ahora dejaré que el fragmento implemente escuchas de clics.

clase pública HomeFragment extiende implementos Fragment View.OnClickListener {
....}

Ahora creará un nuevo método en Click,

public void onClick (Ver v) {
        Fragmento fragmento = nulo;
        switch (v.getId ()) {
            case R.id.btnTimeTable:
                fragment = new TimeTableFragment ();
                rotura;
            ......
            ......
        }
        getActivity (). getSupportFragmentManager (). beginTransaction ()
                .replace (R.id.content_frame, fragmento)
                .addToBackStack (nulo)
                .cometer();
    }

Entonces, cuando se hace clic en un botón, comenzaré su Fragmento relacionado.

Elemento del menú de navegación - TimeTableFragment

En el archivo TimeTableFragment.java en la función onCreate, inicializo el diseño (R.layout.timetable) para este fragmento.

Public view onCreateView (inflador LayoutInflater, contenedor ViewGroup, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.timetable, container, false);
    }

Veamos el archivo calendar.xml en res / layout / calendar.xml

Ejemplo de cajón de navegación - androidhunger.com

El árbol de componentes del diseño,

Ejemplo de cajón de navegación - androidhunger.com

Aquí, la parte principal es TableLayout, donde visualizo la tabla de tiempos con los sujetos y el tiempo, y debajo, LinearLayout para mostrar los nombres completos de los sujetos.

También coloqué estos dos diseños en un ScrollView, y para hacer el centro de ScrollView, utilicé RelativeLayout para establecer android: layout_centerVertical = "true" como el atributo de ScrollView.

TableLayout tiene varios elementos secundarios TableRow y aquí coloqué algunos TextView en sus filas.

.....

A continuación, un diseño lineal de TextView para mostrar el nombre de cada sujeto.

Elemento del menú de navegación - ExamScheduleFragment

En el archivo ExamScheduleFragment.java en la función onCreate, inicializo el diseño (R.layout.examschedule) para este fragmento.

Public view onCreateView (inflador LayoutInflater, contenedor ViewGroup, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.examschedule, container, false);
    }

Veamos el archivo examschedule.xml en res / layout / examschedule.xml

Ejemplo de cajón de navegación - androidhunger.com

Este diseño es bastante simple, solo consiste en TextView's todo en un ScrollView

Ejemplo de cajón de navegación - androidhunger.com

A continuación se muestra el fragmento de diseño,


 
             ...
             ...

Elemento del menú de navegación - Fragmento de asistencia

En el archivo AttendenceFragment.java en la función onCreate, inicializo el diseño (R.layout.attendence) para este fragmento.

Public view onCreateView (inflador LayoutInflater, contenedor ViewGroup, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.attendence, container, false);
    }

Veamos el archivo examschedule.xml en res / layout / attendence.xml

Ejemplo de cajón de navegación - androidhunger.comEjemplo de cajón de navegación - androidhunger.comEjemplo de cajón de navegación - androidhunger.com

Así que aquí, solo usé un Spinner simple para seleccionar el semestre y luego mostrar la asistencia de ese semestre en TextView. El Spinner es algo así como también puedes llamarlo un menú desplegable. Hay algunos métodos en Spinner como onItemSelected para que podamos hacer algo cuando se cambia el elemento en el Spinner. Veamos todas esas cosas geniales ahora.

Entonces, en el Fragmento de Asistencia, inicializo este Spinner,

Spinner spinner = (Spinner) view.findViewById (R.id.semSpinner);

también configure un adaptador para mostrar algunos elementos en el Spinner.

ArrayAdapter  adapter = ArrayAdapter.createFromResource (getContext (),
        R.array.semisters, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource (android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter (adaptador);

Aquí almacené la lista de elementos de Spinner en un archivo separado llamado `srings.xml` donde podemos almacenar todas las cadenas utilizadas en nuestra aplicación.

Abra /app/res/values/strings.xml y agregue la siguiente matriz de cadenas.


     Semister 1 
     Semister 2 
     Semister 3 

Así que usé esta matriz como R.array.semisters para configurar el adaptador.

Así que ahora, mostré el Spinner con algunos elementos, también necesito escuchar el cambio de elemento en el Spinner. Así que uso el elemento oyente seleccionado en este Spinner.

spinner.setOnItemSelectedListener (esto);

y un método para usar al implementar AdapterView.OnItemSelectedListener

@Anular
public void onItemSelected (AdapterView  parent, View view, int position, long id) {
    Semestre de cadena = parent.getItemAtPosition (posición) .toString ();
if (semestre.equals ("Semister 1")) {
        textView.setText ("Su asistencia a este Semister es del 82%");
    } else if (semestre.equals ("Semister 2")) {
        textView.setText ("Su asistencia a este Semister es del 86.8%");
    } else if (semestre.equals ("Semister 3")) {
        textView.setText ("Su asistencia a este Semister es del 73.8% a partir de ahora");
    }

}
Entonces, cuando cambia el semestre, acabo de actualizar TextView con algún valor estático para la asistencia.

Elemento del menú de navegación - Fragmento de resultado

La pantalla de resultados es muy similar a la asistencia a la pantalla anterior, aquí utilizo el mismo diseño, el único cambio es TextView cuando se cambia el elemento Spinner.

Ver el siguiente fragmento,

@Anular
public void onItemSelected (AdapterView  parent, View view, int position, long id) {
    Semestre de cadena = parent.getItemAtPosition (posición) .toString ();
if (semestre.equals ("Semister 1")) {
        textView.setText ("SGPA: 6.2");
    } else if (semestre.equals ("Semister 2")) {
        textView.setText ("SGPA: 6.6 CGPA: 6.4");
    } else if (semestre.equals ("Semister 3")) {
        textView.setText ("Todavía no disponible");
    }
}

Elemento del menú de navegación - WebViewFragment

En el menú de navegación, hay algunos enlaces sociales como Facebook, G +, Twitter, YouTube y Github. Entonces, cuando se presionan estos elementos, cargaré su página web relacionada. Una explicación detallada de la implementación de WebView en Android se discute en mi publicación anterior.

Entonces, en el método onNavigationIemSelected en MainActivity que acabo de comentar, simplemente pasaré la URL del sitio de red social respectivo a WebViewFragment, que luego carga la página web.

Entonces, en WebViewFragment, leeré la URL enviada,

String gurl = this.getArguments (). GetString ("url");

y pasarlo a una función callWebClient que llama al WebViewClient,

callWebClient (gurl);

y el callWebClient (gurl); función,

privado void callWebClient (cadena urll) {
    wv.setWebViewClient (nuevo myWebViewClient ());
    wv.getSettings (). setLoadsImagesAutomatically (true);
    wv.getSettings (). setJavaScriptEnabled (verdadero);
    wv.setScrollBarStyle (View.SCROLLBARS_INSIDE_OVERLAY);
    wv.loadUrl (urll);
}
Ejemplo de cajón de navegación - androidhunger.comEjemplo de cajón de navegación - androidhunger.comEjemplo de cajón de navegación - androidhunger.com

Eso es todo para esta publicación, no dude en mirar algunas de las publicaciones anteriores aquí.

Publicación: http://androidhunger.com/implement-navigation-drawer-with-example/

GitHub: https://github.com/avinashn/navigation_drawer_example_android

Demostración de la aplicación: https://www.youtube.com/watch?v=-IVrNgFzV6g