码迷，mamicode.com
首页 > 其他好文 > 详细

DrawerLayout

时间：2016-06-19 10:08:53      阅读：254      评论：0      收藏：0      [点我收藏+]

标签：

 
 
一、概述
 
    DrawerLayout是官方提供的侧滑菜单，相比SliddingMenu，它更加轻量级。默认情况下，DrawerLayout可以设置左侧或者右侧滑出菜单。如下，
 

xml布局：

 

 
  1. <!-- 
  2.  
  3. <!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->  
  4. <com.sys.app.uikit.drawerlayoutplus.DrawerLayoutPlus xmlns:android="http://schemas.android.com/apk/res/android"  
  5. android:id="@+id/drawer_layout"  
  6. android:layout_width= "match_parent"  
  7. android:layout_height= "match_parent" >  
  8.     <!--  
  9.          As the main content view, the view below consumes the entire  
  10.          space available using match_parent in both dimensions.  
  11.     -->  
  12. <FrameLayout  
  13. android:id="@+id/content_frame"  
  14. android:layout_width="match_parent"  
  15. android:layout_height="match_parent" />  
  16.     <!--  
  17. android:layout_gravity="start" tells DrawerLayout to treat  
  18.          this as a sliding drawer on the left side for left-to-right  
  19.          languages and on the right side for right-to-left languages.  
  20.          The drawer is given a fixed width in dp and extends the full height of  
  21.          the container. A solid background is used for contrast  
  22.          with the content view.  
  23.     -->  
  24. <!-- Left drawer -->  
  25. <ListView  
  26. android:id="@+id/left_drawer"  
  27. android:layout_width="240dp"  
  28. android:layout_height="match_parent"  
  29. android:layout_gravity="left"  
  30. android:background="#111"  
  31. android:choiceMode="singleChoice"  
  32. android:divider="@android:color/transparent"  
  33. android:dividerHeight="0dp" />  
  34. <!-- Right drawer -->  
  35. <ListView  
  36. android:id="@+id/right_drawer"  
  37. android:layout_width="match_parent"  
  38. android:layout_height="match_parent"  
  39. android:layout_gravity="right"  
  40. android:choiceMode="singleChoice" />  
  41. </com.sys.app.uikit.drawerlayoutplus.DrawerLayoutPlus>  
