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

Bonjour, 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 précise que la mise en œuvre de base. Mais j'ai besoin de personnaliser la navigation selon mes spécifications.

  1. Je dois ajouter un en-tête pour catégoriser l'élément de la liste dans le tiroir
  2. J'ai besoin d'un bouton radio pour sélectionner certaines de mes options

Comment puis-je faire ceci?

  • Comment vérifier si l'autorisation "android.permission.PACKAGE_USAGE_STATS" est donnée?
  • Java.lang.RuntimeException: Impossible d'instancier l'activité ComponentInfo / ClassNotFoundException
  • Comment activer un certificat auto-signé pour les sockets SSL sur Android?
  • Quelle est la différence entre ceci, getContext () et getActivity ()?
  • SetVisibleActivities undefined
  • Adresse de tas invalide et signal fatal 11
  • L'équivalent HAXM d'Intel pour AMD sur le système d'exploitation Windows
  • Comment détecter la rotation de l'écran?
  • Google USB Package ne s'affiche pas dans SDK Mananger
  • Qu'est-ce qu'une «application Web»?
  • L'Android ART prend-il en charge le chargement dynamique de classes d'exécution comme Dalvik?
  • Comment utiliser le chargeur d'images universel pour la liste des vignettes vidéo dans Android?
  • 8 Solutions collect form web for “Comment créer un tiroir de navigation personnalisé dans Android”

    Le didacticiel Android Custom Navigation Drawer contient un projet de base et un projet personnalisé . Ce dernier montre comment configurer un tiroir de navigation comme indiqué dans la capture d'écran:

    NavigationDrawerCustom

    Le code source des projets est disponible pour téléchargement.


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

    Tiroir de navigation - Live-O

    Le code source du projet est disponible sur GitHub.


    La bibliothèque MaterialDrawer vise à fournir la mise en œuvre la plus simple possible d'un tiroir de navigation pour votre application. Il fournit une grande quantité de personnalisations hors boîte et comprend également un en-tête facile à utiliser qui peut être utilisé comme AccountSwitcher.

    Démo de la bibliothèque MaterialDrawer


    Notez que Android Studio, quant à lui, a un projet de modèle pour créer une Activité de tiroir de navigation comme indiqué dans la capture d'écran.

    Activité du tiroir de navigation

    Ce dépôt surveille les modifications apportées au modèle.

    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.
    • Classes DrawerItem , CustomDrawerAdapter et la mise en page custom_drawer_item.xml ont été prises à partir de ce didacticiel .

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

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

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

     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/itemLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:orientation="vertical" android:layout_marginTop="0dp" android:background="?android:attr/activatedBackgroundIndicator"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:minHeight="55dp"> <ImageView android:id="@+id/drawer_icon" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/drawer_itemName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="1dp" android:layout_marginTop="1dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="#DADADC"> </View> </LinearLayout> </RelativeLayout> 

    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<DrawerItem> { Context context; List<DrawerItem> drawerItemList; int layoutResID; public CustomDrawerAdapter(Context context, int layoutResourceID, List<DrawerItem> 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 classe de NavigationDrawerFragment onCreateView méthode onCreateView , remplacez l'adaptateur autogénéré pour cela:

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

    Rappelez-vous de remplacer R.string.title_sectionN et R.drawable.ic_action_N pour vos propres ressources.

    J'ai utilisé la mise en page ci-dessous et j'ai la possibilité de réaliser une mise en page personnalisée dans la vue de navigation.

     <android.support.design.widget.NavigationView android:id="@+id/navi_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start|top" android:background="@color/navigation_view_bg_color" app:theme="@style/NavDrawerTextStyle"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/drawer_header" /> <include layout="@layout/navigation_drawer_menu" /> </LinearLayout> </android.support.design.widget.NavigationView> 

    Vous pouvez facilement personnaliser le tiroir de navigation Android une fois que vous savez comment il est mis en œuvre. Voici un joli tutoriel où vous pouvez le configurer.

    Ce sera la structure de votre mainXML:

     <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Framelayout to display Fragments --> <FrameLayout android:id="@+id/frame_container" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- Listview to display slider menu --> <ListView android:id="@+id/list_slidermenu" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="right" android:choiceMode="singleChoice" android:divider="@color/list_divider" android:dividerHeight="1dp" android:listSelector="@drawable/list_selector" android:background="@color/list_background"/> </android.support.v4.widget.DrawerLayout> 

    Vous pouvez personnaliser cette liste à votre goût en ajoutant l'en-tête. Et les boutons radio.

    Je dois ajouter un en-tête pour catégoriser l'élément de la 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 ajouter une disposition parentale en tant que Drawer puis vous pouvez faire des mises en page complexes dans le cadre normal.

    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 dans New | Activity | Navigation Drawer Activity New | Activity | Navigation Drawer Activity

    Entrez la description de l'image ici

    Vous pouvez nommer cette BaseActivity afin que toute activité que vous souhaitez avoir un tiroir de navigation ne l'étendra (en supposant que l'activité ne prolonge déjà aucune autre classe). Pour étendre les activités, voir ceci .

    Si vous exécutez votre application, c'est ce que vous obtenez:

    Entrez la description de l'image ici

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

    Exemple de tiroir de navigation simple dans Android .

    J'espère que ce blog aidera aussi les autres.

    Tirage de navigation Android à l'aide de l'activité Je viens de suivre l'exemple: http://antonioleiva.com/navigation-view/

    Vous avez juste besoin de quelques personnalisations:

     public class MainActivity extends AppCompatActivity { public static final String 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.string.drawer_open, R.string.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 mise en page xml

     <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" 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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity"> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways|snap" /> </android.support.design.widget.AppBarLayout> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/> 

    Ajouter drawer.xml dans le menu

     <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/drawer_home" android:checked="true" android:icon="@drawable/ic_home_black_24dp" android:title="@string/home"/> <item android:id="@+id/drawer_favourite" android:icon="@drawable/ic_favorite_black_24dp" android:title="@string/favourite"/> ... <item android:id="@+id/drawer_settings" android:icon="@drawable/ic_settings_black_24dp" android:title="@string/settings"/> </group> 

    Pour ouvrir et fermer le tiroir, ajoutez ces valeurs dans string.xml

     <string name="drawer_open">Open</string> <string name="drawer_close">Close</string> 

    Drawer.xml

     enter code here 

     <ImageView android:id="@+id/avatar" android:layout_width="64dp" android:layout_height="64dp" android:layout_margin="@dimen/spacing_large" android:elevation="4dp" tools:src="@drawable/ic_launcher"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/email" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginStart="@dimen/spacing_large" android:text="Username" android:textAppearance="@style/TextAppearance.AppCompat.Body2"/> <TextView android:id="@+id/email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginStart="@dimen/spacing_large" android:layout_marginBottom="@dimen/spacing_large" android:text="username@mymail.com" android:textAppearance="@style/TextAppearance.AppCompat.Body1"/> 

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.