Tabbar & Viewpager 动效库推荐及浅封

基于该库做的封装，以备之后用到

需求有点特别，颜色扩展是为了以备其他页面用到，最重要的是位置扩展，一般的指示器是在底部居中，如下图（该库中的界面）：

大多都是底部居中

而我们的设计稿是这样的：(靠左居中)

滑动起来伸长一倍，而后缩短到原来的样子

滑动完毕的样子

所以做了下列扩展，真心说，这个库真不错！扩展也很多！

1 颜色扩展

   /**
     * 设置tab标题的 正常状态 颜色，在 initView() 之前调用，否则不生效
     * 不设置则使用默认颜色
     */
    fun setColorNormal(color: String){
        color_title_normal = color
        invalidate()
    }

    /**
     * 设置tab标题的 选中状态 颜色，在 initView() 之前调用，否则不生效
     * 不设置则使用默认颜色
     */
    fun setColorSelected(color: String){
        color_title_selected = color
        invalidate()
    }

    /**
     * 设置指示器颜色，在 initView() 之前调用，否则不生效
     * 不设置则使用默认颜色
     */
    fun setColorLine(color: String){
        color_line = color
        invalidate()
    }

2 位置扩展 LinePagerIndicator

// 修改了最终绘制的矩形区域，以达到移动的目的
private int transToLeft = 0;
private int transToTop = 0;

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            ...
            this.mLineRect.left = leftX + (nextLeftX - leftX) * this.mStartInterpolator.getInterpolation(positionOffset) + transToLeft;
            this.mLineRect.right = rightX + (nextRightX - rightX) * this.mEndInterpolator.getInterpolation(positionOffset) + transToLeft;
            this.mLineRect.top = (float) this.getHeight() - this.mLineHeight - this.mYOffset + transToTop;
            this.mLineRect.bottom = (float) this.getHeight() - this.mYOffset + transToTop ;
            this.invalidate();
        }
    }

另外要说一下，一开始我打算继承 LinePagerIndicator ，进行修改。

最后发现一个简单方法，聊以记录：

1 找到要修改的文件LinePagerIndicator，因为在jar包中，无法直接修改，

2 可以直接复制该类全部代码，新建一个类并粘贴

3 在使用该类的地方，去除原来jar包中的引用，就可以直接使用新类了

4 现在就可以直接对新建的类进行修改了（我的位置扩展就是在新类中修改的）

代码

1 View封装,暴露设置正常状态与选中状态颜色的方法

/**
 * <pre>
 *     author : jake
 *     time   : 2018/05/08
 *     function   :  动效切换效果的tabView，可以通过传参改变相关颜色及便签内容
 *     version: 1.0
 * </pre>
 */

class AllCourseTabView(context: Context?, attrs: AttributeSet? = null) : MagicIndicator(context, attrs) {

//  标题颜色
    private var color_title_normal = "#787878"
    private var color_title_selected = "#180438"
//  指示器颜色
    private var color_line = "#F5A623"

    /**
     * 设置tab标题的 正常状态 颜色，在 initView() 之前调用，否则不生效
     * 不设置则使用默认颜色
     */
    fun setColorNormal(color: String){
        color_title_normal = color
        invalidate()
    }

    /**
     * 设置tab标题的 选中状态 颜色，在 initView() 之前调用，否则不生效
     * 不设置则使用默认颜色
     */
    fun setColorSelected(color: String){
        color_title_selected = color
        invalidate()
    }

    /**
     * 设置指示器颜色，在 initView() 之前调用，否则不生效
     * 不设置则使用默认颜色
     */
    fun setColorLine(color: String){
        color_line = color
        invalidate()
    }

