Comment implémenter le tiroir de navigation dans votre application Android avec un exemple

Bonjour à tous, bienvenue sur androidhunger.com. Ici, dans cette session, je vais discuter de la mise en œuvre d'un tiroir de navigation dans votre application Android avec un exemple d'application de collège pour les étudiants.

Exemple de tiroir de navigation - androidhunger.com

Cette application comporte différentes sections telles que les horaires, l'horaire des examens, les présences et les résultats, qui aident l'étudiant à se tenir au courant de tout ce que le collège a à offrir et de son implication. Cependant, toutes les données présentées ici sont des données statiques, mais vous pouvez en élargir l’idée pour développer une nouvelle application de ce type.

Alors, commençons.

Contenu:

  • Créer une nouvelle application de tiroir de navigation
  • le menu de navigation
  • Élément de menu de navigation - HomeFragment
  • Elément de menu de navigation - TimeTableFragment
  • Elément de menu de navigation - ExamScheduleFragment
  • Élément de menu de navigation - Fréquence de présence
  • Elément de menu de navigation - RésultatFragment
  • Elément de menu de navigation - WebViewFragment

Créer une nouvelle application de tiroir de navigation

Je vais créer une nouvelle application Android en sélectionnant l'activité Tiroir de navigation dans Android Studio. Voir l'image ci-dessous,

Exemple de tiroir de navigation - androidhunger.com

Donc, après qu'Android Studio ait fait son travail et vous ait finalement montré «Génération Gradle terminée» (: je plaisante, si vous avez une bonne configuration, tout se chargera bien), vous pourrez voir des fichiers de présentation et un fichier d'activité (MainActivity.java). avec du code écrit dedans. Fondamentalement, il possède le menu de navigation, les icônes, l’en-tête et le traitement des clics sur les éléments de menu, etc. Ici, je vais utiliser cela et l’étendre pour tirer parti du code que Android Studio nous a donné par défaut: D

le menu de navigation

Je vais vous expliquer étape par étape l’application que nous allons construire. Tout d'abord, je vais terminer la disposition du menu de navigation.

Si vous ouvrez le fichier activity_main.xml dans le répertoire app / res / layout, vous pouvez voir le code de NavigationMenu.

Dans l'extrait ci-dessus, dans la dernière ligne, app: menu = "@ menu / activity_main_drawer", qui indique que le menu correspondant est situé dans le répertoire menu du dossier res. Alors maintenant, laissez-nous éditer les éléments de menu.

Ouvrez le fichier activity_main_drawer.xml et placez-y le code suivant.



        
        
        
        
        
    

        
            
            
            
            
            
        
    

Si vous regardez le code ci-dessus, j'ai créé un menu en utilisant menu, élément et groupe.
menu qui est l'élément racine et il peut avoir des sous-éléments / sous-éléments tels que item et group.

item qui est l'élément de menu unique, nous pouvons diviser / séparer le menu en créant un autre menu en tant que sous-enfant de l'élément item. J'ai également donné un titre au sous-menu en tant que "Social".

Exemple de tiroir de navigation - androidhunger.comExemple de tiroir de navigation - androidhunger.com

Dans les captures d'écran ci-dessus, vous pouvez voir une icône à côté de chaque élément de menu, que vous pouvez définir à l'aide de l'attribut android icon android: icon = "@ drawable / nom_image", ces icônes sont des images par défaut d'Android ou vous pouvez télécharger n'importe quelle icône de votre ordinateur. souhaite et utilise-les. Les icônes de réseau social que j'ai utilisées proviennent de https://icons8.com/. Les autres icônes sont des icônes Android par défaut.

Alors maintenant, le NaviginationMenu est terminé, maintenant je vais lier les clics de cet élément de menu à son fragment associé.

Dans le fichier MainActivity.java,

J'ai initialisé le NavigationView en utilisant les quelques lignes suivantes,

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

