web-dev-qa-db-fra.com

Tiroir de navigation (tiroir de menu) Android 5 (Lollipop) style

J'utilise la bibliothèque menudrawer dans mon projet (celui-ci: https://github.com/SimonVT/Android-menudrawer ).

Je mets à jour mon application pour être compatible avec API21 (Android 5 Lollipop) et Material Design. Lorsque vous utilisez cette bibliothèque avec l'icône menudrawer d'API21, l'apparence est mauvaise.

Je veux réaliser la transition que vous pouvez voir dans le nouveau Play Store (nouvelle transition de l'icône menudrawer vers la flèche).

Play Store navigation drawer icon

Quelle est la meilleure façon de procéder? Est-ce possible avec cette bibliothèque? La seule solution à laquelle je pense en ce moment est un dessin personnalisé. Mais peut-être que je peux utiliser le drawable natif d'une manière ou d'une autre?

androiddrawablenavigation-drawerandroid-5.0-lollipop
13
adek

D'ACCORD. J'ai passé quelques heures avec la nouvelle API et je pense que le mieux pour moi sera de réécrire mon tiroir de lib en DrawerLayout natif.

Mais peut-être que cela sera utile pour quelqu'un avec un problème similaire. J'ai créé un projet de test avec DrawerLayout (Android Studio -> Nouveau projet avec menudrawer).

Et puis j'ai vu le même problème. Mauvaise icône. Si vous voulez voir une animation fantaisie et une bonne icône pour Android 5.0 assurez-vous que vous utilisez:

import Android.support.**v7**.app.ActionBarDrawerToggle;

Prenez note de la v7. Par défaut, la classe Fragment a une importation v4 et vous ne verrez pas de bonne icône.

Autre chose. Après avoir changé en v7, vous devez corriger la fonction ActionBarDrawerToggle au nouveau constructeur. Et c'est tout. Vous verrez une nouvelle icône de tiroir.

41
adek

Tout d'abord, assurez-vous de mettre à jour le dernier SDK. Créez un nouveau projet dans Android Studio, puis ajoutez les bibliothèques appcompat-v7.21.0. + Et appcompat-v4.21.0. + Dans votre buid.gradle comme dépendance gradle.

compile 'com.Android.support:appcompat-v7:21.0.2'
compile 'com.Android.support:support-v4:21.0.2'

Ajoutez primaryColor et primarycolorDark dans votre fichier color.xml.

<resources>
<color name="primaryColor">#2196F3</color>
<color name="primaryColorDark">#0D47A1</color>
</resources>

Ajoutez une valeur de chaîne d'ouverture/fermeture de tiroir dans votre fichier strings.xml.

<resources>
<string name="app_name">Lollipop Drawer</string>
<string name="action_settings">Settings</string>
<string name="drawer_open">open</string>
<string name="drawer_close">close</string>
</resources>

Votre fichier de mise en page activity_my.xml ressemble à ceci:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:orientation="vertical"
Android:layout_height="match_parent"
tools:context=".MainActivity">

<include layout="@layout/toolbar" />


<Android.support.v4.widget.DrawerLayout
    Android:layout_width="match_parent"
    Android:id="@+id/drawerLayout"
    Android:layout_height="match_parent">

    <!-- activity view -->
    <RelativeLayout
        Android:layout_width="match_parent"
        Android:background="#fff"
        Android:layout_height="match_parent">

        <TextView
            Android:layout_centerInParent="true"
            Android:layout_width="wrap_content"
            Android:textColor="#000"
            Android:text="Activity Content"
            Android:layout_height="wrap_content" />
    </RelativeLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        Android:layout_gravity="left|start"
        Android:layout_width="match_parent"
        Android:background="#fff"
        Android:layout_height="match_parent">

        <ListView
            Android:id="@+id/left_drawer"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:divider="#eee"
            Android:background="#fff"
            Android:dividerHeight="1dp" />
    </RelativeLayout>

</Android.support.v4.widget.DrawerLayout>

</LinearLayout>

Votre fichier de disposition toolbar.xml ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/toolbar"
Android:minHeight="?attr/actionBarSize"
Android:background="?attr/colorPrimary"
Android:layout_width="match_parent"
Android:layout_height="wrap_content">

</Android.support.v7.widget.Toolbar>

Votre MyActivity.Java ressemble à ceci: Ici, votre activité doit étendre ActionBarActivity et définir votre barre d'outils comme barre d'action de support.

import Android.content.res.Configuration;
import Android.support.v4.widget.DrawerLayout;
import Android.support.v7.app.ActionBarActivity;
import Android.os.Bundle;
import Android.support.v7.app.ActionBarDrawerToggle;
import Android.support.v7.widget.Toolbar;
import Android.view.Menu;
import Android.view.MenuItem;
import Android.view.View;
import Android.widget.ArrayAdapter;
import Android.widget.ListView;

public class MyActivity extends ActionBarActivity {

private Toolbar toolbar;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle drawerToggle;
private ListView leftDrawerList;
private ArrayAdapter<String> navigationDrawerAdapter;
private String[] leftSliderData = {"Home", "Android", "Sitemap", "About", "Contact Me"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    nitView();
    if (toolbar != null) {
        toolbar.setTitle("Navigation Drawer");
        setSupportActionBar(toolbar);
    }
    initDrawer();
}

private void nitView() {
    leftDrawerList = (ListView) findViewById(R.id.left_drawer);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    navigationDrawerAdapter=new ArrayAdapter<String>( MyActivity.this, Android.R.layout.simple_list_item_1, leftSliderData);
    leftDrawerList.setAdapter(navigationDrawerAdapter);
}

private void initDrawer() {

    drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);

        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);

        }
    };
    drawerLayout.setDrawerListener(drawerToggle);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    drawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    drawerToggle.onConfigurationChanged(newConfig);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.my, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    if (drawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}
}

Créer un fichier style.xml dans le dossier values-21 pour Android Lollipop

<?xml version="1.0" encoding="utf-8"?>
<resources>

<style name="myAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="Android:statusBarColor">@color/primaryColorDark</item>

    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@Android:color/black</item>
</style>

</resources>

Créez votre fichier style.xml dans le dossier de valeurs pour les anciennes versions puis Android Lollipop

<resources>

<style name="myAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="Android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@Android:color/black</item>
</style>

</resources>

Votre fichier AndroidManifest.xml ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:Android="http://schemas.Android.com/apk/res/Android"
package="nkdroid.com.lollipopdrawer" >

<application
    Android:allowBackup="true"
    Android:icon="@drawable/ic_launcher"
    Android:label="@string/app_name"
    Android:theme="@style/myAppTheme" >
    <activity
        Android:name=".MyActivity"
        Android:label="@string/app_name" >
        <intent-filter>
            <action Android:name="Android.intent.action.MAIN" />

            <category Android:name="Android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

</manifest>

Pour référence seulement: vous pouvez télécharger le code source complet à partir d'ici: cliquez ici

19
nirav kalola

Découvrez les nouveaux composants Lollipop sortis en mai 2015 par Android.

Bibliothèque de support de conception

Blog sur la bibliothèque de support de conception

1
Pioneer