How to animate the hamburger icon to back arrow while using design support library?

问题

Hello I am using the most recent support library from android called design support library and using the NavigationView in it for shwing drawer. But the problem is when I am openning my drawer my hamburger icon doesnt spins into a back arrow icon, it always remains the same, but I can remember that when I used the drawerlayout without the support library it spinned automatically, here is my last try that I did:

dl.setDrawerListener(new ActionBarDrawerToggle(this, dl, tb, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);

                supportInvalidateOptionsMenu();
            }

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

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);

            }
        });

but nothing happeded, is there any short trick or tips that I am mising here?

回答1:

Here is complete code to bind toolbar, drawer layout and how to sync them.

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.my_drawer_layout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);

        setSupportActionBar(toolbar);
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawer,
                toolbar, R.string.drawer_open, R.string.drawer_close);

        drawer.setDrawerListener(drawerToggle);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        drawerToggle.syncState();

回答2:

You may add these lines.

mDrawerLayout.post(new Runnable() {
        @Override
        public void run() {
           mActionBarDrawerToggle.syncState(); //Create a ActionBarDrawerToggle object instead of using a anonymous class in set drawerlistener
        }
    });

Hope it helps.

回答3:

I have solved my problem by this, Actually I was using a method to hard set the hamburger icon as the actionbar icon using this code:

ab.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);

I have just commented out this line of code and then it worked.

回答4:

I've made a class which you can use to animate hamburger or menu icon .

import android.app.Activity;
import android.content.Context;
import android.support.v7.graphics.drawable.DrawerArrowDrawable;

/**
* Created by ankush38u on 5/13/2016.
*/
public class DrawerArrowAnimation {
public static class DrawerArrowDrawableToggle extends DrawerArrowDrawable       implements DrawerToggle {
    private final Activity mActivity;

    public DrawerArrowDrawableToggle(Activity activity, Context themedContext) {
        super(themedContext);
        mActivity = activity;
    }

    public void setPosition(float position) {
        if (position == 1f) {
            setVerticalMirror(true);
        } else if (position == 0f) {
            setVerticalMirror(false);
        }
        setProgress(position);
    }

    public float getPosition() {
        return getProgress();
    }
}

/**
 * Interface for toggle drawables. Can be public in the future
 */
  public static interface DrawerToggle {

    public void setPosition(float position);

    public float getPosition();
}

}

Then make a variable in activity or fragment for this animated drawable and set the drawable as drawable resource for home icon by .setHomeAsUpIndicator(drawerDrawable)

public static DrawerArrowAnimation.DrawerArrowDrawableToggle drawerDrawable;


//this is if you are using fragments
((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);
drawerDrawable = new DrawerArrowAnimation.DrawerArrowDrawableToggle(((AppCompatActivity) getActivity()), ((AppCompatActivity) getActivity()).getSupportActionBar().getThemedContext());
    ((AppCompatActivity) getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    ((AppCompatActivity) getActivity()).getSupportActionBar().setHomeButtonEnabled(true);
    ((AppCompatActivity) getActivity()).getSupportActionBar().setHomeAsUpIndicator(drawerDrawable);

Now you can use drawerDrawable.setPosition(float position); setPosition from 0.0f to 1.0f to animate the drawable icon.

来源：https://stackoverflow.com/questions/31255785/how-to-animate-the-hamburger-icon-to-back-arrow-while-using-design-support-libra

标签

android

android-layout

androiddesignsupport