关于ViewPagerIndicator的学习和总结

这里主要论述了对TabPageIndicator和UnderLinePageIndicator两种界面的使用方式和总结：

开始我用的是ViewPager+Fragment 实现的app主界面，后来老师告诉我使用WPS的主界面布局方式效果可能会好一些～～～折腾了好几个小时总算是搞明白了TabPageIndicator 的用法，也写出了demo。。。。。。在实现的过程中让人蛋疼的是.9path图的问题，大家都知道eclipse对9path图的要求不是特别严格，这就导致了很多9path图转移到了studio上产生了无法解析图片的错误。汗！！！后来好不容易找到一个可以实现的图，然后发现除了style的定制略微繁琐之外，还让人有点接受不了的就是在VIewPager左右切换的时候，上边的指示器貌似没有过渡的效果......身为天蝎座却犯有处女座毛病的我，课余时间一直在查找过渡效果实现的方式。。。最后突然发现在ViewPagerIndicator开源库给的demo里有一个叫做UnderLinePage的demo居然可以具有过渡效果！！！惊喜！！！，虽然没有选项卡，只有一个光秃秃的指示条，但是这基本让我有了一丁点的想法！！！于是乎就......

看了看开源库的源码，发现UnderLinePagerIndicator的用法和TabPageIndicator的用法几乎一样，窃喜～～～然后照猫画虎的写了一个demo（可惜没有选项卡），紧接着发现我们之前在做ViewPager+Fragment实现的时候，那个联动效果是根据监听viewPager的onPageSelected（）方法来实现的，哈哈～～～你懂的，然后我就同样写了一个装有选项卡的布局，然后一一监听，在监听的方法里对选项卡里的文字颜色进行联动变化即可达到目的！！！

这里贴出TabPageIndicator的主要源码：

<span style="font-size:14px;">public class Tabs extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view= inflater.inflate(R.layout.tabs,container,false);//最后一项为是否有父布局，设为false
        TextView content= (TextView) view.findViewById(R.id.tv);
        //savedInstanceState是自己保存下来的数据
        Bundle bundle= getArguments();
        String title= bundle.getString("arg");//从bundle里获取来自Activity的数据
        content.setText(title);
        return view;
    }
}</span>

<span style="font-size:14px;">package com.bob.indicatortab;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

import com.viewpagerindicator.PageIndicator;


public class MainActivity extends FragmentActivity {

    public static final String titles[]= {"新增","摆渡","我的"};

    private ViewPager pager;
    private PageIndicator indicator;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pager= (ViewPager) findViewById(R.id.pager);

        FragmentPagerAdapter adapter= new TabPageIndicatorAdapter(getSupportFragmentManager());//创建数据适配器
        pager.setAdapter(adapter);

        indicator= (PageIndicator) findViewById(R.id.indicator);//核心代码其实就是这两句
        indicator.setViewPager(pager);//将indicator和viewPager进行绑定

    /*两种设置页面切换监听的方法
        indicator.setOnPageChangeListener();
        pager.setOnPageChangeListener();*/
    }


    class TabPageIndicatorAdapter extends FragmentPagerAdapter{

        public TabPageIndicatorAdapter(FragmentManager fm){//构造父类
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            Fragment fragment= new Tabs();
            Bundle args= new Bundle();
            args.putString("arg", titles[position]);
            fragment.setArguments(args);//为fragment添加bundle数据束args
            return fragment;
        }

        @Override
        public int getCount() {
            return titles.length;
        }//创建一个支持indicator的FragmentPagerAdapter适配器

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}
</span>

******************注意*******************

这里为了图方便，我把本应多个fragment实现的页面用一个fragment代替了，如果多个页面布局都一样的话，采用一个也未尝不可！！！

大家可以仔细观察观察，发现单纯使用TabPageIndicator其实是非常简单的，当然啦，让人稍微有点蛋疼的是它在style里配置indicator的参数以及9path图的问题，然后大家就可以使用类比的方法来实现UnderLinePageIndicator，加上一个布局和联动效果自然而然就可以达到我们想要的效果了！！！ 联动效果的实现可以参考 我的这篇博客；

之所以不贴出UnderLinePageIndicator的源码，是为了让大家对我所说的认真思考思考，源码在下边的github里～～～

项目地址（studio）