Activity代码：
[html] view plain copy
 技术分享技术分享
  1. package com.sys.app.uikit.drawerlayoutplus;  
  2.   
  3. import java.util.Locale;  
  4. import android.app.Activity;  
  5. import android.app.Fragment;  
  6. import android.app.FragmentManager;  
  7. import android.app.SearchManager;  
  8. import android.content.Intent;  
  9. import android.content.res.Configuration;  
  10. import android.os.Bundle;  
  11. import android.support.v4.view.GravityCompat;  
  12. import android.view.LayoutInflater;  
  13. import android.view.Menu;  
  14. import android.view.MenuInflater;  
  15. import android.view.MenuItem;  
  16. import android.view.View;  
  17. import android.view.ViewGroup;  
  18. import android.widget.AdapterView;  
  19. import android.widget.ArrayAdapter;  
  20. import android.widget.ImageView;  
  21. import android.widget.ListView;  
  22. import android.widget.Toast;  
  23.   
  24.   
  25. public class MainActivity extends Activity {  
  26.   
  27.      private DrawerLayoutPlus mDrawerLayout;  
  28.      private ListView mLeftDrawerList, mRightDrawerList;  
  29.      private ActionBarDrawerToggle mDrawerToggle;  
  30.   
  31.      private CharSequence mDrawerTitle;  
  32.      private CharSequence mTitle;  
  33.      private String[] mPlanetTitles;  
  34.   
  35.      @Override  
  36.      protected void onCreate(Bundle savedInstanceState) {  
  37.           super.onCreate(savedInstanceState);  
  38.           setContentView(R.layout.activity_main);  
  39.   
  40.           mTitle = mDrawerTitle = getTitle();  
  41.           mPlanetTitles = getResources().getStringArray(R.array.planets_array);  
  42.           mDrawerLayout = (DrawerLayoutPlus) findViewById(R.id.drawer_layout);  
  43.           mLeftDrawerList = (ListView) findViewById(R.id.left_drawer);  
  44.           mRightDrawerList = (ListView) findViewById(R.id.right_drawer);  
  45.           // set a custom shadow that overlays the main content when the drawer  
  46.           // opens  
  47.           mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);  
  48.           // set up the drawer‘s list view with items and click listener  
  49.           mLeftDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles));  
  50.           mLeftDrawerList.setOnItemClickListener(new DrawerItemClickListener());  
  51.           mRightDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles));  
  52.           mRightDrawerList.setOnItemClickListener(new DrawerItemClickListener());  
  53.   
  54.           // enable ActionBar app icon to behave as action to toggle nav drawer  
  55.           getActionBar().setDisplayHomeAsUpEnabled(true);  
  56.           getActionBar().setHomeButtonEnabled(true);  
  57.   
  58.           // ActionBarDrawerToggle ties together the the proper interactions  
  59.           // between the sliding drawer and the action bar app icon  
  60.           mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity */  
  61.           mDrawerLayout, /* DrawerLayout object */  
  62.           R.drawable.ic_drawer, /* nav drawer image to replace ‘Up‘ caret */  
  63.           R.string.drawer_open, /* "open drawer" description for accessibility */  
  64.           R.string.drawer_close /* "close drawer" description for accessibility */  
  65.           ) {  
  66.                public void onDrawerClosed(View view) {  
  67.                     getActionBar().setTitle(mTitle);  
  68.                     invalidateOptionsMenu(); // creates call to  
  69.                                                        // onPrepareOptionsMenu()  
  70.                }  
  71.   
  72.                public void onDrawerOpened(View drawerView) {  
  73.                     getActionBar().setTitle(mDrawerTitle);  
  74.                     invalidateOptionsMenu(); // creates call to  
  75.                                                        // onPrepareOptionsMenu()  
  76.                }  
  77.           };  
  78.   
  79.           mDrawerLayout.setDrawerListener(mDrawerToggle);  
  80.   
  81.           if (savedInstanceState == null) {  
  82.                selectItem(0);  
  83.           }  
  84.      }  
  85.   
  86.      @Override  
  87.      public boolean onCreateOptionsMenu(Menu menu) {  
  88.           MenuInflater inflater = getMenuInflater();  
  89.           inflater.inflate(R.menu.main, menu);  
  90.           return super.onCreateOptionsMenu(menu);  
  91.      }  
  92.   
  93.      /* Called whenever we call invalidateOptionsMenu() */  
  94.      @Override  
  95.      public boolean onPrepareOptionsMenu(Menu menu) {  
  96.           // If the nav drawer is open, hide action items related to the content  
  97.           // view  
  98.           boolean drawerLeftOpen = mDrawerLayout.isDrawerOpen(mLeftDrawerList);  
  99.           boolean drawerRightOpen = mDrawerLayout.isDrawerOpen(mRightDrawerList);  
  100.           menu.findItem(R.id.action_websearch).setVisible(!(drawerLeftOpen && drawerRightOpen));  
  101.           return super.onPrepareOptionsMenu(menu);  
  102.      }  
  103.   
  104.      @Override  
  105.      public boolean onOptionsItemSelected(MenuItem item) {  
  106.           // The action bar home/up action should open or close the drawer.  
  107.           // ActionBarDrawerToggle will take care of this.  
  108.           if (mDrawerToggle.onOptionsItemSelected(item)) {  
  109.                return true;  
  110.           }  
  111.           // Handle action buttons  
  112.           switch (item.getItemId()) {  
  113.           case R.id.action_websearch:  
  114.                // create intent to perform web search for this planet  
  115.                Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);  
  116.                intent.putExtra(SearchManager.QUERY, getActionBar().getTitle());  
  117.                // catch event that there‘s no activity to handle intent  
  118.                if (intent.resolveActivity(getPackageManager()) != null) {  
  119.                     startActivity(intent);  
  120.                } else {  
  121.                     Toast.makeText(this, R.string.app_not_available, Toast.LENGTH_LONG).show();  
  122.                }  
  123.                return true;  
  124.           default:  
  125.                return super.onOptionsItemSelected(item);  
  126.           }  
  127.      }  
  128.   
  129.      /* The click listner for ListView in the navigation drawer */  
  130.      private class DrawerItemClickListener implements ListView.OnItemClickListener {  
  131.           @Override  
  132.           public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
  133.                selectItem(position);  
  134.           }  
  135.      }  
  136.   
  137.      private void selectItem(int position) {  
  138.           // update the main content by replacing fragments  
  139.           Fragment fragment = new PlanetFragment();  
  140.           Bundle args = new Bundle();  
  141.           args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);  
  142.           fragment.setArguments(args);  
  143.   
  144.           FragmentManager fragmentManager = getFragmentManager();  
  145.           fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();  
  146.   
  147.           // update selected item and title, then close the drawer  
  148.           mLeftDrawerList.setItemChecked(position, true);  
  149.           mRightDrawerList.setItemChecked(position, true);  
  150.           setTitle(mPlanetTitles[position]);  
  151.           mDrawerLayout.closeDrawer(mLeftDrawerList);  
  152.           mDrawerLayout.closeDrawer(mRightDrawerList);  
  153.      }  
  154.   
  155.      @Override  
  156.      public void setTitle(CharSequence title) {  
  157.           mTitle = title;  
  158.           getActionBar().setTitle(mTitle);  
  159.      }  
  160.   
  161.      /**  
  162.      * When using the ActionBarDrawerToggle, you must call it during  
  163.      * onPostCreate() and onConfigurationChanged()...  
  164.      */  
  165.   
  166.      @Override  
  167.      protected void onPostCreate(Bundle savedInstanceState) {  
  168.           super.onPostCreate(savedInstanceState);  
  169.           // Sync the toggle state after onRestoreInstanceState has occurred.  
  170.           mDrawerToggle.syncState();  
  171.      }  
  172.   
  173.      @Override  
  174.      public void onConfigurationChanged(Configuration newConfig) {  
  175.           super.onConfigurationChanged(newConfig);  
  176.           // Pass any configuration change to the drawer toggls  
  177.           mDrawerToggle.onConfigurationChanged(newConfig);  
  178.      }  
  179.   
  180.      /**  
  181.      * Fragment that appears in the "content_frame", shows a planet  
  182.      */  
  183.      public static class PlanetFragment extends Fragment {  
  184.           public static final String ARG_PLANET_NUMBER = "planet_number";  
  185.   
  186.           public PlanetFragment() {  
  187.                // Empty constructor required for fragment subclasses  
  188.           }  
  189.   
  190.           @Override  
  191.           public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
  192.                View rootView = inflater.inflate(R.layout.fragment_planet, container, false);  
  193.                int i = getArguments().getInt(ARG_PLANET_NUMBER);  
  194.                String planet = getResources().getStringArray(R.array.planets_array)[i];  
  195.   
  196.                int imageId = getResources().getIdentifier(planet.toLowerCase(Locale.getDefault()), "drawable",  
  197.                          getActivity().getPackageName());  
  198.                ((ImageView) rootView.findViewById(R.id.image)).setImageResource(imageId);  
  199.                getActivity().setTitle(planet);  
  200.                return rootView;  
  201.           }  
  202.      }  
  203. }  
