Android使用 DrawerLayout实现侧滑

DrawerLayout简介

drawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。

之前一直使用SlidingMenu或者自定义控件,现在使用google官方提供的DraeerLayout吧，出乎想象的好用.

布局文件

主要内容的视图(FrameLayout)必须是DrawLayout的第一个子元素,因为导航抽屉是在主要内容视图的上面.

主要内容视图设置为匹配父视图的宽度和高度, 因为它代表了整个界面导航抽屉是隐藏的.抽屉视图(ListView)必须指定其水平重力与android:layout_gravity属性。支持从右到左(RTL)语言,指定值与 “start” 代替 “left”(所以抽屉里出现在布局的右侧当布局是RTL时).

抽屉视图指定其宽度用dp单位和高度匹配父视图。抽屉里的宽度不能超过320 dp, 所以用户总是可以看到主要内容视图的一部分.

这里建议使用Toolbar了,因为可以设置ActionBarDrawerToggel实现联动，实现更有交互性的效果，我这个Demo没有使用Toolbar

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/id_dl_layout" >

    <!-- Main Content View -->
    <FrameLayout android:id="@+id/id_fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>
    <!-- Navigation View -->
    <ListView android:id="@+id/id_lv_navi"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"  
        android:dividerHeight="0dp"  
        android:background="#dddddd">
    </ListView>
</android.support.v4.widget.DrawerLayout>

实现侧滑代码

给每个ListItem设置了单击事件，展开 一个Fragement用于查看效果

public class MainActivity extends FragmentActivity {

    private DrawerLayout mDlLayout;
    private ListView mLvNavi;
    private String[] labels = new String[] { "label 1", "label 2", "label 3" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mDlLayout = (DrawerLayout) findViewById(R.id.id_dl_layout);
        mLvNavi = (ListView) findViewById(R.id.id_lv_navi);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.test_list_item, labels);
        mLvNavi.setAdapter(adapter);
        mLvNavi.setItemChecked(0, true);
        mLvNavi.setOnItemClickListener(new MyOnItemListener());
    }

    private class MyOnItemListener implements OnItemClickListener {

        // 启动新的Fragment
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            MyFragment f = new MyFragment();
            Bundle b = new Bundle();
            b.putInt("num", arg2);
            f.setArguments(b);
            FragmentManager fm = getSupportFragmentManager();

            // 使用Fragment的事务
            fm.beginTransaction().replace(R.id.id_fl_content, f).commit();
            mLvNavi.setItemChecked(arg2, true);
            // 关闭导航
            mDlLayout.closeDrawer(mLvNavi);
        }
    }
}

Fragement代码（测试用）

public class MyFragment extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        TextView tv = new TextView(getActivity());
        Bundle bundle = getArguments();
        int num = bundle.getInt("num");
        LayoutParams params = new ViewGroup.LayoutParams(
                android.view.ViewGroup.LayoutParams.MATCH_PARENT,
                android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
        tv.setLayoutParams(params);
        tv.setGravity(Gravity.CENTER);
        tv.setText("Fragment "+(num+1));
        return tv;
    }
}

使用Toolbar实现联动

使用ActionBarDrawerToggel实现一个侧滑开关的按钮，实现与侧滑菜单的联动

 //为了生成工具栏左上角的动态图标
mDrawerToggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, R.string.drawer_open,
                R.string.drawer_close);
mDrawerToggle.syncState();
drawerlayout.setDrawerListener(mDrawerToggle); 

实现效果