Comment créer un tiroir de navigation personnalisé dans Android

Salut, j’essaie de créer un tiroir de navigation similaire au tiroir de navigation de l’application gmail. Je suis le site du développeur mais il ne spécifie que l’implémentation de base. Mais je dois personnaliser la navigation en fonction de mes spécifications.

  1. Je dois append un en-tête pour classer l’élément de liste dans le tiroir
  2. J’ai besoin d’un bouton radio pour sélectionner certaines de mes options

Comment puis-je faire ceci?

Le tutoriel Android Custom Navigation Drawer (via archive.org) contient un projet de base et un projet personnalisé . Ce dernier montre comment configurer un tiroir de navigation comme indiqué sur la capture d’écran:

NavigationDrawerCustom

Le code source des projets (via archive.org) est disponible pour téléchargement.


C’est aussi le tiroir de navigation – projet Live-O …

Tiroir de navigation - Live-O

Le code source du projet est disponible sur GitHub.


La bibliothèque MaterialDrawer vise à fournir l’implémentation la plus simple possible d’un tiroir de navigation pour votre application. Il fournit une grande quantité de personnalisations prêtes à l’emploi et comprend également un en-tête facile à utiliser pouvant être utilisé comme AccountSwitcher.

Démo de la bibliothèque MaterialDrawer


Veuillez noter qu’Android Studio a quant à lui un projet de modèle pour créer une activité de tiroir de navigation comme indiqué sur la capture d’écran.

Activité du tiroir de navigation

Ce référentiel assure le suivi des modifications apscopes au modèle.

J’ai utilisé ci-dessous la mise en page et capable de réaliser une disposition personnalisée dans la vue de navigation.

      

La solution la plus simple pour moi était:

Considérations:

  • Cette solution nécessite une activité de tiroir de navigation générée automatiquement par Android Studio.
  • Les classes DrawerItem , CustomDrawerAdapter et layout custom_drawer_item.xml ont été extraites de ce didacticiel .

1. Créez cette classe pour envelopper l’élément de tiroir personnalisé:

 public class DrawerItem { Ssortingng ItemName; int imgResID; public DrawerItem(Ssortingng itemName, int imgResID) { super(); ItemName = itemName; this.imgResID = imgResID; } public Ssortingng getItemName() { return ItemName; } public void setItemName(Ssortingng itemName) { ItemName = itemName; } public int getImgResID() { return imgResID; } public void setImgResID(int imgResID) { this.imgResID = imgResID; } } 

2. Créez une disposition personnalisée (custom_drawer_item.xml) pour vos éléments de tiroir:

           

3. Créez votre adaptateur personnalisé:

 import java.util.List; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; public class CustomDrawerAdapter extends ArrayAdapter { Context context; List drawerItemList; int layoutResID; public CustomDrawerAdapter(Context context, int layoutResourceID, List listItems) { super(context, layoutResourceID, listItems); this.context = context; this.drawerItemList = listItems; this.layoutResID = layoutResourceID; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub DrawerItemHolder drawerHolder; View view = convertView; if (view == null) { LayoutInflater inflater = ((Activity) context).getLayoutInflater(); drawerHolder = new DrawerItemHolder(); view = inflater.inflate(layoutResID, parent, false); drawerHolder.ItemName = (TextView)view.findViewById(R.id.drawer_itemName); drawerHolder.icon = (ImageView) view.findViewById(R.id.drawer_icon); view.setTag(drawerHolder); } else { drawerHolder = (DrawerItemHolder) view.getTag(); } DrawerItem dItem = (DrawerItem) this.drawerItemList.get(position); drawerHolder.icon.setImageDrawable(view.getResources().getDrawable( dItem.getImgResID())); drawerHolder.ItemName.setText(dItem.getItemName()); return view; } private static class DrawerItemHolder { TextView ItemName; ImageView icon; } } 

