[github高级控件] 带你走近 -> CircleIndicator指示器原点动画切换

时间：2022-07-28 10:30:13

分析github上CircleIndicator指示器切换动画，源码下载地址

[github高级控件] 带你走近 -> CircleIndicator指示器原点动画切换
思路：
1.画n个小圆点排列到布局中
2.再画一个moving小圆，结合view layer 分层呈现在画布中
3.结合viewpager addOnPageChangeListener不断的改变moving item位置

思路清晰了开始撸代码：

定义自定义属性

<resources>

    <declare-styleable name="CircleIndicator">
        <attr name="ci_radius" format="dimension"/>
        <attr name="ci_margin" format="dimension"/>
        <attr name="ci_background" format="color|integer"/>
        <attr name="ci_selected_background" format="color|integer"/>
        <attr name="ci_gravity">
            <enum name="left" value="0"/>
            <enum name="center" value="1"/>
            <enum name="right" value="2"/>
        </attr>
        <attr name="ci_mode">
            <enum name="inside" value="0"/>
            <enum name="outside" value="1"/>
            <enum name="solo" value="2"/>
        </attr>
    </declare-styleable>
</resources>

初始化属性

 private void handleTypedArray(Context context, AttributeSet attrs) {
        if(attrs == null)
            return;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleIndicator);
        mIndicatorRadius = typedArray.getDimensionPixelSize(R.styleable.CircleIndicator_ci_radius, DEFAULT_INDICATOR_RADIUS);
        mIndicatorMargin = typedArray.getDimensionPixelSize(R.styleable.CircleIndicator_ci_margin, DEFAULT_INDICATOR_MARGIN);
        mIndicatorBackground = typedArray.getColor(R.styleable.CircleIndicator_ci_background, DEFAULT_INDICATOR_BACKGROUND);
        mIndicatorSelectedBackground = typedArray.getColor(R.styleable.CircleIndicator_ci_selected_background,DEFAULT_INDICATOR_SELECTED_BACKGROUND);
        int gravity = typedArray.getInt(R.styleable.CircleIndicator_ci_gravity,DEFAULT_INDICATOR_LAYOUT_GRAVITY);
        mIndicatorLayoutGravity = Gravity.values()[gravity];
        int mode = typedArray.getInt(R.styleable.CircleIndicator_ci_mode,DEFAULT_INDICATOR_MODE);
        mIndicatorMode = Mode.values()[mode];
        typedArray.recycle();
    }

上面这两项没什么可说，自定义属性套路，跟着玩就可以了。

给指示器设置viewpager

setViewPager（Viewpager viewpager）；

绘制指示器背景圆

//创建背景圆
private void createTabItems() {
        for (int i = 0; i < viewPager.getAdapter().getCount(); i++) {
        //new 椭圆对象，设置给ShapeDrawable
            OvalShape circle = new OvalShape();
            ShapeDrawable drawable = new ShapeDrawable(circle);
            //保存drawable，paint 到对应的holder
            ShapeHolder shapeHolder = new ShapeHolder(drawable);
            Paint paint = drawable.getPaint();
            paint.setColor(mIndicatorBackground);
            paint.setAntiAlias(true);
            shapeHolder.setPaint(paint);
            tabItems.add(shapeHolder);
        }
    }

重写layout方法
通过重写layout方法，把保存在shapeHolder中的小圆确定到画布上位置

  @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //view 宽高
        final int width = getWidth();
        final int height = getHeight();
        layoutTabItems(width, height);
    }

   private void layoutTabItems(final int containerWidth,final int containerHeight){
       if(tabItems == null){
           throw new IllegalStateException("forget to create tabItems?");
       }
       //y坐标
       final float yCoordinate = containerHeight*0.5f;
       //小圆起始位置
       final float startPosition = startDrawPosition(containerWidth);
       for(int i=0;i<tabItems.size();i++){
           ShapeHolder item = tabItems.get(i);
           item.resizeShape(2* mIndicatorRadius,2* mIndicatorRadius);
           item.setY(yCoordinate- mIndicatorRadius);
           //x=起始位置+（小圆直径+小圆之间间距）*第i个圆
           float x = startPosition + (mIndicatorMargin + mIndicatorRadius*2)*i;
           item.setX(x);
       }

    }

