ElasticScrollView源码解析

Github: ElasticScrollView 分析版本：c673507

网上有很多下拉放大 HeaderView 的 ListView 或者 ScrollView ，这里将分析一下下拉放大的 ScrollView – ElasticScrollView 。

ElasticScrollView

ElasticScrollView 是一个比较简洁的下拉放大 HeaderView 的自定义 ScrollView ，先看效果图：

展示效果分两种情况，一种是放大 HeaderView ，一种是整体都往下拉，另外还可以发现一个 Damk 的参数，功能是设置阻力，当值越大的时候下拉效果越“吃力”。

使用

直接在 layout布局中使用便可，该布局便是上面 gif 中展示出来的布局：

<org.kitdroid.widget.ElasticScrollView    android:id="@+id/sv"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@android:color/transparent"    app:elasticId="@+id/iv">
    android:id="@+id/sv"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    app:elasticId="@+id/iv">

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="@dimen/activity_horizontal_margin"        android:background="#ffffff"        android:orientation="vertical">
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:background="#ffffff"
        android:orientation="vertical">

        <ImageView            android:id="@+id/iv"            android:layout_width="match_parent"            android:layout_height="300dp"            android:scaleType="centerCrop"            android:src="@drawable/bg_md_0"/>
            android:id="@+id/iv"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_md_0"/>

        <TextView            android:id="@+id/text_elastic_type"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="@dimen/activity_vertical_margin"            android:text="Elastic Type: ALL"/>
            android:id="@+id/text_elastic_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:text="Elastic Type: ALL"/>

        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="@dimen/activity_horizontal_margin"            android:text="Damk"/>
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:text="Damk"/>

        <SeekBar            android:id="@+id/seekBar1"            android:layout_width="match_parent"            android:layout_height="wrap_content"/>
            android:id="@+id/seekBar1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>
</org.kitdroid.widget.ElasticScrollView>

源码分析

分析自定义控件，我们先从构造函数入手：

public class ElasticScrollView extends ScrollView {
	private int elasticId;//弹性View的Id

	public ElasticScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        readStyleAttributes(context, attrs, 0);
    }

    public ElasticScrollView(Context context, AttributeSet attrs, int defStyleAttr){
        super(context, attrs, defStyleAttr);
        readStyleAttributes(context, attrs, defStyleAttr);
    }
  
  	protected void readStyleAttributes(Context context, AttributeSet attrs, int defStyle) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.elastic_scroll, 0, defStyle);
        elasticId = a.getResourceId(R.styleable.elastic_scroll_elasticId, 0);
        a.recycle();
    }
}

构造函数中主要将弹性 View 的 id 值从 AttributeSet 中取出，那么取出这个 id 之后应该去找这个 id 在哪个地方被 findViewById() ：

public class ElasticScrollView extends ScrollView {
	private View mInnerView;//ScrollView里面的View(ViewGroup)
    private View elasticView;//弹性View
    private int originHeight;
	@Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() == 0) {
            return;
        }
        mInnerView = getChildAt(0);
        if (elasticId != 0) {
            View viewById = findViewById(elasticId);
            setElasticView(viewById);
        }
    }
  
  	/**     * 设置弹性View     *     * @param view     */
     * 设置弹性View
     *
     * @param view
     */
  	public void setElasticView(View view) {
        refreshOriginHeight(view);
        elasticView = view;
    }
  
  	/**     * 更新弹性View的高度     *     * @param view     */
     * 更新弹性View的高度
     *
     * @param view
     */
    private void refreshOriginHeight(View view) {
        if (elasticView != null) {
            android.view.ViewGroup.LayoutParams layoutParams = elasticView.getLayoutParams();
            layoutParams.height = originHeight;
            elasticView.setLayoutParams(layoutParams);
        }
        if (null != view) {
            originHeight = view.getLayoutParams().height;
        }
    }
}

mInnerView 是 ScrollView 的子 View ，因为 ScrollView 只能有一个子 View，所以这里的 mInnerView 就是 layout 布局中的 LinearLayout 。接下来如果 elasticId 不为0，也就是在 layout 布局中设置了的话，那么就去 findViewById() ，之后将找到的 View 赋值给成员变量 elasticView ，并且得到当前的高度，高度的获取是通过 LayoutParams.height 获取的。

那么初始化的流程看完了，就看主要关心的手势事件：

public class ElasticScrollView extends ScrollView {
    private static final int SHAKE_THRESHOLD_VALUE = 3;
    private float startY;
	@Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int action = ev.getAction();

        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                startY = ev.getY();
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                float currentY = ev.getY();
                float scrollY = currentY - startY;
                return Math.abs(scrollY) > SHAKE_THRESHOLD_VALUE;
            }
        }
        return super.onInterceptTouchEvent(ev);
    }
  
  	@Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mInnerView != null) {
            computeMove(ev);
        }
        return super.onTouchEvent(ev);
    }

}