    /**
     * mDataList 指Tab的标签名的集合
     */
    fun initView(vp:ViewPager,mDataList:List<String>?){
        val magicIndicator = findViewById<View>(R.id.tab_all_course) as MagicIndicator
        magicIndicator.setBackgroundColor(Color.WHITE)
        val commonNavigator = CommonNavigator(context)
        commonNavigator.scrollPivotX = 0.65f
        commonNavigator.adapter = object : CommonNavigatorAdapter() {
            override fun getCount(): Int {
                return if (mDataList == null) 0 else mDataList.size
            }

            override fun getTitleView(context: Context, index: Int): IPagerTitleView {
                val simplePagerTitleView = ColorFlipPagerTitleView(context)
                simplePagerTitleView.text = mDataList!![index]
                simplePagerTitleView.textSize = 16f
                simplePagerTitleView.normalColor = Color.parseColor(color_title_normal)
                simplePagerTitleView.selectedColor = Color.parseColor(color_title_selected)
                simplePagerTitleView.setOnClickListener {
                    vp.setCurrentItem(index)
                }
                return simplePagerTitleView
            }

            override fun getIndicator(context: Context): IPagerIndicator {
                val indicator = LinePagerIndicator(context)
                indicator.mode = LinePagerIndicator.MODE_EXACTLY
                indicator.lineHeight = UIUtil.dip2px(context, 4.0).toFloat()
                indicator.lineWidth = UIUtil.dip2px(context, 36.0).toFloat()
                indicator.roundRadius = UIUtil.dip2px(context, 2.0).toFloat()
                indicator.startInterpolator = AccelerateInterpolator() as Interpolator?
                indicator.endInterpolator = DecelerateInterpolator(2.0f)

//              将线条向上移动16，不在底部
                indicator.transToLeft = 20.dp
                indicator.transToTop = 8.dp

                indicator.setColors(Color.parseColor(color_line))
                return indicator
            }
        }
        magicIndicator.navigator = commonNavigator
        ViewPagerHelper.bind(magicIndicator, vp)
    }
}

2 设置指示器的位置，可以上下左右移动，而不是仅底部居中


/**
 * <pre>
 *     author : jake
 *     time   : 2018/05/08
 *     function   :  暴露getTransToLeft & getTransToTop方法，可以调节指示器的位置（向右或向下输入负值）
 *     version: 1.0
 * </pre>
 */
public class LinePagerIndicator extends View implements IPagerIndicator {
    public static final int MODE_MATCH_EDGE = 0;
    public static final int MODE_WRAP_CONTENT = 1;
    public static final int MODE_EXACTLY = 2;
    private int mMode;
    private Interpolator mStartInterpolator = new LinearInterpolator();
    private Interpolator mEndInterpolator = new LinearInterpolator();
    private float mYOffset;
    private float mLineHeight;
    private float mXOffset;
    private float mLineWidth;
    private float mRoundRadius;
    private Paint mPaint;
    private List<PositionData> mPositionDataList;
    private List<Integer> mColors;
    private RectF mLineRect = new RectF();

    private int transToLeft = 0;
    private int transToTop = 0;

    public LinePagerIndicator(Context context) {
        super(context);
        this.init(context);
    }

    private void init(Context context) {
        this.mPaint = new Paint(1);
        this.mPaint.setStyle(Style.FILL);
        this.mLineHeight = (float) UIUtil.dip2px(context, 3.0D);
        this.mLineWidth = (float) UIUtil.dip2px(context, 10.0D);
    }

