奋斗

学无止境

Android 侧边栏

简介

侧边栏,又叫侧滑菜单,又叫抽屉菜单,一般用于导航功能,侧边滑入或者从标题栏导航图标进入。跟据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的旋转箭头的实现方式

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/crazyman2010/article/details/52383412
文章标签: android
个人分类: Android
想对作者说点什么? 我来说一句

android 侧边栏实现

2013年07月08日 79KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