Android 实现局部图片滑动指引效果

Android 实现局部图片滑动指引效果

而ViewPager的事件监听器代码如下：

　　// 滑动页面更改事件监听器
  private class ImagePageChangeListener implements onPageChangeListener {
    @Override 
    public void onPageScrollStateChanged(int arg0) { 
      // TODO Auto-generated method stub 
 
    } 
 
    @Override 
    public void onPageScrolled(int arg0, float arg1, int arg2) { 
      // TODO Auto-generated method stub 
 
    } 
 
    @Override 
    public void onPageSelected(int index) { 
      pageIndex = index;
      slideLayout.setPageIndex(index);
      tvSlideTitle.setText(parser.getSlideTitles()[index]);
      
      for (int i = 0; i < imageCircleViews.length; i++) { 
 imageCircleViews[index].setBackgroundResource(R.drawable.dot_selected);
 
 if (index != i) { 
   imageCircleViews[i].setBackgroundResource(R.drawable.dot_none); 
 } 
      }
    } 
  }
 

　　事件监听器中主要在回调函数onPageSelected(int index)中变换标题和圆点图片。 

　　由于滑动区域下方的内容是不变的，也就是不滑动的，正如在我在上面提到的，内容可能会超出屏幕的范围，所以我们需要使用ScrollView以便内容过多的时候显示滚动条。可能一部分朋友会想到，要显示滚动条我也知道使用ScrollView。我想在这里说的是，这里即有ViewPager控件，也有ScrollView，如果两个View单独使用不会有什么问题。然而不幸的是，两个一结合使用就出现了问题。什么问题呢？就是在滑动图片时出现反弹的现象，就是在滑动时很难滑动，我滑动时感觉很吃力，而且图片就是滑动不过去，这个就是两个View之间的冲突，因为两个View都是滑动的View，都会计算相应的位置和判断相应的距离。 

　　我们如何来解决这个冲突呢？这里我们需要重写ScrollView的onInterceptTouchEvent()回调函数。需要在程序里新加一个ScrollViewExtend类并继承自ScrollView，下面是其代码：

package com.image.indicator.control;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;


public class ScrollViewExtend extends ScrollView {
  // 滑动距离及坐标
  private float xDistance, yDistance, xLast, yLast;

  public ScrollViewExtend(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  @Override
  public boolean onInterceptTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
      case MotionEvent.ACTION_DOWN:
 xDistance = yDistance = 0f;
 xLast = ev.getX();
 yLast = ev.getY();
 break;
      case MotionEvent.ACTION_MOVE:
 final float curX = ev.getX();
 final float curY = ev.getY();
 
 xDistance += Math.abs(curX - xLast);
 yDistance += Math.abs(curY - yLast);
 xLast = curX;
 yLast = curY;
 
 if(xDistance > yDistance){
   return false;
 } 
    }

    return super.onInterceptTouchEvent(ev);
  }
}

感谢阅读，希望能帮助到大家，谢谢大家对 本站的支持！