PagerSlidingTabStrip是Github上的一个项目,地址为:
https://github.com/astuetz/PagerSlidingTabStrip
PagerSlidingTabStrip + ViewPager组合,可以实现滑动切换时Tab的下划线跟着滑动的效果
PagerSlidingTabStrip默认的Tab下划线宽度要比Tab的文字在两边长一些,由于项目需求中既有下划线比文字长度情况,也有跟文字一样长度情况,为方便两种模式切换,添加自定义属性来控制:
步骤1: 在res/values/attrs.xml下找到PagerSlidingTabStrip的属性定义,添加下面属性,决定下划线是否与文字等长
<attr name="pstsUnderlineEqualText" format="boolean" />
步骤2:修改PagerSlidingTabStrip.java
a. 添加成员变量:
private boolean isUnderlineEqualText = true;
b. 构造函数中添加属性值的获取:
isUnderlineEqualText = a.getBoolean(
R.styleable.PagerSlidingTabStrip_pstsUnderlineEqualText, isUnderlineEqualText);
c. 修改getIndicatorCoordinates函数,改后如下:
private Pair<Float, Float> getIndicatorCoordinates() {
// default: line below current tab
View currentTab = mTabsContainer.getChildAt(mCurrentPosition);
float lineLeft = 0;
float lineRight = 0;
if (currentTab != null) {
if (isUnderlineEqualText) {
lineLeft = currentTab.getLeft() + mTabPadding;
lineRight = currentTab.getRight() - mTabPadding;
} else {
lineLeft = currentTab.getLeft();
lineRight = currentTab.getRight();
}
}
// if there is an offset, start interpolating left and right coordinates
// between current and next tab
if (mCurrentPositionOffset > 0.0f && mCurrentPosition < mTabCount - 1) {
View nextTab = mTabsContainer.getChildAt(mCurrentPosition + 1);
final float nextTabLeft;
final float nextTabRight;
if (isUnderlineEqualText) {
nextTabLeft = nextTab.getLeft() + mTabPadding;
nextTabRight = nextTab.getRight() - mTabPadding;
} else {
nextTabLeft = nextTab.getLeft();
nextTabRight = nextTab.getRight();
}
lineLeft = (mCurrentPositionOffset * nextTabLeft + (1.0f - mCurrentPositionOffset)
* lineLeft);
lineRight = (mCurrentPositionOffset * nextTabRight + (1.0f - mCurrentPositionOffset)
* lineRight);
}
return new Pair<>(lineLeft, lineRight);
}
d. 这样在xml定义时就可以设置下划线跟文字是否等长, 不设置默认为true:
app:pstsUnderlineEqualText="false"
欢迎交流与指教!