Android Material Design控件之DrawerLayout

Android Material Design Android官方控件学习目录

Material Design控件之DrawerLayout

• extends ViewGroup
• drawerLayout 是一个跟LinearLayout等控件一样布局控件，只是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局，就能有侧滑的效果。

导入support-v4库,一般创建项目就已经依赖v4库

'com.android.support:support-v4:26.1.0'

简单使用

1.xml

<android.support.v4.widget.DrawerLayout
		android:id="@+id/DrawerLayout"
		android:layout_width="0dp"
		android:layout_height="0dp"
		android:layout_marginBottom="0dp"
		android:layout_marginLeft="0dp"
		android:layout_marginRight="0dp"
		android:layout_marginTop="0dp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintHorizontal_bias="0.0"
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent"
		app:layout_constraintTop_toBottomOf="@+id/toolbar">

		<!--第一个，显示的布局-->
		<android.support.design.widget.CoordinatorLayout
			android:id="@+id/main_content"
			android:layout_width="match_parent"
			android:layout_height="match_parent">

			<android.support.design.widget.FloatingActionButton
				android:id="@+id/flb_nothing"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_gravity="bottom|right"
				android:layout_margin="12dp"
			/>


		</android.support.design.widget.CoordinatorLayout>


		<!--第二个，不显示的抽屉布局-->
		<LinearLayout
			android:id="@+id/ll_drawer"
			android:layout_width="200dp"
			android:layout_height="match_parent"
			android:layout_gravity="start|left"
			android:background="#cdcdcd"
		    android:orientation="vertical"
		>
			<TextView
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:text="DrawerLayout抽屉效果"
			/>
			<TextView
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:text="文本"
			/>
			<Button
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:text="按钮"/>
		</LinearLayout>


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

• 类似于Framelayout ,但规定有两个子布局,类型任意
• 第一个，显示的布局,这里是一个CoordinatorLayout
• 第二个 , 不显示的抽屉布局,这里是一个LinearLayout
• 抽屉布局必须设置layout_gravity属性 ,layout_gravity=“start”
• start或者left:左侧滑入抽屉, end或者right:右侧滑入抽屉
• 抽屉布局的宽度不建议超过320dp
• 从最侧边滑动才有效

2.addDrawerListener

        mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {

            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });

• DrawerListener监听DrawerLayout抽屉滑动状态
• SimpleDrawerListener是DrawerListener的子类,不用重写四个方法

3.openDrawer

openDrawer(View drawerView)
openDrawer(View drawerView, boolean animate)  
openDrawer(@EdgeGravity int gravity)
openDrawer(@EdgeGravity int gravity, boolean animate)
mDrawerLayout.openDrawer(GravityCompat.START);

• gravity取值 Gravity.LEFT;GravityCompat.START:左侧滑入
• gravity取值Gravity.Right;GravityCompat.END:右侧滑入
• Gravity.LEFT=3
• Gravity.Right=5
• GravityCompat.START=RELATIVE_LAYOUT_DIRECTION | Gravity.LEFT
• GravityCompat.END = RELATIVE_LAYOUT_DIRECTION | Gravity.RIGHT
• GravityCompat.RELATIVE_LAYOUT_DIRECTION = 0x00800000

4. openDrawer

closeDrawer(View drawerView)
closeDrawer(View drawerView, boolean animate)  
closeDrawer(@EdgeGravity int gravity)
closeDrawer(@EdgeGravity int gravity, boolean animate) 

5.与toolbar交互

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.DrawerLayout);
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                mToolbar,
                R.string.drawer_open,  /* "open drawer" description for accessibility */
                R.string.drawer_close  /* "close drawer" description for accessibility */
        ) {
            public void onDrawerClosed(View view) {
                getSupportActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
            public void onDrawerOpened(View drawerView) {
                getSupportActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };
        mDrawerLayout.addDrawerListener(mDrawerToggle);
  

 @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // 需要将ActionDrawerToggle与DrawerLayout的状态同步
        // 将ActionBarDrawerToggle中的drawer图标，设置为ActionBar中的Home-Button的Icon
        mDrawerToggle.syncState();
    }

• ActionBarDrawerToggle实现了DrawerListener，所以他能做DrawerListener可以做的任何事情，同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来，当展开与隐藏的时候图标有一定的平移效果，点击图标的时候还能展开或者隐藏菜单。
• onPostCreate() mDrawerToggle.syncState();将ActionDrawerToggle与DrawerLayout的状态同步
• new ActionBarDrawerToggle()之后mToolbar不能设置setNavigationOnClickListener,不然会失效
• 因为在ActionBarDrawerToggle构造方法里对toolbar做了一件事

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mDrawerIndicatorEnabled) {
                        toggle();
                    } else if (mToolbarNavigationClickListener != null) {
                        mToolbarNavigationClickListener.onClick(v);
                    }
                }
});

6.自定义toolbar Home键触发drawer

• 当然,你可以不使用ActionBarDrawerToggle,图标变化效果就得自己做了.

mToolbar.setNavigationOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if (drawerLayout.isDrawerOpen(Gravity.RIGHT)) {
                    drawerLayout.closeDrawer(Gravity.RIGHT);
                } else {
                    drawerLayout.openDrawer(Gravity.RIGHT);
                }
            }
});

源码地址：https://github.com/LinweiJ/MaterialDesignWidget