Android 侧边栏

原创 2016年08月31日 17:49:18

简介

侧边栏,又叫侧滑菜单,又叫抽屉菜单,一般用于导航功能,侧边滑入或者从标题栏导航图标进入。跟据google设计建议,左侧边栏一般用于app导航,右侧边栏用于操作当前页面内容。
侧边栏由两个部分组成: 布局(DrawerLayout)和侧边栏视图(DrawerView)

布局

Android提供的布局是: android.support.v4.widget.DrawerLayout

布局文件如下:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 其他界面 -->
    </RelativeLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"
        />
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"
        />

</android.support.v4.widget.DrawerLayout>

DrawerLayout只是一个布局,用于帮助显示/隐藏导航菜单(DrawerView),它是通过android:layout_gravity属性来识别导航菜单的,在上面的布局中,navigationView设置了属性android:layout_gravity=”start”表示这个view是左边的导航菜单,同样navigationView2设置了属性android:layout_gravity=”end”表示这是右边的导航菜单。
值得注意的是,只有屏幕垂直边才有导航菜单,而且每条边最多能有一个,如果你设置了属性android:layout_gravity=”top”,应用在启动后会崩溃。

值得注意的是,内容布局必须放在DrawerLayout中第一个位置,width和height属性都设置为match_parent,并且不能有layout_gravity属性,不然应用会崩溃:

To use a DrawerLayout, position your primary content view as the first child with width and height of match_parent and no layout_gravity>. Add drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly use match_parent for height with a fixed width.

布局提供的功能

DrawerLayou主要功能:
1.包含drawerView到界面
2.监听drawerView的打开、关闭、滑动事件:
函数:

//Adds the specified listener to the list of listeners that will be notified of drawer events.
addDrawerListener(DrawerLayout.DrawerListener listener)

DrawerListener 接口如下:

//Called when a drawer has settled in a completely closed state.
abstract void   onDrawerClosed(View drawerView)

//Called when a drawer has settled in a completely open state.
abstract void   onDrawerOpened(View drawerView)

//Called when a drawer's position changes.
abstract void   onDrawerSlide(View drawerView, float slideOffset)

//Called when the drawer motion state changes.
abstract void   onDrawerStateChanged(int newState)

可以使用SimpleDrawerListener/ActionBarDrawerToggle只实现部分事件的监听。

3.响应界面操作,实现DrawerView的显示和隐藏

closeDrawer(View drawerView)//Close the specified drawer view by animating it into view.
closeDrawer(int gravity) //Close the specified drawer by animating it out of view.
closeDrawer(View drawerView, boolean animate)//Close the specified drawer view.
closeDrawer(int gravity, boolean animate)//Close the specified drawer.
closeDrawers()//Close all currently open drawer views by animating them out of view.

openDrawer(View drawerView)//Open the specified drawer view by animating it into view.
openDrawer(int gravity)//Open the specified drawer by animating it out of view.
openDrawer(int gravity, boolean animate)//Open the specified drawer.
openDrawer(View drawerView, boolean animate)//Open the specified drawer view.

从上面可以看出,drawerlayout使用drawerView或者gravity来标识一个drawerView.

联合toolbar使用

主要是在toolbar的最左侧有一个导航图标,可以实现点击导航图标直接打开侧边栏。
方式一:

toolbar.setNavigationIcon(android.R.drawable.ic_menu);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        showNavigationView();//调用DrawerLayout.openDrawer打开侧边栏
    }
});

方式二:
由于方式一没有动画,而且需要自己找一个图标,所以有了方式二

protected void onCreate(Bundle savedInstanceState) {
    //...
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    mDrawerLayoutView= (DrawerLayout) findViewById(R.id.drawer_layout);
    mActionBarDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayoutView,toolbar,R.string.app_name,R.string.app_name);
    mDrawerLayoutView.addDrawerListener(mActionBarDrawerToggle);
}
@Override
protected void onPostCreate(@Nullable Bundle savedInstanceState) {
   super.onPostCreate(savedInstanceState);
   mActionBarDrawerToggle.syncState();
}

DrawerView

可以使用任何自定义布局作为侧边栏内容,比如使用一个ListView来做菜单。
比较方便地是使用android.support.design.widget.NavigationView

参考:
Creating a Navigation Drawer
Material DesignDrawerLayout的旋转箭头的实现方式

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 侧边触摸式导航栏

利用一个自定义View ,和其中的dispatchTouchEvent 拦截触摸事件实现 SideBar.java package xyz.slideviewgettext; import and...
  • uyy203
  • uyy203
  • 2017年02月07日 17:30
  • 526

android实现侧边导航栏

1.新建项目时将最低jdk版本调到14,这是为了防止support-v7这个东西出现,这个东西出现真是祸害无穷 2.新建完项目,找到android-support-v4.jar这个文件,导入到lib...
  • Mr_Pang
  • Mr_Pang
  • 2015年11月20日 22:08
  • 1996

Android 侧边栏NavigationView与toolbar

最近做的一个项目,使用了侧边栏,按着官网的教程,使用的DrawerLayout,然后也用到了actionbar,然后显示效果如下: (该之前的图懒得还原了。。这个是示意图)但是我发现Google...
  • lqc1992
  • lqc1992
  • 2016年06月13日 20:20
  • 13120

Android开发--滑动侧边栏的实现

在Android应用开发中,滑动侧边栏经常使用,今天我也试着自己进行了一个简单的实践,虽然功能还不是很强大,但是可以保留下来为以后的开发使用,有需要时在进行简单的修改。实现一个滑动侧边栏思路也很简单:...
  • smbroe
  • smbroe
  • 2014年12月29日 10:35
  • 1958

Android学习之基于DrawerLayout的侧边栏实现

Android基于DrawerLayout的侧边栏实现
  • u012527802
  • u012527802
  • 2017年07月14日 11:15
  • 1651

Android开发—Navigation Drawer(侧边栏菜单实现)

学习来源:Navigation Draw描述: http://developer.android.com/design/patterns/navigation-drawer.html         ...
  • very_caiing
  • very_caiing
  • 2014年12月10日 22:37
  • 31281

Android侧边栏实现

  • 2015年02月16日 13:36
  • 1.86MB
  • 下载

Android自定义控件--A~Z列表侧边栏索引控件及相关开源实现源码分析

App列表快速定位和筛选,如微信联系人索引。 相关开源库: woozzu/IndexableListView@[Github] ...
  • wbwjx
  • wbwjx
  • 2015年09月26日 23:26
  • 1304

android DrawerLayout 侧边栏实现

现在实现侧边栏比较简单了,官方提供的DrawerLayout可以很方便实现。 主要实现方法是:用DrawerLayout 作为界面根控件。在DrawerLayout里面第一个View为当前界面主内容...
  • jifashihan
  • jifashihan
  • 2016年01月18日 11:20
  • 4848

Android关于侧边栏的简单使用(drawerLayout,navigationview,动态添加menu)

目前市面上大部分app都有使用侧边栏,假如的app还没有该功能,该让你的产品经理加班了哦。。 一、侧边栏一般包括header和menu,header一般包括背景图、用户名等一些东东,切图如下 下面...
  • Leven_Martin
  • Leven_Martin
  • 2017年03月23日 17:24
  • 4442
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 侧边栏
举报原因:
原因补充:

(最多只允许输入30个字)