ViewPager随着手指联动,且字体随之变色

来源:互联网 发布:mysql统计学生总人数 编辑:程序博客网 时间:2024/06/16 22:20

前言

在此次项目中,总结了一下在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,如果有什么不对的地方,欢迎指教

0 0
原创粉丝点击