Je vais gérer les éléments de menu dans les lignes de code suivantes,

Booléen public onNavigationItemSelected (élément MenuItem) {
        int id = item.getItemId ();
        Fragment fragment = nul;
        Bundle bundle = new Bundle ();
        if (id == R.id.home) {
            fragment = new HomeFragment ();
        } else if (id == R.id.timeTable) {
            fragment = new TimeTableFragment ();
        } else if (id == R.id.examSchedule) {
            fragment = new ExamScheduleFragment ();
        } else if (id == R.id.attendence) {
            fragment = new AttendenceFragment ();
        } else if (id == R.id.result) {
            fragment = new ResultFragment ();
        } else if (id == R.id.fb) {
            bundle.putString ("url", "https://www.facebook.com/androidhungerAH");
            fragment = new WebViewFragment ();
            fragment.setArguments (bundle);
        } else if (id == R.id.gplus) {
            bundle.putString ("url", "https://plus.google.com/+Androidhunger");
            fragment = new WebViewFragment ();
            fragment.setArguments (bundle);
        } else if (id == R.id.twitter) {
            bundle.putString ("url", "https://www.twitter.com/android_hunger");
            fragment = new WebViewFragment ();
            fragment.setArguments (bundle);
        } else if (id == R.id.github) {
            bundle.putString ("url", "https://github.com/avinashn/androidhunger.com");
            fragment = new WebViewFragment ();
            fragment.setArguments (bundle);
        } else if (id == R.id.youtube) {
            bundle.putString ("url", "https://www.youtube.com/androidhunger");
            fragment = new WebViewFragment ();
            fragment.setArguments (bundle);
        }
        si (fragment! = null) {
            FragmentTransaction ft = getSupportFragmentManager (). BeginTransaction ();
            ft.replace (R.id.content_frame, fragment);
            ft.commit ();
        }
        DrawerLayout tiroir = (DrawerLayout) findViewById (R.id.drawer_layout);
        tiroir.closeDrawer (GravityCompat.START);
        retourne vrai;
    }

Ici, j'ai obtenu l'identifiant de chaque élément de menu et je l'utilise pour vérifier et démarrer un nouveau fragment. Pour les liens sociaux, je passe également l'URL du lien de réseau social approprié pour Android Hunger et commence une nouvelle activité. Ici, j'utilise même WebViewFragment. pour charger toutes mes pages Web de différents réseaux sociaux.

Voyons maintenant chacun des fragments et ce qu’il fait.

Élément de menu de navigation - HomeFragment

Dans le fichier HomeFragment.java de la fonction onCreate, j'initialise la présentation (R.layout.home) pour ce fragment.

public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, ensemble Bundle savedInstanceState) {
        retour inflater.inflate (R.layout.home, conteneur, false);
    }

Voyons le fichier home.xml dans res / layout / home.xml

Exemple de tiroir de navigation - androidhunger.comExemple de tiroir de navigation - androidhunger.com

Dans les captures d'écran ci-dessus, j'ai imbriqué différentes dispositions, à la fois les vues de défilement horizontal et vertical, une vue personnalisée permettant de tracer une ligne de démarcation horizontale, etc.

Vous pouvez également consulter l'arborescence des composants de la mise en page,

Exemple de tiroir de navigation - androidhunger.com

J'ai utilisé LinearLayout pour afficher le nom, le semestre, le département et le numéro d'enregistrement. La disposition est la suivante.


        

 

Ensuite, j'ai utilisé un attribut View pour afficher une ligne horizontale comme un séparateur,

 

Ensuite, un simple TextView qui dit des informations importantes.

Maintenant, une ScrollView avec du TextView. Comme vous le savez, ScrollView ne doit avoir qu’un seul enfant, j’utilise donc LinearLayout et place tous les TextView à cet endroit.


Ensuite, je vais afficher un HorizontalScrollView pour montrer quelques boutons,



