Indicateur de tiroir dans le magasin de jeu Lollipop

Question

J'utilise un Nexus 7 avec la version d'aperçu Android 5.0.

Sur cette page http://developer.Android.com/tools/support-library/index.html

Je vois

Modifications pour la bibliothèque compatible avec la v7: mise à jour ActionBarDrawerToggle, qui contient l'animation du menu vers la flèche

Est-ce ce que l'application Google Play utilise? Suis-je trop lire dans cette déclaration? Que dois-je changer pour obtenir ce comportement - je ne le trouve pas dans la documentation de l'API.

Answer 1

J'ai publié un exemple d'application ici qui utilise la nouvelle classe Toolbar et ActionBarToggle pour fournir un ActionBar avec l'icône d'animation de style Play Store:

https://github.com/03lafaye/LollipopDrawerToggle

La branche no-v7-support utilise ActionBarToggle avec une activité Framework et une barre d'outils. La branche principale utilise la barre d'outils v7 et une ActionBarActivity.

La configuration pour ne pas utiliser un ActionBarActivity ressemble à ceci:

package com.plafayette.Lollipop;

import Android.app.Activity;
import Android.support.v4.widget.DrawerLayout;
import Android.os.Bundle;
import Android.support.v7.app.ActionBarDrawerToggle;
import Android.widget.Toolbar;
import Android.view.Menu;
import Android.view.MenuItem;

public class ToolbarActivity extends Activity {
    private ActionBarDrawerToggle toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setActionBar(toolbar);

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close);
        toggle.setDrawerIndicatorEnabled(true);
        drawerLayout.setDrawerListener(toggle);
    }

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

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (toggle.onOptionsItemSelected(item))
            return true;

        int id = item.getItemId();
        return id == R.id.action_settings || super.onOptionsItemSelected(item);
    }
}

Notez que vous devez désactiver la barre d'action de la fenêtre et la barre de titre dans votre thème comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Android:Theme.Material.Light">
        <item name="Android:windowActionBar">false</item>
        <item name="Android:windowNoTitle">true</item>
    </style>
</resources>

J'imagine que l'exemple de code de la dernière bibliothèque compatible avec l'application v7 sera publié assez tôt, rendant ce post obsolète.

Chris Renke de Square a publié un backport alternatif de l'animation d'icône up. Le code est sur GitHub ici: https://github.com/ChrisRenke/DrawerArrowDrawable et il a écrit un blog à ce sujet à http://chrisrenke.com/drawerarrowdrawable .

Answer 2

C'est très facile.

Votre mise en page avec DrawerLayout est toujours la même. Vous utilisez Android.support.v4.widget.DrawerLayout et créez des tiroirs et une zone de contenu:

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/drawerLayout"
Android:layout_width="match_parent"
Android:layout_height="match_parent" >

<RelativeLayout
    Android:id="@+id/content_frame"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="#ff0"
    Android:orientation="vertical" >
</RelativeLayout>

<ListView
    Android:id="@+id/leftDrawer"
    Android:layout_width="290dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:background="#f0f"
    Android:choiceMode="singleChoice"
    Android:clickable="true"
    Android:divider="@null"
    Android:dividerHeight="0dp"
    Android:scrollbars="none" />

Les principales modifications sont dans votre Java. Dans votre activité, où vous utilisez la disposition des tiroirs, vous devez l'étendre pour ActionBarActivity à partir de la version 7. Ensuite, vous créez des variables pour DrawerLayout et ActionBarDrawerToggle. Vos importations doivent ressembler comme ça:

import Android.support.v4.widget.DrawerLayout;
import Android.support.v7.app.ActionBarDrawerToggle;
import Android.support.v7.app.ActionBarActivity;

puis connectez tout. N'oubliez pas que la nouvelle disposition des tiroirs n'a pas d'icône! Vous ne le passez pas là où vous devriez normalement être. Code de mon activité:

import Android.content.res.Configuration;
import Android.os.Bundle;
import Android.support.v4.widget.DrawerLayout;
import Android.support.v7.app.ActionBarDrawerToggle;
import Android.support.v7.app.ActionBarActivity;
import Android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle drawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name) {};

        drawerLayout.setDrawerListener(drawerToggle);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (drawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

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

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

}

Et ça devrait marcher.

Answer 3

Découvrez ici

MainActivity.Java:

package com.poliveira.apps.materialtests;

import Android.os.Bundle;
import Android.support.v4.widget.DrawerLayout;
import Android.support.v7.app.ActionBarActivity;
import Android.support.v7.widget.Toolbar;
import Android.view.Menu;
import Android.widget.Toast;


public class MainActivity extends ActionBarActivity implements NavigationDrawerCallbacks {

    private Toolbar mToolbar;
    private NavigationDrawerFragment mNavigationDrawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        mNavigationDrawerFragment = (NavigationDrawerFragment) getFragmentManager().findFragmentById(R.id.fragment_drawer);
        mNavigationDrawerFragment.setup(R.id.fragment_drawer, (DrawerLayout) findViewById(R.id.drawer), mToolbar);
    }

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

    @Override
    public void onNavigationDrawerItemSelected(int position) {
        Toast.makeText(this, "Menu item selected -> " + position, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onBackPressed() {
        if (mNavigationDrawerFragment.isDrawerOpen())
            mNavigationDrawerFragment.closeDrawer();
        else
            super.onBackPressed();
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <include
        Android:id="@+id/toolbar_actionbar"
        layout="@layout/toolbar_default"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"/>

    <Android.support.v4.widget.DrawerLayout
        Android:id="@+id/drawer"
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/toolbar_actionbar">

        <FrameLayout
            Android:id="@+id/container"
            Android:layout_width="match_parent"
            Android:clickable="true"
            Android:layout_height="match_parent"/>

        <!-- Android:layout_marginTop="?android:attr/actionBarSize"-->
        <fragment
            Android:id="@+id/fragment_drawer"
            Android:name="com.poliveira.apps.materialtests.NavigationDrawerFragment"
            Android:layout_width="@dimen/navigation_drawer_width"
            Android:layout_height="match_parent"
            Android:layout_gravity="start"
            app:layout="@layout/fragment_navigation_drawer"/>
    </Android.support.v4.widget.DrawerLayout>
</RelativeLayout>

Answer 4

Vous semblez avoir un tiroir qui fonctionne comme je l'ai lu, sinon, la Documentation sur "Créer un tiroir de navigation" est assez bonne.

ActionBarDrawerToggle mis à jour, qui contient l'animation du menu vers la flèche

La citation ci-dessus se réfère à Créer un nouveau ActionBarDrawerToggle avec une flèche et un menu hamburger commit. Comme connexe: setDrawerIndicatorEnabled a été ajouté dans Ajouter la possibilité de désactiver l'indicateur de tiroir dans le nouveau ArrowDrawer .

Assurez-vous donc que setDrawerIndicatorEnabled n'est pas appelé avec false et utilisez

import Android.support.v7.app.ActionBarDrawerToggle;

au lieu de

import Android.support.v4.app.ActionBarDrawerToggle;

ce qui devrait être assez évident d'après les avertissements de dépréciation de toute façon:

@deprecated Veuillez utiliser ActionBarDrawerToggle dans support-v7-appcompat.

Probablement aussi besoin

// <item name="displayOptions">showHome|homeAsUp</item>
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

Answer 5

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