`
亚当爱上java
  • 浏览: 696968 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ListView中重写overScrollBy()方法 实现拉出回弹效果

 
阅读更多
           第一部分  原理分析
      IOS上的bounce功能给人的感觉很爽,当一个可以滚动的区域被拖到边界时,它允许用户将内容拖过界,放手后再弹回来,以一种非常棒的方式提示了用户边界的存在,是IOS的一大特色。android2.3新增了overscroll功能,听名字就知道应该是bounce功能的翻版,但也许是出于专利方面的考虑,google的默认实现跟IOS有所不同,它只是在list拖到边界处时做了一个发光的动画,个人觉得体验比IOS差远了。而且这个黄色的发光在黑色背景下虽然效果不错,在其它背景下可就难说了,因此很多人想要关掉它。

      日前google上搜索“android overscroll”,对此效果的介绍很多,但关于其具体使用方式和实现,则很少涉及,偶有提及,也经常答非所问或似是而非,反而误导了别人。于是我查阅了android相关源码,并做了一些测试,在此讲讲我的理解。

      首先是overscroll功能本身,在最顶层的View类提供了支持,可通过setOverScrollMode函数控制其出现条件。但其实View中并没有实现overscroll功能,它仅仅提供了一个辅助函数overScrollBy,该函数根据overScrollMode和内容是否需要滚动控制最大滚动范围,最后将计算结果传给onOverScrolled实现具体的overscroll功能,但此函数在View类中是全空的。

      overscroll功能真正的实现分别在ScrollView、AbsListView、HorizontalScrollView和WebView中各有一份,代码基本一样。以ScrollView为例,它在处理笔点移动消息时调用overScrollBy来滚动视图,然后重载了overScrollBy函数来实现具体功能,其位置计算通过OverScroller类实现。OverScroller作为一个计算引擎,应该是一个独立的模块,具体滚动效果和范围都不可能通过它来设置,我觉得没有必要细看。但滚动位置最终是它给出的,那相关数据肯定要传递给它,回头看overScrollBy函数,它有两个控制overScroll出界范围的参数,几个实现里面都是取自ViewConfiguration.getScaledOverscrollDistance,而这个参数的值在我的源码中都是0,而且我没找到任何可以影响其结果的设置。

      真悲催,绕了半天,android的默认实现里面根本没有给出overscroll功能,它只是提供了实现机制,要想用起来还得应用程序自己显式重写相关控件,估计还有一层隐含的意思,法律风险自负。在我的系统中一试,果然一个像素都不能拉出界。但那个闪光是怎么回事呢?

      在处理笔点消息处,overScrollBy后面不远处有一段mEdgeGlowTop的操作代码,看名字就像,用它一搜,相关机制就全明白了。mEdgeGlowTop在setOverScrollMode函数时创建,它使用的图片都是系统中固有的,甚至不能通过theme改变。它的实现原理也很简单,仅仅是两张png图片的合成,通过透明度的变化制造闪光的效果。更无语的是它既不能被应用程序访问,也不受任何控制,要关闭它的唯一办法是setOverScrollMode(View.OVER_SCROLL_NEVER)。否则就重写onTouchEvent函数吧,想干啥都可以,只是得自己做。

      谈到overScroll,很多文章都提到了ListView的setOverscrollHeader和setOverscrollFooter,很多人想通过这个来控制那个闪光效果。这两玩意不但可以通过函数设置,也可以在xml中指定,相当方便。但最后很多人发现没有任何作用,百思不得其解。其实这两张图片是用来作为overScroll拖过界时的背景的,默认系统不能拖过界,自然永远都看不到,有些定制的系统中能拖出界几个像素,但也很难看清。

                第二部分  代码实现
     1. 在View中增加了overSrollBy方法,用于记录x, y 轴上滚动。

     2. 在AbsListView的onTouchEvent中判断是否到达边界(顶部 或 底部) ,然后调用view.overScrollBy ,传入 mScrollY等参数

     3. overScrollBy 最终赋值给View的mScrollX, mScrollY 两个变量

     4. 在AbsListView中调用完overScrollBy之后,调用invalidate重绘



自定义ListView
public class BounceListView extends ListView{
    private static final int MAX_Y_OVERSCROLL_DISTANCE = 200;
     
    private Context mContext;
    private int mMaxYOverscrollDistance;
     
    public BounceListView(Context context){
        super(context);
        mContext = context;
        initBounceListView();
    }
     
    public BounceListView(Context context, AttributeSet attrs){
        super(context, attrs);
        mContext = context;
        initBounceListView();
    }
     
    public BounceListView(Context context, AttributeSet attrs, int defStyle){
        super(context, attrs, defStyle);
        mContext = context;
        initBounceListView();
    }
     
    private void initBounceListView(){
        //get the density of the screen and do some maths with it on the max overscroll distance
        //variable so that you get similar behaviors no matter what the screen size
         
        final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
        final float density = metrics.density;
         
        mMaxYOverscrollDistance = (int) (density * MAX_Y_OVERSCROLL_DISTANCE);
    }
     
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent){ 
        //This is where the magic happens, we have replaced the incoming maxOverScrollY with our own custom variable mMaxYOverscrollDistance; 
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, mMaxYOverscrollDistance, isTouchEvent);  
    }
     
}



    public class MainActivity extends Activity {  
      
        @Override  
        public void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
              
            LinearLayout linearLayout = new LinearLayout(this);  
            linearLayout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
              
            setContentView(linearLayout);  
              
              
            BounceListView bounceListView = new BounceListView(this);  
              
            String[] data = new String[30];  
            for (int i = 0; i < data.length; i++) {  
                data[i] = "回弹效果 " + i;  
            }  
              
            ArrayAdapter<String> arrayAdapter =   
                    new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, data);  
              
            bounceListView.setAdapter(arrayAdapter);  
              
            linearLayout.addView(bounceListView);  
        }  
          
          
          
    }  

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics