Hacer un menu lateral nativo con Android en Fragment

Vamos aprender hacer un menú rápido en Android.

Lo primero es crear nuestro nuevo proyecto al cual de daré el nombre de EjemploMenuLat y en el Domain colocare com.menu.codigos, recuerden que el nombre y el dominio lo pueden colocar a gusto de ustedes, lo importante es que cuando copien el código cambien también estos datos.

Damos clic en siguiente y seleccionamos el SDK mínimo para nuestra App, yo lo deje tal cual, si tienen algún SDK en especial selecciónelo (Recuerda que el SDK seleccionado tienen que tenerlo descargado en su pc para su funcionamiento, esto lo pueden hacer en SDK MANAGER de Android).

El paso siguiente es el mas importante para lograr el menú pues en esta opción de decimos a Android Studio que nuestro proyecto va hacer un Activity de navegación, para lo cual escogemos la opción Navigation drawer Activity, seleccionando esta opción Android Studio nos crea el código base para nuestro desarrollo del menú.

El ultimo paso de la creación básica sera darle nombre a nuestra actividad para lo cual les sugiero dejarla igual puesto que todos entendemos que MainActivity en el comienzo de nuestra aplicación, sera muy útil si otras personas interactúa con el proyecto.

Listo ya temenos creado nuestro proyecto con su estructura de navegacion en Fragment. Ahora que es navegación por Fragment, pues bien un Fragmento representa un comportamiento o una porción de interfaz de usuario en una actividad. Puede combinar varios fragmentos en una sola actividad para construir una interfaz de usuario multi-panel y reutilizar un fragmento en múltiples actividades. Usted puede pensar en un fragmento como una sección modular de una actividad, que tiene su propio ciclo de vida, recibe sus propios eventos de entrada, y que usted puede agregar o quitar mientras que la actividad está en marcha (algo así como una "actividad sub" que pueda reutilizar en diferentes actividades).

Listo una vez entendido que es un Fragment, vamos a crear una Clase que va hacer nuestro Home y esta clase va estar atada a un xml.

Class Home

  package codigos.menu.com.ejemplomenulat;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by jcmolanoro on 09/03/2015.
 */
public class Home extends android.app.Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.home, container, false);


        return rootView;
    }


}

En el código podemos observar que tenemos un inflante, esto lo que va hacer es decirle a Android que coloque el código de nuestra clase en el container.

home.xml

En el xml solo vamos acrear un titulo para el ejemplo le damos color y tamaño en la fuente.




    

        
    

Listo una vez creado la clase y su respectivo xml vamos a cambiar un poco el código en el MainActivity específicamente en la función onNavigationDrawerItemSelected, donde cambiaremos el código por el siguiente.

 public void onNavigationDrawerItemSelected(int position) {
        android.app.Fragment fragment = null;
        switch (position) {
            case 0:
                fragment = new Home();
                mTitle = "Home titulo";
                break;
            case 1:
                fragment = new MisDatos();
                mTitle = "Datos personales";
                break;
        }
        if (fragment != null) {
            // Start the animated transition.
            FragmentTransaction fragmentManager = getFragmentManager().beginTransaction();
            fragmentManager.replace(R.id.container, fragment)
                    .addToBackStack(null);

            // Start the animated transition.
            fragmentManager.commit();

            setTitle(mTitle);
        }
    }

En esta porción de código hemos agregado también una clase llamada MisDatos para que nos funcione tenemos que hacer los mismo que hicimos con la clase Home, Estas clases son llamadas desde esta función la cual dependiendo de la posición del item seleccionado nos la ejecutara por eso creamos switch case, adicional mente encontramos una variable llamada mTitle que es la encargada de setear el titulo del Fragment.

MainActivity.java (Completo)


package android.ejemplo.com.ejemplomenulateral;

import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;


public class MainActivity extends ActionBarActivity
        implements NavigationDrawerFragment.NavigationDrawerCallbacks {

    /**
     * Fragment managing the behaviors, interactions and presentation of the navigation drawer.
     */
    private NavigationDrawerFragment mNavigationDrawerFragment;

    /**
     * Used to store the last screen title. For use in {@link #restoreActionBar()}.
     */
    private CharSequence mTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mNavigationDrawerFragment = (NavigationDrawerFragment)
                getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
        mTitle = getTitle();

        // Set up the drawer.
        mNavigationDrawerFragment.setUp(
                R.id.navigation_drawer,
                (DrawerLayout) findViewById(R.id.drawer_layout));
    }

    @Override
    public void onNavigationDrawerItemSelected(int position) {
        android.app.Fragment fragment = null;
        switch (position) {
            case 0:
                fragment = new Home();
                mTitle = "Home titulo";
                break;
            case 1:
                fragment = new MisDatos();
                mTitle = "Datos personales";
                break;
        }
        if (fragment != null) {
            // Start the animated transition.
            FragmentTransaction fragmentManager = getFragmentManager().beginTransaction();
            fragmentManager.replace(R.id.container, fragment)
                    .addToBackStack(null);

            // Start the animated transition.
            fragmentManager.commit();

            setTitle(mTitle);
        }   
    }

    public void onSectionAttached(int number) {
        switch (number) {
            case 1:
                mTitle = getString(R.string.title_section1);
                break;
            case 2:
                mTitle = getString(R.string.title_section2);
                break;
            case 3:
                mTitle = getString(R.string.title_section3);
                break;
        }
    }

    public void restoreActionBar() {
        ActionBar actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setTitle(mTitle);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        if (!mNavigationDrawerFragment.isDrawerOpen()) {
            // Only show items in the action bar relevant to this screen
            // if the drawer is not showing. Otherwise, let the drawer
            // decide what to show in the action bar.
            getMenuInflater().inflate(R.menu.main, menu);
            restoreActionBar();
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
            return rootView;
        }

        @Override
        public void onAttach(Activity activity) {
            super.onAttach(activity);
            ((MainActivity) activity).onSectionAttached(
                    getArguments().getInt(ARG_SECTION_NUMBER));
        }
    }

}


Listo solo queda probarla.

Comentarios

  1. Buenas , no me queda del todo claro como inicias de primeras el fragment home, para nada mas arrancar la app se muestre.
    Mi fallo es la pregunta anterior, dado a que nunca se me muestra de primeras el fragment

    ResponderEliminar
    Respuestas
    1. el Home se inicia cuando se define en la posición 0 del switch case de la funcion onNavigationDrawerItemSelected del MainActivity. esta posición es tomada por la class NavigationDrawer

      Eliminar

Publicar un comentario

Gracias por compartir tus comentarios con nosotros, si el comentario requiere de alguna respuesta por parte de nosotros, trataremos de responderte lo mas pronto posible.

Entradas populares de este blog

Como conectar MySQL con Android Nativo

Lista con imágenes Android nativo (ListView)

SUMAR RESTAR HORAS DÍAS EN ANDROID