4. Dans la méthode onCreateView classe NavigationDrawerFragment onCreateView , remplacez l’adaptateur généré automatiquement pour cela:

 ArrayList dataList = new ArrayList(); dataList.add(new DrawerItem(getSsortingng(R.ssortingng.title_section1), R.drawable.ic_action_1)); dataList.add(new DrawerItem(getSsortingng(R.ssortingng.title_section2), R.drawable.ic_action_2)); dataList.add(new DrawerItem(getSsortingng(R.ssortingng.title_section3), R.drawable.ic_action_3)); mDrawerListView.setAdapter(new CustomDrawerAdapter( getActivity(), R.layout.custom_drawer_item, dataList)); 

N’oubliez pas de remplacer R.ssortingng.title_sectionN et R.drawable.ic_action_N pour vos propres ressources.

Vous pouvez facilement personnaliser le tiroir de navigation Android une fois que vous savez comment sa mise en œuvre. Voici un bon tutoriel où vous pouvez le configurer.

Ce sera la structure de votre mainXML:

       

Vous pouvez personnaliser cette vue à votre guise en ajoutant l’en-tête. Et radiobuttons.

Android Navigation Drawer utilisant l’activité Je viens de suivre l’exemple: http://antonioleiva.com/navigation-view/

Vous avez juste besoin de peu de personnalisation:

 public class MainActivity extends AppCompatActivity { public static final Ssortingng AVATAR_URL = "http://lorempixel.com/200/200/people/1/"; private DrawerLayout drawerLayout; private View content; private Toolbar toolbar; private NavigationView navigationView; private ActionBarDrawerToggle drawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_dashboard); toolbar = (Toolbar) findViewById(R.id.toolbar); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); initToolbar(); setupDrawerLayout(); content = findViewById(R.id.content); drawerToggle = setupDrawerToggle(); final ImageView avatar = (ImageView) navigationView.getHeaderView(0).findViewById(R.id.avatar); Picasso.with(this).load(AVATAR_URL).transform(new CircleTransform()).into(avatar); } private void initToolbar() { final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); final ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp); actionBar.setDisplayHomeAsUpEnabled(true); } } private ActionBarDrawerToggle setupDrawerToggle() { return new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.ssortingng.drawer_open, R.ssortingng.drawer_close); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); // Sync the toggle state after onRestoreInstanceState has occurred. drawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); // Pass any configuration change to the drawer toggles drawerToggle.onConfigurationChanged(newConfig); } private void setupDrawerLayout() { drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); navigationView = (NavigationView) findViewById(R.id.navigation_view); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { int id = menuItem.getItemId(); switch (id) { case R.id.drawer_home: Intent i = new Intent(getApplicationContext(), MainActivity.class); startActivity(i); finish(); break; case R.id.drawer_favorite: Intent j = new Intent(getApplicationContext(), SecondActivity.class); startActivity(j); finish(); break; } return true; } }); 

} Voici la disposition de xml

        

Ajouter drawer.xml dans le menu

     ...   

Pour ouvrir et fermer le tiroir, ajoutez cette valeur dans ssortingng.xml

 Open Close 

tiroir.xml

 enter code here 

    

Je dois append un en-tête pour classer l’élément de liste dans le tiroir

Personnaliser la listView ou utiliser listView

J’ai besoin d’un bouton radio pour sélectionner certaines de mes options

Vous pouvez le faire sans modifier l’implémentation actuelle de NavigationDrawer , il vous suffit de créer un adaptateur personnalisé pour votre listView . Vous pouvez append une mise en page parent en tant que Drawer vous pouvez alors y faire des mises en page complexes.

Si vous utilisez Android Studio il fournit un outil très simple pour créer une activité avec un tiroir de navigation.

Faites un clic droit sur votre colis, allez à New | Activity | Navigation Drawer Activity New | Activity | Navigation Drawer Activity

entrer la description de l'image ici

Vous pouvez nommer cette BaseActivity afin que toute activité que vous souhaitez avoir dans un tiroir de navigation la prolonge (en supposant que l’activité n’élargit pas déjà une autre classe). Pour prolonger les activités, voir ceci .

Si vous exécutez votre application, voici ce que vous obtenez:

entrer la description de l'image ici

À partir de là, tout ce dont vous avez besoin pour personnaliser les éléments du tiroir et append du contenu à l’ main content view est de suivre la documentation officielle ou celle de votre choix.