先看 onInterceptTouchEvent() 方法，该方法若是返回 true ，则表明拦截事件，直接进到 onTouchEvent 里面，如果返回 false 的话，继续将事件传递给子 View 。那么在 ACTION_DOWN 的时候记录下当前的 Y 坐标赋值给 startY ，在 ACTION_MOVE 的时候得到当前的 Y 坐标，与 startY 比对判断手势在 Y 轴上是否超过了 SHAKE_THRESHOLD_VALUE 的值，如果超过了则 onInterceptTouchEvent 返回 true ，说明手势应该是在滑动 ScrollView ，如果不是的话说明应该要去操作 ScrollView 中的子 View 事件。再看 onTouchEvent 方法，如果该控件有子 View 的话，进行 computeMove 操作。

好了，这个 computeMove 便是这个自定义控件的关键了：

public class ElasticScrollView extends ScrollView {
	private Rect normalRect = new Rect();
  	private static final int DAMP_COEFFICIENT = 2;
	private float damk = DAMP_COEFFICIENT;//阻力
  
	private static final int TOP_Y = 0;
  	
	private void computeMove(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_UP: {
                doReset();
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                doMove(event);
                break;
            }
            default:
                break;
        }
    }
  
	private void doMove(MotionEvent event) {
        int deltaY = computeDeltaY(event);//计算出手势在Y轴上的距离
        if (!isNeedMove(deltaY)) {
            return;
        }
        refreshNormalRect();
        if (elasticView != null) {
            moveElasticView(deltaY);//移动弹性View
        } else {
            moveInnerView(deltaY);//移动整个子View
        }
    }
  
	/**     * 保存正常的布局位置，给InnerView用的     */
     * 保存正常的布局位置，给InnerView用的
     */
    private void refreshNormalRect() {
        if (!normalRect.isEmpty()) {
            return;
        }
        normalRect.set(mInnerView.getLeft(), mInnerView.getTop(), mInnerView.getRight(), mInnerView.getBottom());
    }
  
	/**     * 计算Y轴上面的差值     *     * @param event     * @return deltaY < 0 ScrollView往上滑动，deltaY > 0 ScrollView往下滑动     */
     * 计算Y轴上面的差值
     *
     * @param event
     * @return deltaY < 0 ScrollView往上滑动，deltaY > 0 ScrollView往下滑动
     */
    private int computeDeltaY(MotionEvent event) {
        float currentY = event.getY();
        int deltaY = (int) ((startY - currentY) / damk);//计算出差值，真正的差值除以阻力
        startY = currentY;
        return deltaY;
    }
  
    /**     * 是否需要移动布局     *     * @param deltaY deltaY < 0 ScrollView往上滑动，deltaY > 0 ScrollView往下滑动     * @return      */
     * 是否需要移动布局
     *
     * @param deltaY deltaY < 0 ScrollView往上滑动，deltaY > 0 ScrollView往下滑动
     * @return 
     */
    private boolean isNeedMove(int deltaY) {
        return deltaY == 0 ? false : (deltaY < 0 ? isTop() : isBottom());
    }
  
	/**     * 通过getScrollY()来判断是否到顶部了     *     * @return true 到顶部了     */
     * 通过getScrollY()来判断是否到顶部了
     *
     * @return true 到顶部了
     */
    private boolean isTop() {
        int scrollY = getScrollY();
        return (scrollY == TOP_Y);
    }
  
	/**     * 判断是否在底部了     * 当innerView有marginBottom的时候这个永远返回false，因为mInnerView.getMeasuredHeight() + marginBottom == getHeight()     * 但是当没有的时候在滑动到最下面的时候再往下滑，弹性View会改变     * 当ScrollView的内容没有充满整个屏幕的时候，这个很好看，但是充满了，尤其是弹性View已经看不见了，个人觉得也就没有必要再做这个操作了     *     * @return     */
     * 判断是否在底部了
     * 当innerView有marginBottom的时候这个永远返回false，因为mInnerView.getMeasuredHeight() + marginBottom == getHeight()
     * 但是当没有的时候在滑动到最下面的时候再往下滑，弹性View会改变
     * 当ScrollView的内容没有充满整个屏幕的时候，这个很好看，但是充满了，尤其是弹性View已经看不见了，个人觉得也就没有必要再做这个操作了
     *
     * @return
     */
    private boolean isBottom() {
        int offset = mInnerView.getMeasuredHeight() - getHeight();
        offset = (offset < 0) ? 0 : offset;

        int scrollY = getScrollY();
        return (scrollY == offset);
    }
}

