Android自定义view之ViewPager指示器——2

Android自定义view之ViewPager指示器——2

上一篇《Android自定义view之ViewPager指示器——1》中我们一起写了测量和布局的流程。本篇我们继续讲解事件分发，以及其他的功能性方法。

5. 事件分发

按照之前我们讲的事件分发流程，作为一个ViewGroup，按照顺序，首先来到的是onInterceptTouchEvent()方法。

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return true;
    }

这个方法是决定当前的ViewGroup是否要拦截触摸事件。我们想要自己处理这些事件，所以返回true即可。
接下来事件就会到达onTouchEvent()方法。

    /*本次事件流是否已经被判断为滑动事件*/
    private boolean moved = false;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction())
        {
            /*按下的时候，对各个值进行赋值*/
            case MotionEvent.ACTION_DOWN:
                newX = event.getRawX();
                newY = event.getRawY();
                downX = newX;
                downY = newY;
                break;
            /*发生滑动时，先更新值，然后用前一次触摸点的坐标和本次坐标进行计算，如果x方向上的移动距离大于touchSlop，那么
            * 就判断为滑动。*/
            case MotionEvent.ACTION_MOVE:
                lastX = newX;
                lastY = newY;
                newX = event.getRawX();
                newY = event.getRawY();
                dx = newX - lastX;
                dy = newY - lastY;
                if(dx >= touchSlop)
                {
                    moved = true;
                }
                /*判断TextView的布局。tags太多的话，是允许滑动的，但是滑动也有限制，第一个tag的最左边不可以大于指示器的paddingLeft。
                * 最后一个tag的最右边不可以小于（height - paddingRight）。然后以这个条件来计算滑动后的第一个tag最左边的位置。
                * 并进行重新布局，横线的位置及长短也要相应改变。*/
                int left = tagMap.get(tags.get(0)).getLeft();
                int right = tagMap.get(tags.get(tags.size() - 1)).getRight();
                int length = right - left;
                if (length < getMeasuredWidth() - getPaddingLeft() - getPaddingRight())
                {

                }else if(left + dx > getPaddingLeft())
                {
                    left = getPaddingLeft();
                }else if(right + dx < (getMeasuredWidth() - getPaddingRight()))
                {
                    right = getMeasuredWidth() - getPaddingRight();
                    left = right - length;
                }else
                {
                    left += dx;
                }
                textOffset = left;
                layoutChildren(left, indicatorLine.getLeft() + (left - tagMap.get(tags.get(0)).getLeft()), indicatorLine.getWidth());

                break;
            /*抬起时，判断从起点到落点的距离是否超过了touchSlop，如果不是，我们就判断它是点击事件，执行点击回调函数。否则就什么也不做。另外
            * 将moved设为false，收尾。*/
            case MotionEvent.ACTION_UP:

                lastX = newX;
                lastY = newY;
                newX = event.getRawX();
                newY = event.getRawY();
                dx = newX - lastX;
                dy = newY - lastY;
                /*判断为点击事件*/
                if(!moved && Math.abs(newX - downX) < touchSlop && Math.abs(newY - downY) < touchSlop)
                {

                    for(int i = 0; i < tags.size(); i++)
                    {
                        TextView child = tagMap.get(tags.get(i));
                        if(child.getLeft() <= newX && child.getRight() >= newX)
                        {
                            notifyOnTagClickedListsners(i);
                            break;
                        }
                    }
                }
                moved = false;
                break;


        }
        return super.onTouchEvent(event);
    }

首先，我们有个变量moved，来判断当前事件流中是否出现过满足条件的滑动事件。根据这个情况我们可以在ACTION_UP时判断是否要判断为点击事件并调用点击函数。
方法中出现的几个变量需要说一下：newX和newY是新的事件的坐标；lastX和lastY是上一个事件的坐标；downX和downY是ACTION_DOWN事件的坐标。
另外有几个点需要说一下：
1. 在滑动事件的判断中，我们以前一次和本次事件的坐标差来判断，其实也可以再加入以本次事件和ACTION_DOWN事件坐标值差来判断，毕竟前者只计算相邻的两次事件的坐标差，如果用户缓慢移动的话，那可能滑了很久也不会被判断为移动，如果两种结合起来，判断会更为准确。
2. 在ACTION_MOVE的case中调用layoutChildren的时机问题。严格来说应该在确实判断为滑动之后才调用来重新布局。不过这个控件因为体量较小，并且目前这种策略也没有什么问题。但是如果在写比如ListView这种大体量并且触摸操作很频繁的控件时还是要严格一点。
3. 没有对多指触摸进行优化，这会导致多指操作时出现跳动的情况。这在可滑动控件中是个比较严重的问题，不过好在指示器也并没有双指操作的设定。

