自定义viewpager的顶部标签栏

前言

viewpager顶部标签栏，效果类似网易新闻的客户端。viewpager的顶部标签栏。这里我采用HorizontalScrollView来实现。
先上效果图:

需求说明

1.标签是可以动态获取。被选中标签位置在第二个。
2.UI跟设计图保持一致。

分析

本来想用第三方控件实现，但是第三方界面要修改跟设计图一模一样，比较花时间。
所以用HorizontalScrollView、TextView、VIew这些基本的VIew来实现，这样改UI就变得非常简单了。
实现方法：
1.就是根据viewpager的滑动距离，来控制标签的移动。
2.下面标签的线，则通过设置margin来实现

关键代码(下方有demo下载链接)

private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, final int positionOffsetPixels) {
            //根据viewpager的滑动距离让顶部标签跟随移动
            int offset = widthTab * (position - 1) + widthTab * positionOffsetPixels / SCREEN_WIDTH;
            scrollViewTab.smoothScrollTo(offset, 0);
            //对滑块做特殊处理
            RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) vTabLine.getLayoutParams();
            //第0项和第1项，做下特殊处理
            if (position == 0 || position == 1) {
                if (!(position == 1 && positionOffsetPixels > 0)) {
                    lp.leftMargin = widthTab * position + widthTab * positionOffsetPixels / SCREEN_WIDTH;
                    vTabLine.setLayoutParams(lp);
                } else {
                    lp.leftMargin = widthTab + offset;
                    vTabLine.setLayoutParams(lp);
                }
            } else {
                lp.leftMargin = widthTab + offset;
                vTabLine.setLayoutParams(lp);
            }
        }

        @Override
        public void onPageSelected(int position) {
            showTab(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

关键函数就是上面，需要花些时间，就可以效果调试出来。

总结

这个标签栏效果，我以前一般的解决思路都是习惯依赖采用第三方控件，几行代码配置就可以。
发现自己全用代码去实现，也是挺好的。

源码下载