PagerSlidingTabStrip 源码解析 @codeKK Open Source Website

PagerSlidingTabStrip 源码解析

作者：ayyb1988

本文为 Android 开源项目源码解析中 PagerSlidingTabStrip 部分
项目地址：PagerSlidingTabStrip，分析的版本：3f4738e，Demo 地址：PagerSlidingTabStrip Demo
分析者：ayyb1988，分析状态：已完成，校对者：Trinea，校对状态：校对中

1. 总体设计

pagerSlidingTabStrip 实现联动效果的原理是，它引用了 ViewPager 的OnPageChangeListener。但是 viewpager 注册的 listener 不是自身的OnPageChangeListener，而是 pagerSlidingTabStrip 内部类PageListener。通过PageListener实现对对 viewpager 和 tab 的封装。从而实现滑动联动效果。可以设置 tab 的类型为 textview 还是 icon。对于 textview 可设置字库属性。通过提供方法如滑动指示器下划线 tab 风格线 tab 权重等达到自定义的效果。

2. 流程图

3. 功能介绍

3.1 特性介绍

兼容 Android 支持库中的 ViewPager 的一个滑动分页指示器的控件。
滑动时实现 TextView 颜色状态的联动
支持文字导航指示，可指定选中的 pager 导航字体属性
支持图片导航指示，可高亮选中 pager 页导航背景
很好的扩展性

3.2 集成及使用指南

3.2.1

在 gradle 中

dependencies {
    compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
}

3.2.2 在 layout 布局文件中引入 PagerSlidingTabStrip，通常布局在 viewpager 上面。如下：

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip" />

3.2.3 在 oncreate 方法中（或 Fragment 的 onCreateView）中，绑定 PagerSlidingTabStrip 到 Viewpager

 // 初始化 ViewPager 和 Adapter
 ViewPager pager = (ViewPager) findViewById(R.id.pager);
 pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

 // 绑定 PagerSlidingTabStrip 到 ViewPager 上
 PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
 tabs.setViewPager(pager);

     // continued from above
     tabs.setOnPageChangeListener(mPageChangeListener);

3.3 用户定制

根据你的需要修改下面的值

pstsIndicatorColor 滑动指示器的颜色
pstsUnderlineColor 整个 view【PagerSlidingTabStrip】下划线的颜色
pstsDividerColor tabs 之间分割线的颜色
pstsIndicatorHeight 滑动指示器的高度
pstsUnderlineHeight 整个 View【PagerSlidingTabStrip】下滑线的高度
pstsDivviderPadding 分割线上部、下部的内间距
pstsTabPaddingLeftRight 每个 tab 左右内间距
pstsScrollOffset 选中 tab 的滑动的距离
pstsTabBackground 每个 tab 的背景图片，使用 StateListDrawable
pstsShouldExpand 如果设置为 true，每个 tab 的宽度拥有相同的权重
pstsTextAllCaps 如果设置为 true，所有的 tab 字体转为大写

4. 详细设计

4.1 类详细介绍

111

4.2 核心方法及功能介绍

pagerSlidingTabStrip 实现联动效果的原理是，它引用了 ViewPager 的 OnPageChangeListener。但是 viewpager 注册的 listener 不是自身的OnPageChangeListener，而是 pagerSlidingTabStrip 内部类PageListener。通过 PageListener 实现对对 viewpager 和 tab 的封装。从而实现滑动联动效果。下面结合代码详细说明

 private class PageListener implements OnPageChangeListener {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        //当前 view 的位置也即 tab 的位置
        currentPosition = position;
        //当前 view 滑动的距离。其中 currentPositionOffset 为 float，介于 0~1 代表相对于 tab 宽偏移的比例
        currentPositionOffset = positionOffset;
        //根据上面得到的 view 的位置和偏移位置，来同步 tab 的位置和偏移距离。
        scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));
            //重绘 view，实现 tab 滑动的效果。
        invalidate();
            //下面的 delegatePageListener 就是我们设置的 viewpager.setOnPageChangeListener.而现在把它封装在整个 pagerSlidingTabStrip 中，实现 viewpager 滑动的效果。
        if (delegatePageListener != null) {
            delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //滑动结束。positionOffset 归零
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            scrollToChild(pager.getCurrentItem(), 0);
        }
        //调用 viewpager.setOnPageChangeListener
        if (delegatePageListener != null) {
            delegatePageListener.onPageScrollStateChanged(state);
        }
    }

    @Override
    public void onPageSelected(int position) {
    //调用 viewpager.setOnPageChangeListener
        if (delegatePageListener != null) {
            delegatePageListener.onPageSelected(position);
        }
    }

}

scrollToChild，tab 的滑动位置实现如下：

private void scrollToChild(int position, int offset) {

    if (tabCount == 0) {
        return;
    }

    int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset;

    if (position > 0 || offset > 0) {
        newScrollX -= scrollOffset;
    }

    //滑动到的位置。
    if (newScrollX != lastScrollX) {
        lastScrollX = newScrollX;
        scrollTo(newScrollX, 0);
    }

}

接下来说下 addTextTab addIconTab。即 tab 是 text 还是 icon。如果是 icon 的话，通过 viewpager 的 adapter 实现接口IconTabProvider。来确定 icontab。

for (int i = 0; i < tabCount; i++) {

    if (pager.getAdapter() instanceof IconTabProvider) {
        addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));
    } else {
        addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
    }

}

4.3 View 绘制机制

请参考公共技术点 viewdrawflow部分

在 pagerSlidingTabStrip 中重写了 onDraw 函数 绘画滑动指示器; 绘画整个 tabs 下划线; 绘画 tab 之间间隔线。代码如下

 // draw indicator line

        rectPaint.setColor(indicatorColor);

        // default: line below current tab
        View currentTab = tabsContainer.getChildAt(currentPosition);
        float lineLeft = currentTab.getLeft();
        float lineRight = currentTab.getRight();

        // if there is an offset, start interpolating left and right coordinates between current and next tab
        if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {

            View nextTab = tabsContainer.getChildAt(currentPosition + 1);
            final float nextTabLeft = nextTab.getLeft();
            final float nextTabRight = nextTab.getRight();

            lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft);
            lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight);
        }

        canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);

        // draw underline

        rectPaint.setColor(underlineColor);
        canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);

        // draw divider

        dividerPaint.setColor(dividerColor);
        for (int i = 0; i < tabCount - 1; i++) {
            View tab = tabsContainer.getChildAt(i);
            canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint);
        }