仿QQ空间之打造个性化可拉伸头部控件

最近有研究了QQ空间可拉伸头部控件的listView。如何去做呢？这里使用了自定义listView的方法。先看效果图吧：

究竟如何去做呢？
可以用的方法有：
* 1.继承 extends ViewGrop
* 2.RecycleView +Behavior+CoordinateLayout
* 3.ViewGroup 组合控件
* 4.ListView + headView

这次我们主要用原生的自定义listView去做。
- 1.extends 继承 ListView
- 2.监听过度监听，在缩放头部图片重写overScrollBy方法
- 重写onScrollChanged方法监听度放大时，执行缩小图片
- 重写onTouchEvent方法，执行触摸时释放事件的处理

/**
 * 类功能描述：</br>
 *  仿QQ空间之打造个性化可拉伸头部控件</br>
 * @author yuyahao
 * @version 1.0 </p> 修改时间：</br> 修改备注：</br>
 */

public class CustomerScrollZoomListView extends ListView{
    private ImageView imageView;
    private int mMeasureWeight;
    public CustomerScrollZoomListView(Context context, AttributeSet attrs) {
        super(context, attrs);
         mMeasureWeight = context.getResources().getDimensionPixelSize(R.dimen.dp200);
    }
    public CustomerScrollZoomListView(Context context) {
        super(context);
    }
    public void setZoomImageView(ImageView iView ){
         imageView = iView;

    }

    @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){//下拉过度  对图片进行放大
            imageView.getLayoutParams().height = imageView.getHeight() - deltaY;
            imageView.requestLayout();
        }else{//上拉过度时
            imageView.getLayoutParams().height = imageView.getHeight() - deltaY;
            imageView.requestLayout();
        }
        LogUtil.i("yuyahao","deltaY:  "+deltaY);
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        //只有当imageView过度放大时，这里才会去执行缩小
        View view = (View) imageView.getParent();
        int detalY = view.getTop();//此时 detay 为负值
       if(imageView.getHeight() > mMeasureWeight){//如果当前图片的高度 > 初始高度
            imageView.getLayoutParams().height = imageView.getHeight() + detalY;
            imageView.requestLayout();
        }
        LogUtil.i("yuyahao","----   deltaY:  "+detalY);
        super.onScrollChanged(l, t, oldl, oldt);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()){
            case MotionEvent.ACTION_UP://松手释放时
                MyCustomserAnimation myCustomserAnimation = new MyCustomserAnimation(mMeasureWeight);
                myCustomserAnimation.setDuration(300);
                myCustomserAnimation.setInterpolator(new BounceInterpolator());
                imageView.startAnimation(myCustomserAnimation);
                break;
        }
        return super.onTouchEvent(ev);
    }
    public class MyCustomserAnimation extends Animation{
        private int delay ;//高度差
        private int currentHeight ; //当前的高度
        public MyCustomserAnimation( int targetHeight){
            //this.delay = delay;
            delay = imageView.getHeight()  - targetHeight;
            currentHeight =  imageView.getHeight();
        }
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            imageView.getLayoutParams().height = (int) (currentHeight  - delay * interpolatedTime);
            imageView.requestLayout();
            super.applyTransformation(interpolatedTime, t);
        }
    }
}

这里重写了overScrollBy方法
这里源码是怎么说的呢？

  /**
     * This is called in response to an internal scroll in this view (i.e., the
     * view scrolled its own contents). This is typically as a result of
     * {@link #scrollBy(int, int)} or {@link #scrollTo(int, int)} having been
     * called.
     *
     * @param l Current horizontal scroll origin.
     * @param t Current vertical scroll origin.
     * @param oldl Previous horizontal scroll origin.
     * @param oldt Previous vertical scroll origin.
     */
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        notifySubtreeAccessibilityStateChangedIfNeeded();

        if (AccessibilityManager.getInstance(mContext).isEnabled()) {
            postSendViewScrolledAccessibilityEventCallback();
        }

        mBackgroundSizeChanged = true;
        if (mForegroundInfo != null) {
            mForegroundInfo.mBoundsChanged = true;
        }

        final AttachInfo ai = mAttachInfo;
        if (ai != null) {
            ai.mViewScrollChanged = true;
        }

        if (mListenerInfo != null && mListenerInfo.mOnScrollChangeListener != null) {
            mListenerInfo.mOnScrollChangeListener.onScrollChange(this, l, t, oldl, oldt);
        }
    }

