自定义TabLayout的Indicator

　　最近项目要使用类似TabLayout的控件，其实我感觉就是TabLayout只是换了一个Indicator，先说一说TabLayout这是Android Support Design的控件要使用的同学们应导入Design库在Gradle中在dependencies加入下面代码同步Gradle就可以使用了，Design里面还有很多有意思的东西推荐大家都看看。

  compile 'com.android.support:design:23.1.1'

 　　

　　想改变TabLayout Indicator还是有点麻烦的，主要是TabLayout没有暴露出一些东西，这就导致我们在自定义Indicator的时候不是那么的方便呢。我的想法是在TabLayout后面加一个View来跟随TabLayout自己来画Indicator，实现方法有很多我只给大家提供一个思路,下面是布局方式。

  <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <com.indicator.ShapeIndicatorView　　　　//自定义Indicator
                android:id="@+id/custom_indicator"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingTop="10dp"
                app:fullColor="@android:color/holo_blue_dark"
                />


            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></android.support.design.widget.TabLayout>

        </FrameLayout>

 用一个FrameLayout包含一个TabLayout与一个自定义的Indicator， ShapeIndicatorView的代码包含三个部分，设置TabLayout，设置ViewPager，然后将TabLayout与ViewPager组合起来。

　下面代码说明它们是如何组合的，其实TabLayout有一个setupWithViewPater方法可以直接设置ViewPager但这样会产生一个问题，TabLayout内部会为ViewPager添加一个自身的OnViewPagerScrollListener，而我们自己定义的也会添加一个listener这就会导致有一些冲突我的解决办法是不为TabLayout设置ViewPager将ViewPager设置在自定义的View由我们管理TabLayout与ViewPager的切换工作。

  mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);
 
        TabLayout   tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        ShapeIndicatorView shapeIndicatorView = (ShapeIndicatorView) findViewById(R.id.custom_indicator);

        tabLayout.setTabsFromPagerAdapter(mViewPager.getAdapter());
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        shapeIndicatorView.setupWithTabLayout(tabLayout);
        shapeIndicatorView.setupWithViewPager(mViewPager);

准备好上面的工作后再看ShapeIndicatorView内部的代码。首先将TabLayout原生的Indicator的颜色设置为不可见，然后设置个listener监听Tab切换事件， 最后要添加一个全局的滚动listener如果TabLayout的Mode是SCROLLABLE的话这是有必要的，因为我们的Indicator也要跟直滚动。

 public void setupWithTabLayout(final TabLayout tableLayout){
        mTabLayout = tableLayout;



        tableLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);
        tableLayout.setOnTabSelectedListener(this);



        tableLayout.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                if (mTabLayout.getScrollX() != getScrollX())
                    scrollTo(mTabLayout.getScrollX(), mTabLayout.getScrollY());
            }
        });

        ViewCompat.setElevation(this, ViewCompat.getElevation(mTabLayout));
        tableLayout.post(new Runnable() {
            @Override
            public void run() {
                if (mTabLayout.getTabCount() > 0)
                    onTabSelected(mTabLayout.getTabAt(0));

            }
        });

        //清除Tab background
        for(int tab = 0; tab < tableLayout.getTabCount() ; tab++){
            View tabView = getTabViewByPosition(tab);
            tabView.setBackgroundResource(0);
        }
    }

 　　

效果图

　　

还有的一些就是协作方法就不贴出来呢，有兴趣的可以看源码。

https://github.com/yjwfn/tablayoutindicator.git