前言
在此次项目中,总结了一下在ViewPager+Fragment的情况下,手指滑动ViewPager,使得指针一起联动,并且字体随之变色的效果,参考了鸿洋大神的两篇文章和其他开源代码,此次做了比较完整的处理,以后如果有需要的话,可以直接拿来用。
具体的一些代码块贴上来仅供参考
自定义的ScrollTabView,继承自view,类似指针,会随着手指的移动进行实时滑动
private int mTabNum,mCurrentNum;
private float mWidth,mTabWidth,mOffset;
private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private int mBeginColor,mEndColor;
private LinearGradient mGradient;
public ScrollTabView(Context context) {
this(context,null);
}
public ScrollTabView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setTabNum(int num){
mTabNum = num;
}
public void setCurrentNum(int num){
mCurrentNum = num;
mOffset = 0;
}
public void setOffset(int position,float offset){
if(offset == 0){
return;
}
mCurrentNum = position;
mOffset = offset;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(mTabWidth == 0){
mWidth = getWidth();
mTabWidth = mWidth / mTabNum;
}
//根据位置和偏移量来计算滑动条的位置
float left = (mCurrentNum + mOffset) * mTabWidth;
float right = left + mTabWidth;
float top = getPaddingTop();
float bottom = getHeight() - getPaddingBottom();
LinearGradient gradient = new LinearGradient(left,getHeight(),right,getHeight(),mBeginColor,mEndColor, Shader.TileMode.CLAMP);
mPaint.setShader(gradient);
canvas.drawRect(left,top,right,bottom,mPaint);
}
public void setSelectedColor(int preColor,int nextColor){
mBeginColor = preColor;
mEndColor = nextColor;
}
ThreeActivity的部分代码块,配合ScrollTabView使用
private void initEvents() {
mViewPager.setAdapter(mAdapter);
highLightTextView(0);
mTextView.setText(mDatas.get(0));
id_tab_line_iv.setTabNum(mDatas.size());
id_tab_line_iv.setCurrentNum(0);
id_tab_line_iv.setSelectedColor(Color.BLUE,Color.YELLOW);
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
id_tab_line_iv.setOffset(position,positionOffset);
if (positionOffset > 0)
{
ColorTrackView left = mTabs.get(position);
ColorTrackView right = mTabs.get(position + 1);
left.setDirection(1);
right.setDirection(0);
left.setProgress( 1-positionOffset);
right.setProgress(positionOffset);
}
}
@Override
public void onPageSelected(int position) {
resetTextViewColor();
highLightTextView(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 高亮文本
* @param position
*/
protected void highLightTextView(int position)
{
View view = mTabs.get(position);
if (view instanceof ColorTrackView)
{
((ColorTrackView) view).setTextSize(48);
mTextView.setText(mDatas.get(position));
}
}
/**
* 重置文本颜色
*/
private void resetTextViewColor()
{
for (int i = 0; i < mTabs.size(); i++)
{
View view = mTabs.get(i);
if (view instanceof ColorTrackView)
{
((ColorTrackView) view).setTextSize(40);
}
}
}
最后是鸿洋大神写的ColorTrackView这个类,主要处理字体变色这个效果,这个代码块我就不贴了
项目下载地址,欢迎下载、star,如果有什么不对的地方,欢迎指教