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