Android典型界面设计(5)——使用SlidingMenu和DrawerLayout分别实现左右侧边栏
来自: http://www.cnblogs.com/jerehedu/p/4718043.html
侧边栏是Android应用中十分常见的界面效果,可随主屏在左侧或右侧联动,是特别适应手机等小屏幕特性的典型界面设计方案之一,常用作应用的操作菜单,如图所示
实现侧边栏可以使用第三方组件slidingmenu实现和Google官方提供的滑动抽屉组件DrawerLayout实现,下面就分别使用这两种方法实现左右滑动的侧边栏
这里只贴出代码,相关知识请查阅 《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 xmlns:android="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>
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其实是一个布局控件,跟LinearLayout等控件是一种东西,但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果。drawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏。
有两点要注意:主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单,谁是主内容区;侧滑菜单的部分通过设置 layout_gravity 属性,决定侧滑菜单是在左边还是右边 , layout_gravity 属性为start表示左侧边栏,end表示右侧边栏
1、Activity的布局如下:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="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()方法代码和上例相同,这里不再附加
想要了解更多内容的小伙伴,可以点击 查看源码 ,亲自运行测试。
</div>