Android 侧边栏

最新推荐文章于 2025-03-25 15:51:33 发布

M_O_

最新推荐文章于 2025-03-25 15:51:33 发布

阅读量4.3k

点赞数 1

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/crazyman2010/article/details/52383412

版权

Android 专栏收录该内容

45 篇文章

订阅专栏

简介

侧边栏，又叫侧滑菜单，又叫抽屉菜单，一般用于导航功能，侧边滑入或者从标题栏导航图标进入。跟据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();
}