效果如图所示：
技术分享技术分享
图-1
  如果换一个需求，是从下面弹出菜单，那是用系统的DrawerLayout是做不到的，不过可以通过修改其源码来达到目的。
 
二、分析
    DrawerLayout作为一个父类容器，可以包含子View，而子View又可以分为内容区域和菜单区域。内容区域占据整个屏幕大小，菜单区域默认在屏幕内侧。DrawerLayout继承于ViewGroup，必然需要重写onLayout()方法，那么在设置子View位置的时候，内容区域默认直接显示出来，菜单区域默认隐藏在屏幕内侧。DrawerLayout的onLayout()代码如下：
[html] view plain copy
 技术分享技术分享
  1. @Override  
  2.      protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  3.            mInLayout = true ;  
  4.            final int width = r - l;  
  5.            final int childCount = getChildCount();  
  6.            for (int i = 0; i < childCount; i++) {  
  7.                final View child = getChildAt(i);  
  8.   
  9.                if (child.getVisibility() == GONE) {  
  10.                     continue;  
  11.               }  
  12.   
  13.                final LayoutParams lp = (LayoutParams) child.getLayoutParams();  
  14.   
  15.                if (isContentView(child)) {  
  16.                    child.layout(lp. leftMargin, lp.topMargin, lp.leftMargin + child.getMeasuredWidth(),  
  17.                              lp. topMargin + child.getMeasuredHeight());  
  18.               } else { // Drawer, if it wasn‘t onMeasure would have thrown an  
  19.                               // exception.  
  20.                     final int childWidth = child.getMeasuredWidth();  
  21.                     final int childHeight = child.getMeasuredHeight();  
  22.                     int childLeft;  
  23.   
  24.                     final float newOffset;  
  25.                     if (checkDrawerViewAbsoluteGravity(child, Gravity.LEFT)) {  
  26.                         childLeft = -childWidth + ( int) (childWidth * lp.onScreen);  
  27.                         newOffset = ( float) (childWidth + childLeft) / childWidth;  
  28.                    } else { // Right; onMeasure checked for us.  
  29.                         childLeft = width - ( int) (childWidth * lp.onScreen);  
  30.                         newOffset = ( float) (width - childLeft) / childWidth;  
  31.                    }  
  32.                  
  33.                     final boolean changeOffset = newOffset != lp.onScreen;  
  34.   
  35.                     final int vgrav = lp.gravity & Gravity.VERTICAL_GRAVITY_MASK ;  
  36.                     switch (vgrav) {  
  37.                     default:  
  38.                     case Gravity.TOP : {  
  39.                         child.layout(childLeft, lp.topMargin, childLeft + childWidth, lp.topMargin + childHeight);  
  40.                          break;  
  41.                    }  
  42.   
  43.                     case Gravity.BOTTOM : {  
  44.                          final int height = b - t;  
  45.                         child.layout(childLeft, height - lp.bottomMargin - child.getMeasuredHeight(), childLeft + childWidth,  
  46.                                   height - lp.bottomMargin);  
  47.                          break;  
  48.                    }  
  49.   
  50.                     case Gravity.CENTER_VERTICAL : {  
  51.                          final int height = b - t;  
  52.                          int childTop = (height - childHeight) / 2;  
  53.   
  54.                          // Offset for margins. If things don‘t fit right because of  
  55.                          // bad measurement before, oh well.  
  56.                          if (childTop < lp.topMargin ) {  
  57.                              childTop = lp. topMargin;  
  58.                         } else if (childTop + childHeight > height - lp.bottomMargin ) {  
  59.                              childTop = height - lp.bottomMargin - childHeight;  
  60.                         }  
  61.                         child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);  
  62.                          break;  
  63.                    }  
  64.                    }  
  65.   
  66.                     if (changeOffset) {  
  67.                         setDrawerViewOffset(child, newOffset);  
  68.                    }  
  69.   
  70.                     final int newVisibility = lp.onScreen > 0 ? VISIBLE : INVISIBLE ;  
  71.                     if (child.getVisibility() != newVisibility) {  
  72.                         child.setVisibility(newVisibility);  
  73.                    }  
  74.               }  
  75.           }  
  76.            mInLayout = false ;  
  77.            mFirstLayout = false ;  
  78.      }  
  在onLayout方法中可以通过参数获取之前测量DrawerLayout的宽度和高度，然后获取DrawerLayout里面子View的个数，通过一个for循环来设置子View的位置。可以看到先是设置内容区域的位置，然后是菜单区域，后者通过设置offset来达到隐藏菜单的目的。所以这个地方是关键，如果想要在屏幕下方弹出菜单，那么就需要修改菜单的显示位置,让它置于屏幕下方。
  菜单View位置更改好，接着是手势操作的部分。在DrawerLayout中，是通过ViewDragHelper这个类来实现View的拖拽。首先它声明了左右菜单的帮助类和回调，
  
