仿写朴朴app（二）

今天来写这个小控件：

不起眼的小控件

可能有同学要说了，这不就是ViewPagerIndicator么，去github上找xxxx。
嗯，这确实也是个解决方案，但是开头我说了，尽量不用第三方UI库，而且就朴朴里面的这个Indicator，功能很简单，也基本不存在什么太大的扩展性需求，自己写能节约一些性能。很多时候，我们只需要第三方库的一个功能，但是引用的库却包含很多我们用不到的功能，这就凭空增加了安装包的体积。
哪怕在kotlin工程里，自定义控件我一般也用java写，以便复用到java工程，这个也不例外。
操作朴朴app我们发现，这个indicator没有复杂的效果，只是在放图片的viewpager翻页的时候指示器改变状态，所以没必要继承ViewGroup，我们直接继承view，自己去画里面的内容。
首先在styleable里定义几个属性：

    <declare-styleable name="SimpleIndicator">
        <!-- 指示器每个子项的宽度 -->
        <attr name="indicatorItemWidth" format="dimension|reference"/>
        <!-- 指示器每个子项间的间隔 -->
        <attr name="indicatorItemPadding" format="dimension|reference"/>
        <!-- 指示器每个子项的圆角半径 -->
        <attr name="indicatorItemRadius" format="dimension|reference"/>
        <!-- 指示器选中项的颜色 -->
        <attr name="indicatorItemSelectedColor" format="color|reference"/>
        <!-- 指示器未选中项的颜色 -->
        <attr name="indicatorItemNormalColor" format="color|reference"/>
    </declare-styleable>

在这里，子项的高度直接取外层高度就行了，因为这个控件并不需要padding。

为了让这个控件宽度能够使用wrap_content指定，必须重写它的onMeasure方法，根据我们自定义的子项宽度和间距来计算总宽度,MeasureSpec的用法网上一搜一大片，不再赘述：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //宽度使用wrap_content的时候
        if(widthMode == MeasureSpec.AT_MOST){
            float width = getPaddingLeft() + getPaddingRight() + itemWidth * size + (size - 1) * itemPadding;
            if(width < widthSize)
                widthSize = (int)width;
            else
                throw new IllegalStateException("您设置的子项目宽度和间距超过了可用宽度");
        }
        //高度必须指定为具体值
        if(heightMode != MeasureSpec.EXACTLY){
            throw new IllegalStateException("indicator的高度必须指定为具体数值");
        }
        setMeasuredDimension(widthSize, heightSize);
    }

然后是子项绘制位置的初始化：

    private void initItemRectangles(){
        itemRectangles = new RectF[size];
        int height = getMeasuredHeight();
        float itemDist = itemWidth + itemPadding;
        for(int i = 0; i < size; i++){
            float left = i * itemDist;
            float right = left + itemWidth;
            itemRectangles[i] = new RectF(left, 0, right, height);
        }
    }

这个初始化应该在onDraw里调用并且只调用一次以避免多余的计算，大家可能注意到了drawXXXX这类方法也有不用RectF的重载，直接以上下左右坐标为入参，但是如果你那样用，每次onDraw的时候都会重新计算一次，作为硬件的老板，我们要学会为这些可爱的员工减负啊。
上面的size哪来的？当然是跟viewPager关联的时候取到的了：

    public void setupWithViewPager(ViewPager viewPager){
        PagerAdapter adapter = viewPager.getAdapter();
        if(adapter == null)
            throw new IllegalStateException("this viewPager has not set adapter yet");
        this.size = adapter.getCount();
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                selectedIndex = i;
                invalidate();
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

最后是onDraw方法：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(itemRectangles == null)
            initItemRectangles();
        for(int i = 0; i < itemRectangles.length; i++){
            drawItem(canvas, itemRectangles[i], i == selectedIndex);
        }
    }
    protected void drawItem(Canvas canvas, RectF rect, boolean selected){
        paint.setColor(selected ? selectedColor : normalColor);
        canvas.drawRoundRect(rect, itemRadius, itemRadius, paint);
    }

这里把drawItem抽成单独的方法，而且是protected，一般这种Indicator的不同只是图形不同，这样如果你需要简单扩展的话，改这个方法就可以了。
到这里，自定义小控件就写完了，上一张效果图：

最终效果

本项目地址：仿写朴朴app