    protected void onDraw(Canvas canvas) {
        canvas.drawRoundRect(this.mLineRect, this.mRoundRadius, this.mRoundRadius, this.mPaint);
    }

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (this.mPositionDataList != null && !this.mPositionDataList.isEmpty()) {
            if (this.mColors != null && this.mColors.size() > 0) {
                int currentColor = (Integer) this.mColors.get(Math.abs(position) % this.mColors.size());
                int nextColor = (Integer) this.mColors.get(Math.abs(position + 1) % this.mColors.size());
                int color = ArgbEvaluatorHolder.eval(positionOffset, currentColor, nextColor);
                this.mPaint.setColor(color);
            }

            PositionData current = FragmentContainerHelper.getImitativePositionData(this.mPositionDataList, position);
            PositionData next = FragmentContainerHelper.getImitativePositionData(this.mPositionDataList, position + 1);
            float nextLeftX;
            float rightX;
            float nextRightX;
            float leftX;
            if (this.mMode == 0) {
                leftX = (float) current.mLeft + this.mXOffset;
                nextLeftX = (float) next.mLeft + this.mXOffset;
                rightX = (float) current.mRight - this.mXOffset;
                nextRightX = (float) next.mRight - this.mXOffset;
            } else if (this.mMode == 1) {
                leftX = (float) current.mContentLeft + this.mXOffset;
                nextLeftX = (float) next.mContentLeft + this.mXOffset;
                rightX = (float) current.mContentRight - this.mXOffset;
                nextRightX = (float) next.mContentRight - this.mXOffset;
            } else {
                leftX = (float) current.mLeft + ((float) current.width() - this.mLineWidth) / 2.0F;
                nextLeftX = (float) next.mLeft + ((float) next.width() - this.mLineWidth) / 2.0F;
                rightX = (float) current.mLeft + ((float) current.width() + this.mLineWidth) / 2.0F;
                nextRightX = (float) next.mLeft + ((float) next.width() + this.mLineWidth) / 2.0F;
            }

            this.mLineRect.left = leftX + (nextLeftX - leftX) * this.mStartInterpolator.getInterpolation(positionOffset) + transToLeft;
            this.mLineRect.right = rightX + (nextRightX - rightX) * this.mEndInterpolator.getInterpolation(positionOffset) + transToLeft;
            this.mLineRect.top = (float) this.getHeight() - this.mLineHeight - this.mYOffset + transToTop;
            this.mLineRect.bottom = (float) this.getHeight() - this.mYOffset + transToTop ;
            this.invalidate();
        }
    }

    public void onPageSelected(int position) {
    }

    public void onPageScrollStateChanged(int state) {
    }

    public void onPositionDataProvide(List<PositionData> dataList) {
        this.mPositionDataList = dataList;
    }

    public float getYOffset() {
        return this.mYOffset;
    }

    public void setYOffset(float yOffset) {
        this.mYOffset = yOffset;
    }

    public float getXOffset() {
        return this.mXOffset;
    }

    public void setXOffset(float xOffset) {
        this.mXOffset = xOffset;
    }

    public float getLineHeight() {
        return this.mLineHeight;
    }

    public void setLineHeight(float lineHeight) {
        this.mLineHeight = lineHeight;
    }

    public float getLineWidth() {
        return this.mLineWidth;
    }

    public void setLineWidth(float lineWidth) {
        this.mLineWidth = lineWidth;
    }

    public float getRoundRadius() {
        return this.mRoundRadius;
    }

    public void setRoundRadius(float roundRadius) {
        this.mRoundRadius = roundRadius;
    }

    public int getMode() {
        return this.mMode;
    }

    public int getTransToLeft() { return transToLeft; }

    public void setTransToLeft(int transToLeft) { this.transToLeft = transToLeft*(-1); }

    public int getTransToTop() { return transToTop; }

    public void setTransToTop(int transToTop) { this.transToTop = transToTop*(-1); }

    public void setMode(int mode) {
        if (mode != 2 && mode != 0 && mode != 1) {
            throw new IllegalArgumentException("mode " + mode + " not supported.");
        } else {
            this.mMode = mode;
        }
    }

    public Paint getPaint() {
        return this.mPaint;
    }

    public List<Integer> getColors() {
        return this.mColors;
    }

    public void setColors(Integer... colors) {
        this.mColors = Arrays.asList(colors);
    }

    public Interpolator getStartInterpolator() {
        return this.mStartInterpolator;
    }

    public void setStartInterpolator(Interpolator startInterpolator) {
        this.mStartInterpolator = startInterpolator;
        if (this.mStartInterpolator == null) {
            this.mStartInterpolator = new LinearInterpolator();
        }

    }

    public Interpolator getEndInterpolator() {
        return this.mEndInterpolator;
    }

    public void setEndInterpolator(Interpolator endInterpolator) {
        this.mEndInterpolator = endInterpolator;
        if (this.mEndInterpolator == null) {
            this.mEndInterpolator = new LinearInterpolator();
        }

    }
}

Tabbar & Viewpager 动效库推荐及浅封

推荐这个库，很好用！

基于该库做的封装，以备之后用到

1 颜色扩展

2 位置扩展 LinePagerIndicator

代码

1 View封装,暴露设置正常状态与选中状态颜色的方法

2 设置指示器的位置，可以上下左右移动，而不是仅底部居中