[html] view plain copy
 技术分享技术分享
  1. private final ViewDragHelper mLeftDragger ;  
  2.      private final ViewDragHelper mRightDragger ;  
  3.      private final ViewDragCallback mLeftCallback ;  
  4.      private final ViewDragCallback mRightCallback ;  

 以及左右锁和阴影，
[html] view plain copy
 技术分享技术分享
  1. private int mLockModeLeft ;  
  2.      private int mLockModeRight ;  
  3.   
  4.      private Drawable mShadowLeft ;  
  5.      private Drawable mShadowRight ;  
 在构造方法里面初始化了帮助类和回调，

[html] view plain copy
 技术分享技术分享
  1. mLeftCallback = new ViewDragCallback(Gravity.LEFT );  
  2.          mRightCallback = new ViewDragCallback(Gravity.RIGHT );  
  3.   
  4.          mLeftDragger = ViewDragHelper.create( this , TOUCH_SLOP_SENSITIVITY , mLeftCallback );  
  5.          mLeftDragger .setEdgeTrackingEnabled(ViewDragHelper. EDGE_LEFT);  
  6.          mLeftDragger .setMinVelocity(minVel);  
  7.          mLeftCallback .setDragger(mLeftDragger );  
  8.   
  9.          mRightDragger = ViewDragHelper.create( this , TOUCH_SLOP_SENSITIVITY , mRightCallback );  
  10.          mRightDragger .setEdgeTrackingEnabled(ViewDragHelper. EDGE_RIGHT);  
  11.          mRightDragger .setMinVelocity(minVel);  
  12.          mRightCallback .setDragger(mRightDragger );  
 在设置阴影效果，进行一个左右的判断
