DrawerLayout的简单使用

DrawerLayout的简单使用

相关知识点

1. DrawerLayout&SlideMeau
2. DrawerLayut(listview)&Fragment
3. ActionBarDrawerToggle

核心内容

• DrawerLayout是什么呢，他是谷歌提供给开发者用来实现Metrial Design效果的侧边栏空间，位于android.support.v4.widget.DrawerLayout
• 我之前经常使用的侧边栏空间是SlideMenu效果，也自己写过这样的控件，不过用过这个DrawerLayout就不向用之前的具体为什么，自己用用看
• 先上一个经常用的官方API老生长谈的效果，就是在小屏幕上做一个列表目录点击查看效果，需要两个Activity一个放列表，一个用来展示详情，而在大屏的设备商，可能为了更好的用户体验，我们通常会将目录列表用Fragemnt放置在左侧，详情展示放在屏幕右侧，点击过程不用切换页面，提高体验性，下面是官方使用DrawerLayouy和Fragment实现的核心代码：

---

 `<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">
<!-- The main content view -->
<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<!-- The navigation drawer -->
<ListView android:id="@+id/left_drawer"
    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="#111"/>
    </android.support.v4.widget.DrawerLayout>`

---

现在我们来解读这段代码：

1. 首先看到我们的DrawerLayout位于v4包内，使用时，将展示内容布局和侧边滑动列表自上而下一次插入布局，其实通过常用的app效果你应该能够猜到DrawerLayout是一个类似Framelayout的控件。自上而下布局依次在从低到高覆盖摆放，当然这里只是猜测，待会看源码怎么说。
2. 经过1的猜测那你也应该猜到了位于DrawerLayout最上面的FrameLayout就是我们的内容展示布局，而他下边的ListView就是它的侧边栏布局，但是DrawerLayout是怎么判断的，从上面的代码来看貌似只有 android:layoutgravity="start"这一句像是答案了，没错DrawerLayout就是通过layoutgravity控件来控制侧滑布局的未知的，其中根据平台是否支持dircetion决定该值的选择范围是left/right还是start/end,当然现在最小支持的版本普遍是4.0我们就直接按照官方推荐的使用start（左）/end（右）吧
3. 那你可能会问那把第一个设置成侧边栏可以么？好吧我也替你试过了，是可以的；那什么是不可以的呢？那就是在同一个位置设置了两个就以上的侧边栏，也就是说布局中只能有一个布局的layout_grivaty的属性是start/end
4. 来一个额外福利吧，因为实在是呗Google大神的代码思想折服，所以在这将代码贴出来大家自行感受吧：

---

`private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
    selectItem(position);
}
}

/** Swaps fragments in the main content view */
private void selectItem(int position) {
// Create a new fragment and specify the planet to show based on position
Fragment fragment = new PlanetFragment();
Bundle args = new Bundle();
args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
fragment.setArguments(args);

// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction()
               .replace(R.id.content_frame, fragment)
               .commit();

// Highlight the selected item, update the title, and close the drawer
mDrawerList.setItemChecked(position, true);
setTitle(mPlanetTitles[position]);
mDrawerLayout.closeDrawer(mDrawerList);
}

@Override
public void setTitle(CharSequence title) {
mTitle = title;
getActionBar().setTitle(mTitle);
}

这是使用：

---

`public class MainActivity extends Activity {
private String[] mPlanetTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
...

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

    mPlanetTitles = getResources().getStringArray(R.array.planets_array);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mDrawerList = (ListView) findViewById(R.id.left_drawer);

    // Set the adapter for the list view
    mDrawerList.setAdapter(new ArrayAdapter<String>(this,
            R.layout.drawer_list_item, mPlanetTitles));
    // Set the list's click listener
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    ...
}
}`

其他用法

• 除了上述用法之外，我们的项目中通常还会用到ToolBar、ActonBar、AppBar，还记得有一个效果超赞侧边栏么，侧边的显示可以与ToolBar上的返回按钮就行互动，三线箭头与箭头的来回切换，现在你也不用自己写了，因为官方已经帮你实现了，而且还提供给我们自己DIY的更能，这个类就是ActionBarDraerToggle，这里只是简单一说，因为这有牵扯到另一个帮助类的代码解读问题，但是原理都是一样的，我想你应该也猜到了，那就是对侧边栏的滑动就行监听，不断的变化的顶部导航栏效果，那我呢来直接看看监听方法吧，DrawerLayout.DraerListener,里面提供了对侧边栏打开、关闭等方法的监听，为了更清晰的给搭建展示，直接将ActionBarDrawerToggle的复制过来吧，这也样一句两得不是嘛，不要问我是谁，如果你一定要问，请叫我雷锋。。。

---

 mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
            R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

        /** Called when a drawer has settled in a completely closed state. */
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
            getActionBar().setTitle(mTitle);
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }

        /** Called when a drawer has settled in a completely open state. */
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            getActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }
    };

    // Set the drawer toggle as the DrawerListener
    mDrawerLayout.setDrawerListener(mDrawerToggle);

• 因为DrawerLayout实在是太灵活了，google后期又推出了NavigationView来规范侧边栏的样式，详情就看后续报道吧。。。