小圆起始位置的确定，根据不同模式计算：

 private float startDrawPosition(final int containerWidth){
        if(mIndicatorLayoutGravity == Gravity.LEFT){
            //左对齐模式，起始位置为0
            return 0;
         }
         //居中对齐 ，这种模式最重要
         //要计算其实位置，可以先计算指示器的总长度，然后用（view的宽-指示器长度）／2；就是我们想要的起始位置
         //指示器长度=item 个数*（小圆直径+小圆间间距）-多计算的1个间距。 
         // 如：（0 0 0 0 0） 5个圆 只有4个间距
        float tabItemsLength = tabItems.size()*(2* mIndicatorRadius + mIndicatorMargin)- mIndicatorMargin;
        if(containerWidth<tabItemsLength){
            return 0;
        }
        if(mIndicatorLayoutGravity == Gravity.CENTER){
        //（view的宽-指示器长度）／2
            return (containerWidth-tabItemsLength)/2;
        }
        //靠右对齐模式 起始位置=view宽-指示器长度
        return containerWidth - tabItemsLength;
    }

重写onDraw方法把圆绘制到画布中

private void drawItem(Canvas canvas,ShapeHolder shapeHolder )
    {
        canvas.save();
        canvas.translate(shapeHolder.getX(),shapeHolder.getY());
        shapeHolder.getShape().draw(canvas);
        canvas.restore();
    }

到这里，我们就可以运行一下了，看看指示器的背景是否已经绘制到屏幕上了，要是没问题，就可以开始下一步了

绘制被选中的小圆

基本上与绘制背景圆类似，先创建一个drawable，然后重写layout确定小圆到画布上位置，然后重写ondraw方法绘制。

//创建被选中的小圆，代码与画背景圆基本相同
 private void createMovingItem() {
        OvalShape circle = new OvalShape();
        ShapeDrawable drawable = new ShapeDrawable(circle);
        movingItem = new ShapeHolder(drawable);
        Paint paint = drawable.getPaint();
        paint.setColor(mIndicatorSelectedBackground);
        paint.setAntiAlias(true);
    //设置几种相交模式，根据需要来设置
        switch (mIndicatorMode){
            case INSIDE:
                paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
                break;
            case OUTSIDE:
                paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
                break;
            case SOLO:
                paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
                break;
        }
        movingItem.setPaint(paint);
    }

//重写layout
//position被选中圆位置；positionOffset滑动过程中位置偏移量[0,1)
   private void layoutMovingItem(final int position,final float positionOffset){
        if(movingItem == null){
            throw new IllegalStateException("forget to create movingItem?");
        }

        if(tabItems.size() == 0) {
            return;
        }
        ShapeHolder item = tabItems.get(position);
        movingItem.resizeShape(item.getWidth(), item.getHeight());
        //x=起始位置+（小圆直径+小圆之间间距）*偏移量
        //起始位置=item.getX()
        float x = item.getX()+(mIndicatorMargin + mIndicatorRadius*2)*positionOffset;
        movingItem.setX(x);
        movingItem.setY(item.getY());

    }
    重写ondraw方法，与前面画指示器的一致

完成了指示器背景与被选中的小圆绘制，自定义view也完成的大部分，可以运行下，这时候看到的效果是，被选中的小圆停留在指示器第一个小圆位置，不会随着viewpager滑动而滑动。

让被选中的圆动起来

通过viewpager的addOnPageChangeListener监听，在滑动过程中不断的改变moving圆的起始位置，刷新view来实现小圆动起来。

  viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                //通过监听onPageScrolled让小圆跟随viewpager运动
                if(mIndicatorMode != Mode.SOLO){
                    trigger(position,positionOffset);
                }
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                if(mIndicatorMode == Mode.SOLO){
                    trigger(position,0);
                }
            }
        });



    private void trigger(int position,float positionOffset){
    // 不断的改变当前被选中圆的位置，及位置偏移量,然后通过requestLayout，invalidate重新计算布局刷新view
        CircleIndicator.this.mCurItemPosition = position;
        CircleIndicator.this.mCurItemPositionOffset = positionOffset;
        requestLayout();
        invalidate();
    }

整个CircleIndicator实现完成，这时候运行代码，就会出现图中指示器原点切换动画

标签：

相关文章