Je vais maintenant gérer ce clic dans son fragment (HomeFragment).

Initialisez les boutons, dans la méthode viewCreated (), placez les lignes suivantes.

Bouton btn = (Bouton) getView (). FindViewById (R.id.btnID);

Je vais définir un écouteur de clic pour cela,

btn.setOnClickListener (this);

Alors maintenant, je vais laisser le fragment implémenter des écouteurs de clic.

Classe publique HomeFragment extend Fragment implémente View.OnClickListener {
....}

Maintenant, il va créer une nouvelle méthode onClick,

vide public onClick (Afficher v) {
        Fragment fragment = nul;
        switch (v.getId ()) {
            case R.id.btnTimeTable:
                fragment = new TimeTableFragment ();
                Pause;
            ......
            ......
        }
        getActivity (). getSupportFragmentManager (). beginTransaction ()
                .replace (R.id.content_frame, fragment)
                .addToBackStack (null)
                .commettre();
    }

Alors maintenant, quand un bouton est cliqué, je vais commencer son fragment correspondant.

Elément de menu de navigation - TimeTableFragment

Dans le fichier TimeTableFragment.java de la fonction onCreate, j'initialise la mise en page (R.layout.timetable) de ce fragment.

public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, ensemble Bundle savedInstanceState) {
        retour inflater.inflate (R.layout.timetable, container, false);
    }

Voyons le fichier schedule.xml à res / layout / schedule.xml

Exemple de tiroir de navigation - androidhunger.com

L'arborescence des composants de la mise en page,

Exemple de tiroir de navigation - androidhunger.com

Ici, la partie principale est la TableLayout où j’affiche l’horaire avec les sujets et l’heure et en dessous, une LinearLayout pour afficher les noms complets des sujets.

Également placé ces deux mises en page dans un ScrollView, et pour créer le centre ScrollView, j'ai utilisé RelativeLayout pour définir android: layout_centerVertical = "true" en tant qu'attribut de ScrollView.

TableLayout a plusieurs éléments enfants TableRow et ici j'ai placé des TextView dans ses lignes.

.....

Ensuite, un LinearLayout de TextView pour afficher le nom de chaque sujet.

Elément de menu de navigation - ExamScheduleFragment

Dans le fichier ExamScheduleFragment.java de la fonction onCreate, j'initialise la présentation (R.layout.examschedule) de ce fragment.

public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, ensemble Bundle savedInstanceState) {
        retour inflater.inflate (R.layout.examschedule, conteneur, false);
    }

Voyons le fichier examschedule.xml dans res / layout / examschedule.xml

Exemple de tiroir de navigation - androidhunger.com

Cette mise en page est assez simple, elle consiste simplement en un TextView dans un ScrollView

Exemple de tiroir de navigation - androidhunger.com

Ci-dessous l'extrait de mise en page,


 
             ...
             ...

Élément de menu de navigation - Fréquence de présence

Dans le fichier AttendenceFragment.java de la fonction onCreate, j'initialise la présentation (R.layout.attendence) pour ce fragment.

public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, ensemble Bundle savedInstanceState) {
        retour inflater.inflate (R.layout.attendence, conteneur, false);
    }

Voyons le fichier examschedule.xml dans res / layout / attendence.xml

Exemple de tiroir de navigation - androidhunger.comExemple de tiroir de navigation - androidhunger.comExemple de tiroir de navigation - androidhunger.com

Donc ici, je viens d'utiliser un simple Spinner pour sélectionner le semestre et ensuite afficher la présence de ce semestre dans TextView. Le Spinner est quelque chose du genre que vous pouvez aussi appeler un menu déroulant. Il existe certaines méthodes sur Spinner comme sur onItemSelected afin que nous puissions faire quelque chose lorsque l'élément de Spinner est modifié. Voyons tous ces trucs cool maintenant.

Donc, dans AttendenceFragment, j'initialise cette spinner,

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

