当前位置:   article > 正文

DrawerLayout使用详解

drawerlayout

一.drawerLayout解释

实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(drawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化(这需要使用者自己实现)

二.布局

  1. <android.support.v4.widget.DrawerLayout
  2. android:id="@+id/drawer_layout"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  5. <!-- 内容区 -->
  6. <LinearLayout
  7. android:layout_width="match_parent"
  8. android:layout_height="wrap_content"
  9. android:gravity="center"
  10. android:orientation="vertical">
  11. <TextView
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:padding="20dp"
  15. android:text="内容区"
  16. android:textSize="20sp"/>
  17. <Button
  18. android:id="@+id/btn_open_left"
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. android:text="打开左边"/>
  22. <Button
  23. android:id="@+id/btn_open_right"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:text="打开右边"/>
  27. </LinearLayout>
  28. <!-- 左边菜单 -->
  29. <android.support.design.widget.NavigationView
  30. android:id="@+id/navigation_view"
  31. android:layout_width="260dp"
  32. android:layout_height="match_parent"
  33. android:layout_gravity="start"
  34. app:headerLayout="@layout/drawer_header"
  35. app:menu="@menu/menu_drawer_left"/>
  36. <!-- 右边菜单 -->
  37. <LinearLayout
  38. android:layout_width="match_parent"
  39. android:layout_height="match_parent"
  40. android:layout_gravity="end"
  41. android:background="@color/black"
  42. android:gravity="center"
  43. android:orientation="vertical">
  44. <TextView
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:padding="20dp"
  48. android:text="右边菜单"
  49. android:textColor="@color/white"
  50. android:textSize="20sp"
  51. android:textStyle="bold"/>
  52. <Button
  53. android:id="@+id/btn_close_right"
  54. android:layout_width="wrap_content"
  55. android:layout_height="wrap_content"
  56. android:text="关闭"/>
  57. </LinearLayout>
  58. </android.support.v4.widget.DrawerLayout>
  • 外层是DrawerLayout,第一个子view是内容区,侧滑内容紧跟其后。
  • 侧滑内容可以有好几个
  • android:layout_gravity="end" 标识从左边还是右边滑出

三.控件调用

GravityCompat.START方式更好

四.新增监听

  1. //监听
  2. mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
  3. @Override
  4. public void onDrawerSlide(@NonNull View view, float v) {
  5. Log.i("---", "滑动中");
  6. }
  7. @Override
  8. public void onDrawerOpened(@NonNull View view) {
  9. Log.i("---", "打开");
  10. }
  11. @Override
  12. public void onDrawerClosed(@NonNull View view) {
  13. Log.i("---", "关闭");
  14. }
  15. @Override
  16. public void onDrawerStateChanged(int i) {
  17. Log.i("---", "状态改变");
  18. }
  19. });

或者

  1. mDrawerToggle = new ActionBarDrawerToggle(
  2. this, /* host Activity */
  3. mDrawerLayout, /* DrawerLayout object */
  4. R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
  5. R.string.drawer_open, /* "open drawer" description for accessibility */
  6. R.string.drawer_close /* "close drawer" description for accessibility */
  7. ) {
  8. public void onDrawerClosed(View view) {
  9. getActionBar().setTitle(mTitle);
  10. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
  11. }
  12. public void onDrawerOpened(View drawerView) {
  13. getActionBar().setTitle(mDrawerTitle);
  14. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
  15. }
  16. };
  17. mDrawerLayout.setDrawerListener(mDrawerToggle);

五.新增滑动偏移效果

  1. ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
  2. this, drawerLayout, R.string.home_drawer_open, R.string.home_drawer_close) {
  3. @Override
  4. public void onDrawerSlide(View drawerView, float slideOffset) {
  5. //可以重新侧滑方法,该方法实现侧滑动画,整个布局移动效果
  6. //获取mDrawerLayout中的第一个子布局,也就是布局中的RelativeLayout
  7. //获取抽屉的view
  8. View mContent = drawerLayout.getChildAt(0);
  9. float scale = 1 - slideOffset;
  10. float endScale = 0.8f + scale * 0.2f;
  11. float startScale = 1 - 0.3f * scale;
  12. //设置左边菜单滑动后的占据屏幕大小
  13. drawerView.setScaleX(startScale);
  14. drawerView.setScaleY(startScale);
  15. //设置菜单透明度
  16. drawerView.setAlpha(0.6f + 0.4f * (1 - scale));
  17. //设置内容界面水平和垂直方向偏转量
  18. //在滑动时内容界面的宽度为 屏幕宽度减去菜单界面所占宽度
  19. mContent.setTranslationX(drawerView.getMeasuredWidth() * (1 - scale));
  20. //设置内容界面操作无效(比如有button就会点击无效)
  21. mContent.invalidate();
  22. //设置右边菜单滑动后的占据屏幕大小
  23. mContent.setScaleX(endScale);
  24. mContent.setScaleY(endScale);
  25. }
  26. };
  27. toggle.syncState();
  28. drawerLayout.addDrawerListener(toggle);

问题解决

解决DrawerLayout抽屉实现不能点击后面的控件

 

 

 

 

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/279484
推荐阅读
相关标签
  

闽ICP备14008679号