在 doMove 方法中分了情况，一种是有弹性 View 的时候去改变弹性 View，一种是没有设置弹性 View 的时候去改变 InnerView ，那么我们分开来看：

public class ElasticScrollView extends ScrollView {
    /**     * 移动弹性View，就是改变弹性View的高度     *     * @param deltaY deltaY < 0 ScrollView往上滑动，deltaY > 0 ScrollView往下滑动     */
     * 移动弹性View，就是改变弹性View的高度
     *
     * @param deltaY deltaY < 0 ScrollView往上滑动，deltaY > 0 ScrollView往下滑动
     */
    private void moveElasticView(int deltaY) {
        android.view.ViewGroup.LayoutParams layoutParams = elasticView.getLayoutParams();
        layoutParams.height = Math.max(0, layoutParams.height - deltaY);
        elasticView.setLayoutParams(layoutParams);
    }  
}

通过修改 elasticView 的高度，使之变大变小。当 ScrollView 往上滑动，也就是 deltaY 为负值的时候，height 会越来越大，当 ScrollView 往下滑动，也就是 deltaY 为正值的时候，height 会越来越小，最小的时候为 0 。

注意：demo 里面的 elasticView 是一个 ImageView ，而这个 ImageView 的 scaleType 为 centerCrop 。

现在来看看滑动 InnerView 的情况：

public class ElasticScrollView extends ScrollView {
	/**     * 移动ScrollView中的View(ViewGroup)     * 就是改变位置     *     * @param deltaY     */
     * 移动ScrollView中的View(ViewGroup)
     * 就是改变位置
     *
     * @param deltaY
     */
    private void moveInnerView(int deltaY) {
        mInnerView.layout(mInnerView.getLeft(), mInnerView.getTop() - deltaY, mInnerView.getRight(), mInnerView.getBottom() - deltaY);
    }
}

通过 InnerView 的 layout 去改变位置。

到此下拉放大的功能分析完了，那么看下拉放大之后放手缩回去的过程是怎么样的：

public class ElasticScrollView extends ScrollView {
	/**     * 复原     */
     * 复原
     */
    private void doReset() {
        boolean needReset = isNeedReset();
        if (!needReset) {
            return;
        }
        if (elasticView != null) {
            resetElasticView();
        } else {
            resetInnerView();
        }
    }
	/**     * 是否需要还原     *     * @return     */
     * 是否需要还原
     *
     * @return
     */
    private boolean isNeedReset() {
        if (elasticView == null) {
            return !normalRect.isEmpty();
        } else {
            return originHeight != elasticView.getLayoutParams().height;
        }
    }
}

同样在还原的时候也要分情况，那么先看有 elasticView 的情况：

public class ElasticScrollView extends ScrollView {
	private static final int ELASTIC_DELAY = 500;
	private int resetDelay = ELASTIC_DELAY;

	private void resetElasticView() {
        ValueAnimator animator = ObjectAnimator.ofInt(elasticView.getLayoutParams().height, originHeight);//从当前的elasticView.getLayoutParams().height 变到 原来的originHeight 高度
        animator.setDuration(resetDelay);
        animator.setInterpolator(new OvershootInterpolator());//使用OvershootInterpolator插值器，有一种回弹效果
        animator.addUpdateListener(new AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
              	//将值拿到之后赋值给elasticView的height
                int value = (Integer) animation.getAnimatedValue();
                android.view.ViewGroup.LayoutParams layoutParams = elasticView.getLayoutParams();
                layoutParams.height = value;
                elasticView.setLayoutParams(layoutParams);
            }
        });
        animator.start();
    }
}

这里用的是 NindOldAndroid 动画库。再看看 InnerView ：

public class ElasticScrollView extends ScrollView {
	private void resetInnerView() {
        int moveY = mInnerView.getTop() - normalRect.top;//计算差值
        ValueAnimator animator = ObjectAnimator.ofInt(moveY, 0);//将值从差值变为0
        animator.setDuration(resetDelay);
        animator.setInterpolator(new OvershootInterpolator());

        animator.addUpdateListener(new AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
              	//将值拿到之后重新layout
                int value = (Integer) animation.getAnimatedValue();
                mInnerView.layout(normalRect.left, normalRect.top + value, normalRect.right, normalRect.bottom + value);
            }
        });
        animator.start();
    }
}

至此，ElasticScrollView 分析完了。

总结

• 下拉变大的效果是 elasticView 的高度不断变大；
• elasticView 是 ImageView ，scaleType 为 centerCrop ；
• 当没有 elasticView 的时候，改变的是 InnerView 的位置；
• 当放手缩回原来大小的时候设置了一个插值器，所以有回弹效果；