DrawerLayout的导航图标详解

原创 2016年04月14日 13:36:38

前言

DrawerLayout是Google官方推出的一个应用于侧滑菜单的工具类,遵循Google提出的Material Design设计风格。而DrawerLayout与Toolbar之间的图标联动动画给人眼前一亮的感觉。

正文

如何创建一个如上所述的Activity?

简单地说:直接用Android Studio新建一个"Navigation Drawer Activity"就行了。
复杂地说:参考如下所示的文章:

Material Design之NavigationView和DrawerLayout实现侧滑菜单栏
如何隐藏并替换默认的图标?(不带动画效果)

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
/**
*使用Android Studio默认的创建方式应有如下所示代码
*/
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
toggle.setDrawerIndicatorEnabled(true);
drawer.setDrawerListener(toggle);
toggle.syncState();

步骤一:修改Drawerlayout对toggle的设置:
第一种:将true改为false:toggle.setDrawerIndicatorEnabled(false);
第二种:移除掉 drawer.setDrawerListener(toggle);此时与Toggle相关的语句皆可移除
步骤二:增加toolbar.setNavigationIcon(R.mipmap.ic_launcher);
修改后代码如下:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.mipmap.ic_launcher);
setSupportActionBar(toolbar);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

动画效果的实现源码详解:
从实际效果可以看出,动画是随着Drawerlayout的移动而产生的,参看源码可以发现如下代码!
这里写图片描述
这里写图片描述
这是对drawer滑动设置相关监听,接下来看对mListener的赋值
这里写图片描述
而我们使用时对mListener赋值时,使用到的是ActionBarDrawerToggle的实例。
从这,我们可以看出mListener实际上是ActionBarDrawerToggle的实例,接下来查看ActionBarToggle的源码,可以看到它是实现了DrawerListener的。定位至:
这里写图片描述
可以看到这个方法只调用了mSlider的一个方法。接下来查看对mSlider的赋值,可以看到
这里写图片描述
mSlider是DrawerArrowDrawableToggle的实例,而DrawerArrowDrawableToggle继承自继承于Drawable的DrawerArrowDrawable。后面的线就很清晰了,DrawerArrowDrawable根据传递的参数值来改变自身绘制的状态,从而达到动画的目的。

如何修改

从下图代码可以看出谷歌并未开放自定义相关的接口,所以要实现修改效果,就要么重写类实现DrawerLayout.
DrawerListener,并模仿ActionBarDrawerToggle相关方法;要么使用反射的方式修改mSlider达成目的.

/**
* In the future, we can make this constructor public if we want to let developers customize the animation.
*/
<T extends Drawable & DrawerToggle> ActionBarDrawerToggle(Activity activity, Toolbar toolbar,DrawerLayout drawerLayout, T slider,@StringRes int openDrawerContentDescRes,@StringRes int closeDrawerContentDescRes) {
    if (toolbar != null) {
        mActivityImpl = new ToolbarCompatDelegate(toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mDrawerIndicatorEnabled) {
                    toggle();
                } else if (mToolbarNavigationClickListener != null) {
                    mToolbarNavigationClickListener.onClick(v);
                }
           }
        });
    } else if (activity instanceof DelegateProvider) { // Allow the Activity to provide an impl
    mActivityImpl=((DelegateProvider)activity).
                getDrawerToggleDelegate();
    } else if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.JELLY_BEAN_MR2) {
        mActivityImpl = new JellybeanMr2Delegate(activity);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)  {
        mActivityImpl = new HoneycombDelegate(activity);
    } else {
       mActivityImpl = new DummyDelegate(activity);
    }

    mDrawerLayout = drawerLayout;
    mOpenDrawerContentDescRes = openDrawerContentDescRes;
    mCloseDrawerContentDescRes = closeDrawerContentDescRes;
    if (slider == null) {
        mSlider = new DrawerArrowDrawableToggle(activity,
        mActivityImpl.getActionBarThemedContext());
    } else {
       mSlider = slider;
    }
     mHomeAsUpIndicator = getThemeUpIndicator();
}

之前不小心将博客删了,居然不能从回收站恢复,那叫什么回收站呢!

使用DrawerLayout和Toolbar实现的侧滑菜单修改默认图标

两步: 1,设置ActionBarDrawerToggletoggle.setDrawerIndicatorEnabled(false);2,设置Toolbar toolbar.setNavigat...
  • cdhahaha
  • cdhahaha
  • 2017-04-17 11:06:31
  • 1502

Android studio DrawerLayout

Android studio DrawerLayout
  • Anddroid_LanYan
  • Anddroid_LanYan
  • 2015-07-03 09:37:38
  • 1192

DrawerToggle的三条线icon不出现在toolbar上,解决方案

mDrawerToggle.setDrawerIndicatorEnabled(true); mDrawerToggle.syncState();//关键 加入后,DrawerTogg...
  • bingo_1214
  • bingo_1214
  • 2015-12-28 17:14:56
  • 1597

安卓图标素材集合导航栏图标小图标

  • 2017年04月23日 22:42
  • 21.65MB
  • 下载

android 顶部导航TabLayout+ViewPager(包含图标文字样式)

一、实现TabLayout顶部导航的效果的步骤:1、导入Android Design Support Library即在build.gradle中添加compile 'com.android.supp...
  • hello_1s
  • hello_1s
  • 2016-06-15 14:57:38
  • 3639

ToolBar自定义图标,关联DrawerLayout

ToolBar自定义图标
  • static_zh
  • static_zh
  • 2016-09-22 11:38:54
  • 2202

DrawerLayout实现侧滑(右侧显示)

最近由于项目需要写了一个左滑(从有右侧显示)导航栏的demo,大多数的App都是右滑(从左侧显示)导航栏,这个demo主要是用于用户的一些筛选过滤的操作,好了先给大家看几张效果图,如果觉得有用的话可以...
  • lplj717
  • lplj717
  • 2016-09-19 10:45:51
  • 1739

DrawerLayout的使用

目前很多应用都有侧滑菜单,最初的侧滑菜单很多都有SildingMenu,相信很多人都用的很熟。Google推出了自己人侧滑菜单DrawerLayout,相信很多人已经在用了。这里记录一下DrawerL...
  • student9128
  • student9128
  • 2016-11-20 22:58:01
  • 7590

toolbar 与drawlayout使用,左上角图标切换动画

在Android5.0以后,系统自带了左上角切换动画,但是需要导入v7包的 首先是布局文件...
  • jt_ontheway
  • jt_ontheway
  • 2016-03-08 15:39:41
  • 1965

ChrisRenke/DrawerArrowDrawable源码解析

转载请注明出处 源码下载地址 这次解析的控件DrawerArrowDrawable是一款侧拉抽屉效果的控件,在很多应用上我们都可以看到(例如知乎),控件的github地址为https://github...
  • kangaroo835127729
  • kangaroo835127729
  • 2015-06-02 21:51:32
  • 2306
收藏助手
不良信息举报
您举报文章:DrawerLayout的导航图标详解
举报原因:
原因补充:

(最多只允许输入30个字)