Material Design学习笔记之Toolbar+DrawerLayout+PagerSlidingTabStrip

1. 概述

在上一篇文章Material Design学习笔记之Toolbar+DrawerLayout中介绍了Toolbar+DrawerLayout的实现。在此，本文进一步丰富其功能，通过第三方开源库PagerSlidingTabStrip（Github地址）来实现tab导航栏效果。点击tab标签将跳转到相应页面，并且可以实现页面滑动，效果如图：

2. 实现

2.1 平台配置

• Android Studio 1.4
• compileSdkVersion 23
• buildToolsVersion “23.0.1”
• build:gradle:1.3.0
  如果要使用PagerSlidingTabStrip库，首先将下载的PagerSlidingTabStrip文件夹中的library导入到本地工程。即File->New->Import Module…

2.2 风格（Style）

设置Tab背景，新建res/drawable/background_tabs：

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/tabs_pattern"
    android:tileMode="repeat" />

其中，图片tabs_pattern可以从下载的PagerSlidingTabStrip文件夹下的Sample文件夹下找到。

2.2 布局（Layout）

在此，仅需简单修改drawerlayout布局文件：

...
<com.astuetz.PagerSlidingTabStrip
                android:id="@+id/tab_strip"
                android:layout_width="match_parent"
                android:layout_height="48dip"
                android:background="@drawable/background_tabs" />
                ...

代码（Java）

src/MainActivity.java：

public class MainActivity extends ActionBarActivity {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private Toolbar mToolbar;
    private ListView mDrawerListView;
    private ViewPager mViewPager;
    private String titles[] = new String[]{"Sample Tab 1", "Sample Tab 2", "Sample Tab 3", "Sample Tab 4"
            , "Sample Tab 5", "Sample Tab 6", "Sample Tab 7", "Sample Tab 8"};
    PagerSlidingTabStrip mPagerSlidingTabStrip;

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

    private void initViews() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);

        if(mToolbar != null){
            mToolbar.setLogo(R.drawable.logo);
            mToolbar.setTitle("My Title");// 标题的文字需在setSupportActionBar之前，不然会无效
            mToolbar.setSubtitle("Sub Title");
            mToolbar.setTitleTextColor(getResources().getColor(R.color.white));
            setSupportActionBar(mToolbar);
        }

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
                R.string.drawer_close);
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        mDrawerListView = (ListView)findViewById(R.id.mListView);

        mViewPager = (ViewPager)findViewById(R.id.viewpager);
        mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), titles));

        mPagerSlidingTabStrip = (PagerSlidingTabStrip)findViewById(R.id.tab_strip);
        mPagerSlidingTabStrip.setViewPager(mViewPager);
        mPagerSlidingTabStrip.setIndicatorColor(getResources().getColor(R.color.colorPrimaryDark));
        mPagerSlidingTabStrip.setIndicatorHeight(4);

        String[] values = new String[]{
                "DEFAULT", "RED", "BLUE", "MATERIAL GREY"
        };
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                this,android.R.layout.simple_list_item_1,android.R.id.text1,values);
        mDrawerListView.setAdapter(adapter);
        mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                switch (position){
                    case 0:
                        mDrawerListView.setBackgroundColor(getResources().getColor(R.color.material_deep_teal_500));
                        mToolbar.setBackgroundColor(getResources().getColor(R.color.material_deep_teal_500));
                        mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.material_deep_teal_500));
                        mDrawerLayout.closeDrawer(Gravity.LEFT);
                        break;
                    case 1:
                        mDrawerListView.setBackgroundColor(getResources().getColor(R.color.red));
                        mToolbar.setBackgroundColor(getResources().getColor(R.color.red));
                        mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.red));
                        mDrawerLayout.closeDrawer(Gravity.LEFT);
                        break;
                    case 2:
                        mDrawerListView.setBackgroundColor(getResources().getColor(R.color.blue));
                        mToolbar.setBackgroundColor(getResources().getColor(R.color.blue));
                        mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.blue));
                        mDrawerLayout.closeDrawer(Gravity.LEFT);
                        break;
                    case 3:
                        mDrawerListView.setBackgroundColor(getResources().getColor(R.color.material_blue_grey_800));
                        mToolbar.setBackgroundColor(getResources().getColor(R.color.material_blue_grey_800));
                        mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.material_blue_grey_800));
                        mDrawerLayout.closeDrawer(Gravity.LEFT);
                        break;
                }
            }
        });
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }
}

个性化定制：PagerSlidingTabStrip提供了丰富的个性化定制属性，可以通过

• .setIndicatorColor 滑动指示器颜色
• .setUnderlineColor 视图的底部的全宽线的颜色
• .setDividerColor 选项卡之间的分隔线的颜色
• .setIndicatorHeight 滑动指标高度
• .setUnderlineHeight 视图的底部高度的全宽线
• .setDividerPadding 顶部和分频器的底部填充
• .setTabPaddingLeftRight 左，每个选项卡的右填充
• .setScrollOffset 所选选项卡的滚动偏移量
• .setTabBackground 每个标签的背景可拉伸，应该是一个StateListDrawable
• .setShouldExpand 如果设置为true，每个选项卡被赋予了相同的权重，默认为false
• .setTextAllCaps 如果为true，所有的选项卡标题将是大写，默认为true

源码下载