码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!