définissez également un adaptateur pour afficher certains éléments dans le Spinner.

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

Ici, j'ai stocké la liste d'éléments Spinner dans un fichier séparé appelé `srings.xml` où nous pouvons stocker toutes les chaînes utilisées dans notre application.

Ouvrez /app/res/values/strings.xml et ajoutez le tableau de chaînes suivant.


     Semister 1 
     Semister 2 
     Semister 3 

J'ai donc utilisé ce tableau en tant que R.array.semisters pour définir l'adaptateur.

Alors maintenant, j'ai affiché le Spinner avec quelques éléments, je dois aussi écouter le changement d'objet dans le Spinner. Donc, j'utilise un auditeur d'élément sélectionné sur ce Spinner.

spinner.setOnItemSelectedListener (this);

et une méthode à utiliser lors de la mise en œuvre de AdapterView.OnItemSelectedListener

@Passer outre
public void onItemSelected (AdapterView  parent, Afficher la vue, int position, id long) {
    Semestre de chaîne = parent.getItemAtPosition (position) .toString ();
if (semester.equals ("Semister 1")) {
        textView.setText ("Votre présence à cette édition est de 82%");
    } else if (semester.equals ("Semister 2")) {
        textView.setText ("Votre participation à ce séminaire est de 86,8%");
    } else if (semester.equals ("Semister 3")) {
        textView.setText ("Votre participation à ce séminaire est de 73,8% à ce jour.");
    }

}
Ainsi, lorsque le semestre change, je viens de mettre à jour le TextView avec une valeur statique pour la présence.

Elément de menu de navigation - RésultatFragment

L’écran des résultats est très similaire à celui de l’affichage précédent. Ici, j’utilise la même présentation, le seul changement est l’affichage TextView lorsque l’élément Spinner est modifié.

Voir l'extrait suivant,

@Passer outre
public void onItemSelected (AdapterView  parent, Afficher la vue, int position, id long) {
    Semestre de chaîne = parent.getItemAtPosition (position) .toString ();
if (semester.equals ("Semister 1")) {
        textView.setText ("SGPA: 6.2");
    } else if (semester.equals ("Semister 2")) {
        textView.setText ("SGPA: 6.6 CGPA: 6.4");
    } else if (semester.equals ("Semister 3")) {
        textView.setText ("Pas encore disponible");
    }
}

Elément de menu de navigation - WebViewFragment

Dans le menu de navigation, vous trouverez des liens sociaux tels que Facebook, G +, Twitter, YouTube et Github. Ainsi, lorsque ces éléments sont activés, je vais charger la page Web correspondante. Une explication détaillée de la mise en œuvre de WebView dans Android est traitée dans mon précédent article.

Ainsi, dans la méthode onNavigationIemSelected inMainActivity dont je viens de parler, je vais simplement passer l'URL du site de réseau social respectif à WebViewFragment, qui charge ensuite la page Web.

Donc, dans WebViewFragment, je vais lire l'URL envoyée,

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

et le transmettre à une fonction callWebClient qui appelle WebViewClient,

callWebClient (gurl);

et l'appel webClient (gurl); une fonction,

appel privé privé WebClient (String urll) {
    wv.setWebViewClient (new myWebViewClient ());
    wv.getSettings (). setLoadsImagesAutomatically (true);
    wv.getSettings (). setJavaScriptEnabled (true);
    wv.setScrollBarStyle (View.SCROLLBARS_INSIDE_OVERLAY);
    wv.loadUrl (urll);
}
Exemple de tiroir de navigation - androidhunger.comExemple de tiroir de navigation - androidhunger.comExemple de tiroir de navigation - androidhunger.com

C’est tout pour ce billet, n'hésitez pas à consulter certains des messages précédents ici.

Message: http://androidhunger.com/implement-navigation-drawer-with-example/

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

Démo de l'application: https://www.youtube.com/watch?v=-IVrNgFzV6g