web-dev-qa-db-fra.com

Android Tiroir de navigation Studio comme l'application Gmail

Nous créons une application Android, et il y a quelque chose que nous voulons ajouter. C'est l'effet de l'application Gmail.

Vous pouvez choisir le compte que vous souhaitez afficher (et le reste de l'application se comportera en conséquence).

Example

MODIFIER:

J'ai maintenant déjà une barre de navigation (fonctionnelle), mais ce que je veux, ce sont les icônes rondes dans l'en-tête. Je veux que quelqu'un puisse choisir l'utilisateur qu'il consulte.

javaandroiddesign-patternsnavigation-drawer
12
Tvde1

L'effet souhaité peut être obtenu en utilisant NavigationView à partir de com.Android.support:design supporte la lib.

Vous pouvez trouver un tutoriel complet à ce sujet ici . Et vous pouvez télécharger le code source complet de ce tutoriel ici .

Et voici un autre tutoriel sympa que vous pourriez suivre.

Mais pour faire court, cette vue est divisée en deux parties principales, un en-tête et une partie de menu, et chacune de celles que vous devrez définir sur XML.

À partir de ce tutoriel:

Vue d'en-tête

Cette vue est essentiellement la partie supérieure du tiroir de navigation, qui contient la photo de profil, le nom et l'e-mail, etc. Vous devez définir cela dans un fichier de mise en page distinct, nous examinerons cela en un instant.

Menu

C'est le menu que vous souhaitez afficher sous votre en-tête, nous définissons le menu dans un dossier de menus, tout comme vous définissez le menu pour votre menu de débordement. Donc, fondamentalement, NavigationView est un conteneur pour la vue et le menu d'en-tête que vous allez utiliser dans votre tiroir coulissant. Alors maintenant que vous comprenez la NavigationView, nous pouvons commencer à construire notre tiroir de navigation.

Dans cet esprit, créez votre en-tête comme vous le feriez avec n'importe quelle autre mise en page. Et le menu est défini un peu comme le menu Toolbar/ActionBar. par exemple.:

navigation_menu.xml 

<?xml version="1.0" encoding="utf-8"?>
<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/icon_home"
            Android:title="@string/title_home"/>

        <item
            Android:id="@+id/drawer_content"
            Android:icon="@drawable/icon_content"
            Android:title="@string/title_content"/>

        <item
            Android:id="@+id/drawer_about"
            Android:icon="@drawable/icon_about"
            Android:title="@string/title_about"/>

        <item
            Android:id="@+id/drawer_exit"
            Android:icon="@drawable/icon_exit"
            Android:title="@string/title_exit"/>

        </group>
</menu>

Ensuite, sur votre Activity, il vous suffira de faire une mise en page comme celle trouvée dans le tutoriel, en utilisant le DrawerLayout avec NavigationView.

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/drawer"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout
        Android:layout_height="match_parent"
        Android:layout_width="match_parent"
        Android:orientation="vertical"
        >
        <include
            Android:id="@+id/toolbar"
            layout="@layout/tool_bar"/>
        <FrameLayout
            Android:id="@+id/frame"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

        </FrameLayout>

    </LinearLayout>

    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation_view"
        Android:layout_height="match_parent"
        Android:layout_width="wrap_content"
        Android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/navigation_menu"/>
</Android.support.v4.widget.DrawerLayout>

Vous devrez également créer un Fragments pour chaque écran que vous souhaitez afficher avec ce NavigationView. Après cela, sur votre Activity, vous pouvez gérer les événements de sélection en implémentant NavigationView.OnNavigationItemSelectedListener, comme ça:

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { 
    // Your Activity
        @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {
        Fragment fragment = null;

        switch(menuItem.getItemId()) {
            case R.id.drawer_home:
                fragment = new YourFragment();
                break;
            case R.id.drawer_content:
                fragment = new AnotherFragment();
                break;
            case R.id.drawer_about:
                fragment = new AboutFragment();
                break;
            case R.id.drawer_exit:
                // TODO - Prompt to exit.
                finish();
                break;
        }

        if (fragment == null) {
            fragment = new YourFragment();
        }

        drawerLayout.closeDrawers();

        FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.container, fragment)
                    .commit();

        return true;
    }
}

Quant à votre édition, les icônes pourraient être représentées par un ImageView . Et pour naviguer entre plusieurs profils, cela dépend de la façon dont vous avez implémenté cette logique sur votre application, mais en tant que réponse "générique", vous pouvez changer ces profils en utilisant quelque chose comme Spinner =.

Ces tutoriels vous aideront à traverser cette étape:

Une fois que vous avez configuré cela dans votre en-tête , gérez la sélection des éléments et modifiez le profil utilisateur en conséquence. (Cette dernière partie dépend ENTIÈREMENT de la façon dont vous avez implémenté les profils utilisateur sur votre application). Mais juste comme une longueur d'avance, vous pouvez vérifier le site de formation Android , plus précisément, cette partie .

25
Mauker

Vous devez utiliser NavigationView

Il fournit le cadre pour un tiroir de navigation de matériel facile à implémenter avec l'aide de gonfler les éléments de navigation via la ressource de menu. Avant la vue de navigation, nous avons du mal à créer un tiroir de navigation de matériel à l'aide de la vue de liste ou de la mise en page linéaire avec un adaptateur personnalisé, mais maintenant, il nous suffit d'ajouter la vue de navigation dans DrawerLayout, tout le reste sera géré par la vue de navigation.

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
     xmlns:app="http://schemas.Android.com/apk/res-auto"
     Android:id="@+id/drawer_layout"
     Android:layout_width="match_parent"
     Android:layout_height="match_parent"
     Android:fitsSystemWindows="true">

     <!-- Your contents -->

     <Android.support.design.widget.NavigationView
         Android:id="@+id/navigation"
         Android:layout_width="wrap_content"
         Android:layout_height="match_parent"
         Android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </Android.support.v4.widget.DrawerLayout>

Pour cette exigence, vous pouvez vérifier l'échantillon

  1. MaterialDrawer

  2. Comment créer un tiroir de navigation Material Design

  3. Jouer avec NavigationView

J'espère que cela t'aides .

3
IntelliJ Amiya

Je pense que ce MaterialDrawer est ce que vous recherchez. Cette bibliothèque contient de nombreux exemples. Vous pouvez soit utiliser cette bibliothèque directement, soit lire le code source et implémenter votre propre tiroir.

1
Zhaolong Zhong

Vous pouvez implémenter ce tiroir de navigation de matériaux à l'aide de la bibliothèque MaterialNavigation. L'article sur la mise en œuvre est ici .

Vous n'aurez qu'à importer cette bibliothèque et vous avez terminé. Voir le code de démonstration sur le site ci-dessous:.

https://github.com/PatilShreyas/MaterialNavigationView-Android

0
Shreyas Patil