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关于侧边栏的简单使用(drawerLayout,navigationview,动态添加menu)

目前市面上大部分app都有使用侧边栏,假如的app还没有该功能,该让你的产品经理加班了哦。。 一、侧边栏一般包括header和menu,header一般包括背景图、用户名等一些东东,切图如下 下面...

Android 侧边栏NavigationView与toolbar

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

Android UI-SlidingMenu侧滑菜单效果

Android UI-SlidingMenu侧滑菜单效果 本篇博客给大家分享一个效果比较好的侧滑菜单的Demo,实现点击左边菜单切换Fragment。 效果如下: 主Activity代码:pac...
  • wwj_748
  • wwj_748
  • 2014年11月21日 18:42
  • 55265

自定义控件:SlidingMenu,侧边栏,侧滑菜单

SlidingMenu 自定义控件之侧边栏项目概述观察如图2-4 的完整项目中的效果界面,点击标题栏的左上角会弹出侧边栏,再次点击时会关闭侧边栏,这种效果在很多手机应用中使用,因此,我们有必要学会如何...

Android Dribbble风格边栏菜单实现

随着IOS7的推出,大量移动应用也开始进行了重新设计.,开始应用大量的扁平化.可以说现在IOS和Android的风格设计方面确实是在逐渐地靠拢. ReisdeMenu 创意灵感来自于Dribbble(...
  • t12x3456
  • t12x3456
  • 2013年12月17日 09:43
  • 14849

android 滑动侧边栏 SlideMenu

还是先看效果图      支持点击按钮打开侧边栏,同时支持手势打开或是关闭侧边栏。 选择继承ViewGroup来实现。 首先是考虑子view的布局,其实就是怎样重写onLayout方法。 1...

Android 双侧侧滑菜单(主界面和菜单都会滑动)

最近公司刚开始做一个项目视频分享,主界面菜单需要实现两侧都是侧滑菜单, 现在我想实现效果如360手机助手,下面菜单也会滚动。github上有开源项目SlidingMenu,但是导入时会报错,主要是...

Android侧滑显示菜单栏效果的实现

本文实现AndroidQQ5.0侧滑效果,现在QQ8.8已经不用这种效果了,但是现在最新的酷狗使用的是这种效果。...

android 侧边栏菜单 中移动整个activity包括动作栏是怎么做到的

关于侧边栏滑动弹出 我发现qq是监听整个屏幕,slidingMenu只是监听了内容页面。 最主要的事我想知道移动整个窗口是怎么实现的, 看了slidingmenu的源码没看懂。。。尴尬; 求大...

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

学习来源:Navigation Draw描述: http://developer.android.com/design/patterns/navigation-drawer.html         ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 侧边栏
举报原因:
原因补充:

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