使用SlidingMenu和DrawerLayout分别实现左右侧边栏(烟台杰瑞教育Android培训部原创).docx

烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 使用SlidingMenu和DrawerLayout分别实现左右侧边栏一、问题描述侧边栏是Android应用中十分常见的界面效果，可随主屏在左侧或右侧联动，是特别适应手机等小屏幕特性的典型界面设计方案之一，常用作应用的操作菜单，如图所示实现侧边栏可以使用第三方组件slidingmenu实现和Google官方提供的滑动抽屉组件DrawerLayout实现，下面就分别使用这两种方法实现左右滑动的侧边栏二、先使用之前讲过的ActionBar制作标题栏这里只贴出代码，相关知识请查阅Android典型界面设计(4)使用ActionBar+Fragment实现tab切换protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initActionBar(); private void initActionBar() actionBar=super.getActionBar(); actionBar.show(); actionBar.setDisplayShowHomeEnabled(true); actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setHomeAsUpIndicator(R._btn); actionBar.setDisplayShowCustomEnabled(true); TextView tvTitle=new TextView(this); tvTitle.setText(主 页); tvTitle.setTextColor(Color.WHITE); tvTitle.setTextSize(18); tvTitle.setGravity(Gravity.CENTER); LayoutParams params=new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT); tvTitle.setLayoutParams(params); actionBar.setCustomView(tvTitle); ActionBar样式： #218FCC 150dip android:color/transparent 20dip style/actionbar_style菜单：（右侧头像按钮） 三、使用slidingmenu实现private SlidingMenu slidingMenu; private void initSlidingMenu() slidingMenu=new SlidingMenu(this);/创建侧边栏 /设置菜单模式，LEFT(仅左侧边栏) RIGHT(仅右侧边栏) /LEFT_RIGHT(左右侧边栏) slidingMenu.setMode(SlidingMenu.LEFT_RIGHT); slidingMenu.setMenu(R.layout.menu_left_layout);/设置第一个（左）侧边栏 /设置第二个(右)侧边栏,若设置LEFT_RIGHT模式使用该方法设置右侧边栏 slidingMenu.setSecondaryMenu(R.layout.navigation_layout); /将侧边栏粘连到Activity上 slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT); /设置侧边栏阴影大小 slidingMenu.setShadowWidth(10); /设置偏离距离 slidingMenu.setBehindOffsetRes(R.dimen.sliding_menu_offset); /全屏模式，全屏滑动都可打开 slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); 在onCreate()中调用initSlidingMenu()方法实现SlidingMenu的构建protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initActionBar();initSlidingMenu(); 到此滑动左右屏幕就出现侧边栏了，下面实现单击Actionbar两端按钮实现左右侧边栏的显示控制，代码如下：Override public boolean onOptionsItemSelected(MenuItem item) switch(item.getItemId() case android.R.id.home:/左侧home区域 slidingMenu.toggle();/交替显示或隐藏侧边栏 break; case R.id.usersetting:/右侧按钮菜单 if(!slidingMenu.isSecondaryMenuShowing() slidingMenu.showSecondaryMenu();/显示右侧栏 else slidingMenu.toggle();/通过toggle方法隐藏右侧边栏 break; return super.onOptionsItemSelected(item); Ok完成，至于左右侧边栏的布局文件menu_left_layout 和navigation_layout，大家可自己简单设计一下或见源代码四、使用drawerLayout实现drawerLayout的使用也很方便，drawerLayout其实是一个布局控件，跟LinearLayout等控件是一种东西，但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局，就能有侧滑的效果。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏。有两点要注意：主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单，谁是主内容区；侧滑菜单的部分通过设置layout_gravity属性，决定侧滑菜单是在左边还是右边 ，layout_gravity属性为start表示左侧边栏，end表示右侧边栏1、Activity的布局如下： menu_left_layout 和navigation_layout 为左右侧边栏的布局文件2、Activiy代码public class MainActivity extends Activity private DrawerLayout drawerLayout; private ActionBarDrawerToggle toggle; private ActionBar actionBar; protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initActionBar(); initDrawerLayout(); private void initDrawerLayout() drawerLayout=(DrawerLayout)super.findViewById(R.id.drawer_layout); drawerLayout.setScrimColor(Color.TRANSPARENT); toggle=new ActionBarDrawerToggle(this,drawerLayout, R.drawable.back_move_details_normal,R.string.drawer_open ,R.string.drawer_close) public void onDrawerClosed(View drawerView) super.onDrawerClosed(drawerView); public void onDrawerOpened(View drawerView) super.onDrawerOpened(drawerView); ; drawerLayout.setDrawerListener(toggle); private void toggleLeftSliding()/该方法控制左侧边栏的显示和隐藏 if(drawerLayout.isDrawerOpen(Gravity.START) drawerLayout.closeDrawer(Gravity.START); else drawerLayout.openDrawer(Gravity.START); private void toggleRightSliding()/该方法控制右侧边栏的显示和隐藏 if(drawerLayout.isDrawerOpen(Gravity.END) drawerLayout.closeDrawer(Gravity.END); else drawerLayout.openDrawer(Gravity.END); Override public boolean onOptionsItemSelected(MenuItem item) switch(item.getItemId() case andr