[html] view plain copy
 技术分享技术分享
  1. public void setDrawerShadow(Drawable shadowDrawable, @EdgeGravity int gravity) {  
  2.           /*  
  3.           * TODO Someone someday might want to set more complex drawables here.  
  4.           * They‘re probably nuts, but we might want to consider registering  
  5.           * callbacks, setting states, etc. properly.  
  6.           */  
  7.   
  8.           final int absGravity = GravityCompat.getAbsoluteGravity(gravity, ViewCompat.getLayoutDirection( this));  
  9.           if ((absGravity & Gravity. LEFT) == Gravity. LEFT) {  
  10.               mShadowLeft = shadowDrawable;  
  11.              invalidate();  
  12.          }  
  13.           if ((absGravity & Gravity. RIGHT) == Gravity.RIGHT ) {  
  14.               mShadowRight = shadowDrawable;  
  15.              invalidate();  
  16.          }  
  17.     }  
  还有菜单锁，
[html] view plain copy
 技术分享技术分享
  1. public void setDrawerLockMode(@LockMode int lockMode) {  
  2.         setDrawerLockMode(lockMode, Gravity. LEFT );  
  3.         setDrawerLockMode(lockMode, Gravity. RIGHT );  
  4.    }  
  也是进行左右的判断，
[html] view plain copy
 技术分享技术分享
  1. public void setDrawerLockMode(@LockMode int lockMode, @EdgeGravity int edgeGravity) {  
  2.            final int absGravity = GravityCompat.getAbsoluteGravity(edgeGravity, ViewCompat.getLayoutDirection( this));  
  3.            if (absGravity == Gravity. LEFT) {  
  4.                mLockModeLeft = lockMode;  
  5.           } else if (absGravity == Gravity. RIGHT) {  
  6.                mLockModeRight = lockMode;  
  7.           }  
  8.            if (lockMode != LOCK_MODE_UNLOCKED) {  
  9.                // Cancel interaction in progress  
  10.                final ViewDragHelper helper = absGravity == Gravity.LEFT ? mLeftDragger : mRightDragger ;  
  11.               helper.cancel();  
  12.           }  
  13.            switch (lockMode) {  
  14.            case LOCK_MODE_LOCKED_OPEN :  
  15.                final View toOpen = findDrawerWithGravity(absGravity);  
  16.                if (toOpen != null) {  
  17.                    openDrawer(toOpen);  
  18.               }  
  19.                break ;  
  20.            case LOCK_MODE_LOCKED_CLOSED :  
  21.                final View toClose = findDrawerWithGravity(absGravity);  
  22.                if (toClose != null) {  
  23.                    closeDrawer(toClose);  
  24.               }  
  25.                break ;  
  26.            // default: do nothing  
  27.           }  
  28.      }  
  不光是上面的方法，DrawerLayout中还有很多方法也都是这样。都是对Gravity的判断，判断是左侧菜单还是右侧，所以如果要改成从底部弹出菜单，那么把相应的值替换为Gravity.BOTTOM即可。当然还要注意在替换的过程中的一些逻辑问题，以免有纰漏。比如offset之前是左右，现在要改成上下，因此数值要重新计算。还有变量的命名等，之前是left或者right，现在改为bottom等等。
  修改后运行效果如下：

技术分享技术分享

 

DrawerLayout

标签：

原文地址：http://www.cnblogs.com/dubo-/p/5597480.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！