我们主要的工作是在ACTION_MOVE的case里进行的，其实就是根据手指的移动距离来布局子view。onTouchEvent方法是需要返回一个boolean的，我们直接返回了父类的onTouchEvent()的返回值。这里其实是View类的onTouchEvent()方法，因为ViewGroup并没有重写这个方法。在View类中查看这个方法，我们发现只要这个View是可点击的，无论单击还是长按，这个方法就会返回true。而如果你仔细看了我们的构造函数，就会看到在里面我们写了this.setClickable(true)。简而言之就是要在这里返回一个true表示我们消费了这个事件，所以你可以直接返回true。不过这里另外讲了一个点而已。

6. 与ViewPager交互

现在触摸事件也已经完成了，不过还没完，因为指示器肯定是需要和ViewPager做一些交互的，根据当前ViewPager的位置来进行变化。那我们就写一个监听ViewPager变化的方法。

    /**使用在ViewPager.OnPageChangeListener.onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
    * 方法中，将三个参数原样传到该函数即可。
     * @param position 当前可见的第一个页面的序号，如果positionOffset不为0,那么position + 1页面也是可见的。
     * @param positionOffset 取值范围[0, 1)，表示当前position页面的偏离范围。
     * @param positionOffsetPixels 当前position页面的偏离值。
    * */
    public void listen(int position, float positionOffset, int positionOffsetPixels)
    {
        currentPosition = position;
        /*需要让被选中的tag完整地显示出来，因此在tag布局在指示器的显示范围之外时需要移动，并且修改选中的和未选中的字的颜色。*/
        if(positionOffset != 0.0f)
        {
            TextView current = tagMap.get(tags.get(position));
            TextView old = tagMap.get(tags.get(position + 1));
            int spaceBetweenTags = old.getLeft() - current.getLeft();
            int lineLeft = current.getLeft() + (int)(spaceBetweenTags * positionOffset);

            int currentLength = current.getWidth();
            int oldLength = old.getWidth();
            int lineLength = currentLength + (int)((oldLength - currentLength) * positionOffset);
            int lineRight = lineLeft + lineLength;
            if(lineLength >= (getMeasuredWidth() - getPaddingLeft() - getPaddingRight()))
            {
                textOffset += getPaddingLeft() - lineLeft;
                lineLeft = getPaddingLeft();
            }else if(lineLeft < getPaddingLeft())
            {
                textOffset += getPaddingLeft() - lineLeft;
                lineLeft = getPaddingLeft();
//                lineLength = lineRight - lineLeft;
            }else if(lineRight > (getMeasuredWidth() - getPaddingRight()))
            {
                textOffset -= lineRight - (getMeasuredWidth() - getPaddingRight());
                lineRight = (getMeasuredWidth() - getPaddingRight());
//                lineLength = lineRight - lineLeft;
                lineLeft = lineRight - lineLength;
            }
            layoutChildren(textOffset, lineLeft, lineLength);

            current.setTextColor(evaluateColor(textColor, selectedTextColor, 1 - positionOffset));
            old.setTextColor(evaluateColor(textColor, selectedTextColor, positionOffset));
        }else
        {
            /*positionOffset == 0时说明此时已经完成了页面切换，有且仅有一个页面是被完整显示的，此时只要根据被选择的序号来布局即可。关于颜色
            * 改变，因为在positionOffset == 0时我们已经丢失了页面切换的信息，所以无法得知上一个被选中的页面是哪个。另外，positionOffset == 0
            * 的情况实际上很极端，因此对于这种情况的处理并不影响大局，连这种情况的位置布局都可以不必考虑*/
            TextView current = tagMap.get(tags.get(position));
            if(current.getLeft() < getPaddingLeft())
            {
                textOffset += getPaddingLeft() - current.getLeft();
            }else if(current.getRight() > getMeasuredWidth() - getPaddingRight())
            {
                textOffset += getMeasuredWidth() - getPaddingRight() - current.getRight();
            }
            layoutChildren(textOffset, position);
        }

    }

上面的函数就是和ViewPager交互的主要函数，它可以监听ViewPager的页面转换信息并且同步改变布局。注意positionOffset == 0.0f的情况是极端的，它只会在整个变换过程中占非常小的占比，因此对于它的处理是不影响大局的，即使将else分支里的代码整个删除也不会有问题。
在这里主要是变化tag和横线的位置，特殊情况是即将被选中的tag没有被完全显示，此时我们就需要根据情况改变tag的位置，使得最终被选中的tag能够完全显示。由于tag不一定都是等长的，因此横线的宽度也要根据变化的百分比进行改变，同样的还有文字的颜色。这里的positionOffset事实上就是变化的百分比，但是它并不是总是按照从0到1的顺序变化，为了方便，下面举个例子：
1. 如果当前显示的页面1号页面，然后我们向左滑动，想要显示2号页面。在没有滑动时，position == 1，positionOffset == 0。在滑动开始只到2号页面完全显示出来时，position == 1，而positionOffset则是从0到1开始变化（并不会到达1）。到2号页面完全显示出来，页面切换完成时，position == 2，positionOffset == 0。
2. 如果向右滑动，想要显示0号页面，在没有滑动时，情况和上面是一样的。在滑动过程中，position == 0，而positionOffset则是从1到0开始减小（并不会等于1）。到0号页面完全显示出来时，position == 0，positionOffset == 0。

