ActionBar和DrawerLayout纯原生控件，实现侧滑栏和滑动Tab界面

原文地址:http://blog.csdn.net/zhaokaiqiang1992/article/details/405856773

在前面的文章中，我们使用第三方开源控件，比如说是SlidingMenu和PagerSlidingTabStrip，实现过侧滑栏和滑动Tab界面。但是在support-v4包中，提供了原生的侧滑栏控件DrawerLayout，而滑动的Tab效果，我们可以使用ViewPager和ActionBar上的Tab来进行实现。所以在今天的文章里面，我们将介绍如何将DrawerLayout与ActionBar进行整合，使用纯原生的控件来实现我们想要的效果。

首先，先看一下最终的实现效果。



除了实现了侧滑栏和可以滑动的Tab页，还顺便加上了ActionBar上的Menu和ShareActionProvider，可以实现简单的分享功能，下面，给大家介绍实现的具体过程。

首先看一下整个项目的目录结构



MainActivity是主界面，MenuAdapter是菜单的listview的适配器，PlaceholderFragment是Fragment的子类，SectionsPagerAdapter是ViewPager的适配器。

res文件夹中的文件则是对应的布局文件，main是ActionBar的菜单布局。

首先，如果我们想用DrawerLayout，我们必须在xml布局进行声明

[html] view
plaincopy





<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" >

<android.support.v4.view.ViewPager

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<ListView

android:id="@+id/left_drawer"

android:layout_width="240dp"

android:layout_height="match_parent"

android:layout_gravity="start"

android:background="#ccffffff"

android:choiceMode="singleChoice"

android:divider="@android:color/transparent"

android:dividerHeight="0dp" />

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

上面的代码是主界面的布局代码，DrawerLayout必须作为根布局，在里面我们嵌套了一个ViewPager用来实现Tab页的滑动，要注意的是，下面的ListView就是侧滑栏的布局，我们当然可以用其他的布局来实现。我们如果想控制侧滑栏的滑出方向，我们应该使用layout_gravity属性来设置，比如说是left/right或者是start/end。如果我们想使用DrawerLayout布局那么我们的主布局必须是第一个子控件，并且宽和高必须是match_parent，比如我们上面的ViewPager的使用。而我们的侧滑栏的布局，必须紧跟在主布局的后面，而且要通过layout_gravity来设置滑出的方向。通常我们给侧滑栏的宽度设置一个固定的大小，高度设置成match_parent。

为了把DrawerLayout绑定到我们需要的Activity上，并定义相关的事件回调，我们需要定义一个ActionBarDrawerToggle对象来完成这项工作，比如，下面的代码就实现了我们想要的功能

[java] view
plaincopy





// 将DrawerLayout布局绑定到当前界面，并设置点击事件

mDrawerToggle = new ActionBarDrawerToggle(this, /* 宿主 Activity */

mDrawerLayout, /* 需要绑定的DrawerLayout对象 */

R.drawable.ic_drawer, /* 用于替换向上的图片 */

R.string.drawer_open, /* "open drawer" description for accessibility */

R.string.drawer_close /* "close drawer" description for accessibility */

) {

public void onDrawerClosed(View view) {

// creates call to onPrepareOptionsMenu()

invalidateOptionsMenu();

}

public void onDrawerOpened(View drawerView) {

// creates call to onPrepareOptionsMenu()

invalidateOptionsMenu();

}

};

// 绑定监听器

mDrawerLayout.setDrawerListener(mDrawerToggle);

值得注意的是，在onDrawerClosed()和onDrawerOpened()方法里面，并没有直接的进行DrawerLayout的打开和关闭操作，而是调用了invalidateOptionsMenu()方法，让系统去调用onPrepareoptionsMenu()。那么，侧滑栏的打开和关闭，到底如何控制呢？

我们可以在onOptionsItemelected方法里面进行控制，象下面这样

[java] view
plaincopy





@Override

public boolean onOptionsItemSelected(MenuItem item) {

// 处理侧滑栏的打开关闭效果

if (mDrawerToggle.onOptionsItemSelected(item)) {

return true;

}

// 处理ActionBar的Menu的点击事件

switch (item.getItemId()) {

// edit

case R.id.action_edit:

Toast.makeText(this, "Edit", Toast.LENGTH_SHORT).show();

return true;

// more

case R.id.action_more:

Toast.makeText(this, "More", Toast.LENGTH_SHORT).show();

return true;

}

return super.onOptionsItemSelected(item);

}

设置好侧滑栏之后，下面开始设置Tab。滑动的Tab界面，实际上是由ViewPager和ActionBar.Tab组成的，因此，我们需要分别进行设置。

ViewPager的使用大家应该很熟悉了，需要设置一个Adapter，然后在里面进行Fragment页面的切换操作，下面重点说一下，如何将Tab和ViwqPager组合起来。

首先，我们需要调用下面的代码，将导航模式调整为tab

// 初始化

actionBar = getActionBar();

// 设置导航模式为Tab方式

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
设置好之后，我们就可以组合了

[java] view
plaincopy





// 初始化ViewPager的适配器对象

mSectionsPagerAdapter = new SectionsPagerAdapter(

getSupportFragmentManager());

mViewPager.setAdapter(mSectionsPagerAdapter);

// 在不同的Fragment之间滑动的时候，修改选中的tab，我们也可以使用ActionBar.Tab#select()完成，如果我们有Tab的引用的话

mViewPager

.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

@Override

public void onPageSelected(int position) {

actionBar.setSelectedNavigationItem(position);

}

});

// 根据界面数量添加Tab

for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {

actionBar.addTab(actionBar.newTab()

.setText(mSectionsPagerAdapter.getPageTitle(i))

.setTabListener(this));

}

如果想滑动之后改变Tab的当前选中项，我们需要在onPageSelected里面根据position设置选中的项目即可，如果我们想点击tab，ViewPager切换到对应的界面，我们需要在当前的Activity中，实现ActionBar.TabListener
接口，然后在下面的回调接口中，切换即可

[java] view
plaincopy





@Override

public void onTabSelected(ActionBar.Tab tab,

FragmentTransaction fragmentTransaction) {

// 处理Tab的点击，ViewPager滑动到对应的位置

mViewPager.setCurrentItem(tab.getPosition());

}

@Override

public void onTabUnselected(ActionBar.Tab tab,

FragmentTransaction fragmentTransaction) {

}

@Override

public void onTabReselected(ActionBar.Tab tab,

FragmentTransaction fragmentTransaction) {

}

经过上面这些步骤，我们就用纯原生的控件实现了想要的效果。关于ActionBar上的Menu和SharetionProvider的使用，这篇文章不做过多介绍了，有时间单独介绍。

项目的Github地址：https://github.com/ZhaoKaiQiang/actionbartabs