学习仿QQ空间的头部可拉伸的ListView

仿QQ空间的头部可拉伸的ListView

• 继承listView
• 监听上拉下拉过界方法 overScrollBy方法
• 监听onScrollChanged方法
• 松手时回弹的效果 监听onTouchEvent 方法
  

  代码

  通过overScrollBy的这个方法可以判断出listView是够滚动过界，向下过界时那么就要放大图片
  zoomView.getLayoutParams().height=zoomView.getHeight()-deltaY;
zoomView.requestLayout();
zoomView 就是listView中Header的图片

      /*
       * 使用标准行为滚动视图以滚动超出正常内容边界。
       * 调用此方法的视图应该覆盖onOverScrolled（int，int，boolean，boolean）以响应滚动操作的结果。
       * 视图可以使用此方法来处理任何触摸或基于fling的滚动。
       */
      @Override
      protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
          if(deltaY>0){    // 向上过界
              Log.e("overScrollBy",deltaY+"");
                if(zoomView.getHeight()>imageHeight){  //如果现在图片的大小大于初始大小
                  zoomView.getLayoutParams().height=zoomView.getHeight()-deltaY;
                  zoomView.requestLayout();
                  }
          }else{   //向下过界
              Log.e("overScrollBy",deltaY+"");
              //错误写法
  //            zoomView.getLayoutParams().height=imageHeight-deltaY;
  //            requestLayout();
           //放大图片，增加图片的高
              zoomView.getLayoutParams().height=zoomView.getHeight()-deltaY;
              zoomView.requestLayout();
          }
          return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
   
      }

向下

向上

现在图片会随着手指向下放大，但是向上滑动式，却没有调用缩小，
这是因为数据量足够多也是就是listView的数据超过了一屏幕，向上滑动时没有达到向上越界的标准。
这时就要监听滑动的状态：
就要用到onScrollChanged方法了

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    
     View view= (View) zoomView.getParent();
 //  listView会划出去的高度
        int deltaY=view.getTop();
        //如果图片的的大小大于初始大小 就说明图片已经被放大了 
       //这时就要执行缩小的方法
        if(zoomView.getHeight()>imageHeight){
             zoomView.getLayoutParams().height=zoomView.getHeight()+deltaY;
//            zoomView.requestLayout();
            //由于划出去了一截，这时要让view的父容器重新摆放top同时，将header.top设置为0,(之前其实有一部分跑到屏幕上面了)
            view.layout(view.getLeft(),0,view.getRight(),view.getHeight());
            zoomView.requestLayout();
        }
        super.onScrollChanged(l, t, oldl, oldt);
    }

之后要在松手后自动回弹

 @Override
 public boolean onTouchEvent(MotionEvent ev) {
     int action=ev.getAction();
     if(action==MotionEvent.ACTION_UP){  //松手时
         ScroolAnimation scroolAnimation=new ScroolAnimation();
         scroolAnimation.setDuration(600);
         zoomView.startAnimation(scroolAnimation);
     }
 
     return super.onTouchEvent(ev);
 }

class ScroolAnimation extends Animation {
     @Override
     protected void applyTransformation(float interpolatedTime, Transformation t) {
         zoomView.getLayoutParams().height= (int) (zoomView.getHeight()-(zoomView.getHeight()-imageHeight)*interpolatedTime);
         super.applyTransformation(interpolatedTime, t);
     }
 }

整体代码

package com.ctoyo.zoomheaderview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.ListView;

/**
 * Created by DELL on 2017/7/31.
 */

/**
 * 1 监听上拉 ，下拉的动作
 * 2，拿到要放大缩小的图片
 * 3，添加回弹的效果
 */
public class ZoomHeaderListView extends ListView{

    private  int imageHeight;
    private View zoomView;
    public ZoomHeaderListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        imageHeight=context.getResources().getDimensionPixelSize(R.dimen.header_height);
    }

    //监听listView是否 划过头

    /*
     * 使用标准行为滚动视图以滚动超出正常内容边界。
     * 调用此方法的视图应该覆盖onOverScrolled（int，int，boolean，boolean）以响应滚动操作的结果。
     * 视图可以使用此方法来处理任何触摸或基于fling的滚动。
     */
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        if(deltaY>0){    // 向上过界
            Log.e("overScrollBy",deltaY+"");
            if(zoomView.getHeight()>imageHeight){
                zoomView.getLayoutParams().height=zoomView.getHeight()-deltaY;
                zoomView.requestLayout();
            }

        }else{   //向下过界
            Log.e("overScrollBy",deltaY+"");
            //错误写法
//            zoomView.getLayoutParams().height=imageHeight-deltaY;
//            requestLayout();

            zoomView.getLayoutParams().height=zoomView.getHeight()-deltaY;
            zoomView.requestLayout();
        }
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);

    }

    /**
     * 添加VIew
     * @param view
     */
    public void addZoomView(View view){
        zoomView=view;
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
       View view= (View) zoomView.getParent();
        int deltaY=view.getTop();
        //如果图片的
        if(zoomView.getHeight()>imageHeight){
            zoomView.getLayoutParams().height=zoomView.getHeight()+deltaY;
//            zoomView.requestLayout();
            //归零
            view.layout(view.getLeft(),0,view.getRight(),view.getHeight());
            zoomView.requestLayout();
        }
        super.onScrollChanged(l, t, oldl, oldt);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action=ev.getAction();
        if(action==MotionEvent.ACTION_UP){  //松手时
            ScroolAnimation scroolAnimation=new ScroolAnimation();
            scroolAnimation.setDuration(600);
            zoomView.startAnimation(scroolAnimation);
        }

        return super.onTouchEvent(ev);
    }

    class ScroolAnimation extends Animation {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            zoomView.getLayoutParams().height= (int) (zoomView.getHeight()-(zoomView.getHeight()-imageHeight)*interpolatedTime);
            super.applyTransformation(interpolatedTime, t);
        }
    }
}

public class MainActivity extends AppCompatActivity {
    ZoomHeaderListView zoomHeaderListView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        zoomHeaderListView= (ZoomHeaderListView) findViewById(R.id.zoom);
        View header= LayoutInflater.from(this).inflate(R.layout.header,null,false);
        ImageView zoomView= (ImageView) header.findViewById(R.id.image);

        //添加一个头部
        zoomHeaderListView.addHeaderView(header);
        zoomHeaderListView.addZoomView(zoomView);
        zoomHeaderListView.setAdapter(new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,new String[]{
                "1","2","3","4" ,
                "5","6","7","8"
        }));
    }
}

header的布局文件

注意 要把scaleType设置成centerCrop
图像的高写在dimen中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image"
        android:scaleType="centerCrop"
        android:src="@mipmap/bolt"
        android:layout_width="match_parent"
        android:layout_height="@dimen/header_height" />
</LinearLayout>