自定义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

巴特西

自定义TabLayout的Indicator

最新文章

热门文章