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