先看效果圖:
![
0}`JV5)$1762$8DF3K@SPDR.png
]6ZLN7KJ6QO.png](http://upload-images.jianshu.io/upload_images/2787812-3b2f620b063bbf0b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
drawerLayout是Support Library包中實(shí)現(xiàn)了側(cè)滑菜單效果的控件,使用起來(lái)非常的簡(jiǎn)單。
1、概述
drawerLayout其實(shí)是一個(gè)布局控件,跟LinearLayout等控件是一樣,但是drawerLayout帶有滑動(dòng)的功能。只要按照drawerLayout的規(guī)定布局方式寫完布局,就能有側(cè)滑的效果。如下:
<!-- android:clickable="true"表示側(cè)滑界面可以被點(diǎn)擊(當(dāng)側(cè)滑打開時(shí),攔截頻幕的點(diǎn)擊事件) -->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:clickable="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Content 內(nèi)容-->
<FrameLayout
android:id="@+id/content_frame_left"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Sliding Left 左邊 -->
<!--<FrameLayout
android:id="@+id/sliding_frame"
android:layout_width="200dp"
android:layout_height="match_parent" />-->
<!-- Sliding Right 右邊 -->
<FrameLayout
android:id="@+id/sliding_frame"
android:layout_width="200dp"
android:layout_height="match_parent" />
</android.support.v4.widget.DrawerLayout>
寫完布局,然后在activity中初始化,根據(jù)自己的需求替換內(nèi)容布局和側(cè)滑布局(不一定用framLayout,可以使用任何其他的布局):
getSupportFragmentManager().beginTransaction().replace(R.id.fram_context, new ContentFragment()).commit();
getSupportFragmentManager().beginTransaction().replace(R.id.fram_sliding, new SlidingFragment()).commit();
// 設(shè)置分割線已經(jīng)滑動(dòng)方向
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,GravityCompat.START);
// 禁止手勢(shì)滑動(dòng)(使用開關(guān)控制)
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
// 添加DrawerListener監(jiān)聽器
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
// 抽屜改變時(shí)使用
View mContent = mDrawerLayout.getChildAt(0);
/*
* 當(dāng)菜單欄滑出時(shí),內(nèi)容界面隨滑動(dòng)方向平移(模擬SlidingMenu效果)
* ViewHelper為 nineoldandroids.jar中的工具類
*/
ViewHelper.setTranslationX(mContent,-fram_sliding.getMeasuredWidth() * slideOffset);
}
@Override
public void onDrawerOpened(View drawerView) {
// 打開抽側(cè)邊欄
LogUtil.d("DrawerLayout is opened");
}
@Override
public void onDrawerClosed(View drawerView) {
// 關(guān)閉側(cè)邊欄
LogUtil.d("DrawerLayout is closed");
}
@Override
public void onDrawerStateChanged(int newState) {
// 改變側(cè)邊欄的狀態(tài)
LogUtil.d("狀態(tài)改變"+newState);
}
});
}
這里禁止了手勢(shì)滑動(dòng)打開關(guān)閉側(cè)邊欄,使用的是按鈕監(jiān)聽控制:
functionImg.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (fram_sliding.isShown()) {
//如果側(cè)邊欄處于顯示狀態(tài),關(guān)閉側(cè)邊欄,否則打開側(cè)邊欄
mDrawerLayout.closeDrawer(fram_sliding);
}else {
mDrawerLayout.openDrawer(fram_sliding);
}
}
});
這里只實(shí)現(xiàn)了右邊菜單欄,由于DrawerLayout側(cè)邊欄打開時(shí),content布局不會(huì)隨其平移,為了實(shí)現(xiàn)SlidingMenu的效果,加入了nineoldandroids.jar,使用ViewHelper來(lái)平移content布局。