可以看出position总是显示的第一个页面的序号，而positionOffset就是显示的第一个页面到后一个页面的变化的百分比。

7. 其他的功能性函数

添加删除tag

    public void addTags(String[] tags)
    {
        for(String s : tags)
        {
            addTag(s);
        }
    }

    public void addTag(String tag, int... index)
    {
        log.v("add tag");
        /*新建TextView以容纳tag，并且TextView的宽和高都是WRAP_CONTENT的*/
        TextView t = new TextView(getContext());

        ViewGroup.MarginLayoutParams layoutParams = new ViewGroup.MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        t.setLayoutParams(layoutParams);
        t.setText(tag);
        t.setTextColor(textColor);
        t.setTextSize(textSize);
        t.setPadding(2,2,2,2);

        if(index != null && index.length != 0)
        {
            if(index[0] <= currentPosition)
            {
                currentPosition++;
            }
            this.tags.add(index[0], tag);

        }else
        {
            this.tags.add(tag);
        }

        this.tagMap.put(tag, t);
        this.addView(t);

    }

    public void removeTag(String tag)
    {
        tags.remove(tag);
        tagMap.remove(tag);
        removeAllViews();
        layoutChildren(textOffset, currentPosition);
    }

获取当前选中tag的序号

    public int getCurrentPosition()
    {
        return currentPosition;
    }

---

监听器相关

    public void addOnTagClickedListener(OnTagClickedListener l)
    {
        if(!onTagClickedListeners.contains(l))
        {
            onTagClickedListeners.add(l);
        }
    }

    public void removeOnTagClickedListener(OnTagClickedListener l)
    {
        if(onTagClickedListeners.contains(l))
        {
            onTagClickedListeners.remove(l);
        }
    }

    /*回调监听器的方法，以当前被点击的tag序号为参数*/
    private void notifyOnTagClickedListsners(int position)
    {
        if(onTagClickedListeners.size() != 0)
        {
            for(OnTagClickedListener l : onTagClickedListeners)
            {
                l.onTagClicked(position);
            }
        }
    }

    /**tag点击监听器接口*/
    public interface OnTagClickedListener
    {
        public void onTagClicked(int position);
    }

颜色转换
颜色要各通道单独变化才可以，如果是将颜色整体作为一个int值来变化，那么中间就会出现其他颜色。

    private int evaluateColor(int fromColor, int toColor, float percent)
    {
        int fromA = (fromColor >> 24) & 0xff;
        int fromR = (fromColor >> 16) & 0xff;
        int fromG = (fromColor >> 8) & 0xff;
        int fromB = fromColor & 0xff;

        int toA = (toColor >> 24) & 0xff;
        int toR = (toColor >> 16) & 0xff;
        int toG = (toColor >> 8) & 0xff;
        int toB = toColor & 0xff;

        int dA = (int)((toA - fromA) * percent);
        int dR = (int)((toR - fromR) * percent);
        int dG = (int)((toG - fromG) * percent);
        int dB = (int)((toB - fromB) * percent);

        int color = ((fromA + dA) << 24) | ((fromR + dR) << 16) | ((fromG + dG) << 8) | ((fromB + dB));
        return color;
    }

8. 使用方法

按照正常控件的使用方法即可。初始化后添加tag

indicator = (TextViewPagerIndicator)findViewById(R.id.view_pager_indicator);
indicator.addTag(tag);//可添加多个tag

然后设置各种回调函数即可。

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                indicator.listen(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        indicator.addOnTagClickedListener(new TextViewPagerIndicator.OnTagClickedListener() {
            @Override
            public void onTagClicked(int position) {
                viewPager.setCurrentItem(position, true);
            }
        });

9. 总结

这次我们真正从0开始自定义了一个指示器，用到了之前我们讲过的很多知识点。虽然这个自定义view还有一些瑕疵，但是整体已经可以使用了。这是我早期写的一个自定义view，后面会有比这个更加复杂的。有的部分分析写得比较简单，但是代码中的注释写得很明白的，并不复杂。

感兴趣的同学也可以上我的Github上查看，其中的CustomView工程有很多更复杂更高级的自定义view。也欢迎大家关注一波。源码也在这个工程中。