android TabLayout的指示器宽度问题
最近碰到一个需求,因为是我比较感兴趣的TabLayout的,所以记录一下吧。
- 产品需求:希望上部导航栏中的指示器宽度略大于文字宽度;
- 技术方案:TabLayout配合ViewPager;
- 问题分析:原生TabLayout的指示器宽度等于每个tab的宽度,远大于tab内文字标题的宽度。
原因分析:
TabLayout(TL)继承自HorizontalScrollView,其只能添加一个子控件,这个子控件便是TL内部私有类–SlidingTabStrip,其继承自LinearLayout。指示器怎么加上的呢?便是在该类的onDraw方法中:
@Override publicvoiddraw(Canvascanvas){ super.draw(canvas); //Thickcoloredunderlinebelowthecurrentselection if(mIndicatorLeft>=0&& mIndicatorRight>mIndicatorLeft){ canvas.drawRect(mIndicatorLeft, mIndicatorRight,getHeight(), mSelectedIndicatorPaint); } }
即指示器是与这个SlidingTabStrip容器伴生存在,其宽度,由mIndicatorLeft和mIndicatorRight确定,而这二者,由tab的宽度决定,因为本文不会详细描述TL的源码,所以这里直接报出结论:这个指示器的宽度设置由tab宽度决定,而tab在mode=fix情况下,是符合linearLayout中weight控制的,因此,也没法通过tab的宽度来影响指示器的宽度,比较囧的是,源码中也没给tab设置个Margin什么的,另外,源码中也没有暴露set等方法来改变指示器宽度,否则也不会有此问题了。
解决方案1:
百度的方案基本集中在反射,使用麻烦,有时还不好用。
这个的思路来自stackoverflow,大致过程是由TL拿到其唯一的子类,即SlidingTabStrip,然后遍历再拿到其各子View,然后为每个子View设置Margin,这就相当于给每个tab设置margin,那么指示器的宽度自然也就跟着改变了。showcode:
publicstaticvoidreduceMarginsInTabs(TabLayouttabLayout,intmarginOffset){ ViewtabStrip=tabLayout.getChildAt(0); if(tabStripinstanceofViewGroup){ ViewGrouptabStripGroup=(ViewGroup)tabStrip; for(inti=0;i<((ViewGroup)tabStrip).getChildCount();i++){ ViewtabView=tabStripGroup.getChildAt(i); if(tabView.getLayoutParams()instanceofViewGroup.MarginLayoutParams){ ((ViewGroup.MarginLayoutParams)tabView.getLayoutParams()).leftMargin=marginOffset; ((ViewGroup.MarginLayoutParams)tabView.getLayoutParams()).rightMargin=marginOffset; } } tabLayout.requestLayout(); } }
这种方式的限制是:最多只能让指示器与tab等宽,无法继续减小指示器的宽度。
解决方案2:
本方案属于自定制指示器显示,相对比较灵活,能解决方案1的tab等宽问题,但是其缺点是不能保留指示器的动画。具体过程:
TL中tab可以设置自定义view,方法是setCustomView(@NullableViewview),也就是说,完全可以不用TL中那套,直接自定义布局即可。在tab源码的update方法中有这么一句:
mCustomTextView=(TextView)custom.findViewById(android.R.id.text1); if(mCustomTextView!=null){ mDefaultMaxLines=TextViewCompat.getMaxLines(mCustomTextView); } mCustomIconView=(ImageView)custom.findViewById(android.R.id.icon);
里面的android.R.id.text1和android.R.id.icon就是TL中tab能跟随滑动改变状态的两个view的id,我们自定义的时候可以让对应的view也这么设置id即可。而指示器,大可屏蔽原生TL的,直接在自定义布局的合适位置,加个view就行。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。