你的位置:首页 > 操作系统

[操作系统]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.drawable.com_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样式:

<style name="actionbar_style" parent="@android:style/Widget.Holo.Light.ActionBar">    <item name="android:background">#218FCC</item>      <item name="android:actionBarSize">150dip</item><!—隐藏ActionBar 的ICON图标-- >      <item name="android:icon">@android:color/transparent</item>      <item name="android:itemPadding">20dip</item>   </style><!—activity使用此样式--><style name="AppTheme" parent="AppBaseTheme">     <item name="android:actionBarStyle">@style/actionbar_style</item></style>

菜单:(右侧头像按钮)

<menu ="http://schemas.android.com/apk/res/android" >  <item    android:id="@+id/usersetting"    android:orderInCategory="100"    android:showAsAction="ifRoom"    android:icon="@drawable/biz_tie_user_avater_default_common"    /></menu>

三、使用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的布局如下:

<??><android.support.v4.widget.DrawerLayout   ="http://schemas.android.com/apk/res/android"  android:id="@+id/drawer_layout"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical" >    <TextView      android:layout_width="match_parent"      android:layout_height="match_parent"      android:gravity="center"      android:text="这是主界面" />  </LinearLayout>  <include layout="@layout/menu_left_layout"     android:layout_width="200dp"  android:layout_height="match_parent" android:layout_gravity="start"    />  <include    android:id="@+id/right_sliding"     android:layout_width="240dp"  android:layout_height="match_parent"     layout="@layout/navigation_layout"    android:layout_gravity="end"    /></android.support.v4.widget.DrawerLayout>  

  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 android.R.id.home:      toggleLeftSliding();      break;    case R.id.usersetting:      toggleRightSliding();      break;    }          return super.onOptionsItemSelected(item);  }}}

OK完成,initActionBar()方法代码和上例相同,这里不再附加

 

  想要了解更多内容的小伙伴,可以点击查看源码,亲自运行测试。

  疑问咨询或技术交流,请加入官方QQ群:JRedu技术交流 (452379712)

 

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。