大致意思我们都可以看得出来.大致意思是响应于该视图中的内部滚动而调用的（即视图滚动其自己的内容）比如：eltaY < 0的时候下拉过度 对图片进行放大。 小于0时，上拉过度。

日前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，而且我没找到任何可以影响其结果的设置。

Activity中的代码：

/**
 * 类功能描述：</br>
 *  仿QQ空间之打造个性化可拉伸头部控件</br>
 * @author yuyahao
 * @version 1.0 </p> 修改时间：</br> 修改备注：</br>
 */
public class CustomerScrollZoomListViewActivity extends BaseActivity{
    @Bind(R.id.lv_customser_zoomscroll)
    CustomerScrollZoomListView lv_customser_zoomscroll;
    private List<Student> list = new ArrayList<>();
    private ZoomScrollListViewAdapter zoomScrollListViewAdapter;
    private View headView;
    @Override
    protected void initData() {
        setContentView(R.layout.activity_customerscrollzoomlistview);
        ButterKnife.bind(this);
        list.addAll(ServiceData.getStudentList());

        zoomScrollListViewAdapter = new ZoomScrollListViewAdapter(CustomerScrollZoomListViewActivity.this,list,R.layout.item_xzoomscrollview);
        headView = LayoutInflater.from(CustomerScrollZoomListViewActivity.this).inflate(R.layout.zoom_headview,null);
        ImageView iamgeView = (ImageView) headView.findViewById(R.id.iv_zoom_head);
        lv_customser_zoomscroll.setZoomImageView(iamgeView);
        lv_customser_zoomscroll.addHeaderView(headView);
        lv_customser_zoomscroll.setAdapter(zoomScrollListViewAdapter);

    }

}

xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.yolo.myapplication.activity.view.CustomerScrollZoomListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lv_customser_zoomscroll"
        />
</LinearLayout>

adapter适配器

public class ZoomScrollListViewAdapter extends CommonAdapter<Student> {
    private Context context;

    public ZoomScrollListViewAdapter(Context context, List<Student> listDatas, int layoutId) {
        super(context, listDatas, layoutId);
        this.context = context;
    }

    @Override
    protected void fillData(ViewHolder holder, int position) {
        TextView actNum = holder.getView(R.id.team_item_active_num);
        TextView time = holder.getView(R.id.team_item_time);
        TextView title = holder.getView(R.id.team_item_title);
        ImageView icon = holder.getView(R.id.team_item_icon);
        Student item = listDatas.get(position);
        actNum.setText(String.valueOf(item.getList().size()) + "");
        time.setText(String.valueOf(item.getList().get(0).getPerListenceName()) + "");
        title.setText(item.getName());
    }
}

adapter适配器请参考：
教你打造一个万能的适配器
item：布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:gravity="center_vertical"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="@dimen/dp80"
        android:layout_height="@dimen/dp80"
        android:background="@drawable/img2"
        android:scaleType="fitXY"
        android:id="@+id/team_item_icon"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_marginLeft="@dimen/dp10"
        android:orientation="vertical"
        android:layout_height="@dimen/dp80">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/team_item_title"
            android:gravity="center_vertical"
            android:layout_weight="1"
            android:text="卡卡罗特"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:gravity="center_vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="天不排名"
                android:id="@+id/team_item_time"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/dp20"
                android:text="战斗值： "

                android:id="@+id/team_item_active_num"/>

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

项目源码地址：MyZoomListView.rar

如果你觉得此文对您有所帮助，欢迎入群 QQ交流群 ：232203809
微信公众号：终端研发部

（欢迎关注学习和交流）