神刀安全网

ElasticScrollView源码解析

网上有很多下拉放大 HeaderViewListView 或者 ScrollView ,这里将分析一下下拉放大的 ScrollViewElasticScrollView

ElasticScrollView

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

ElasticScrollView源码解析

展示效果分两种情况,一种是放大 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">


<LinearLayout
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"/>


<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"/>


<TextView
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"/>


</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
*/

public void setElasticView(View view) {
refreshOriginHeight(view);
elasticView = 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;
}
}
}

mInnerViewScrollView 的子 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用的
*/

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往下滑动
*/

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
*/

private boolean isNeedMove(int deltaY) {
return deltaY == 0 ? false : (deltaY < 0 ? isTop() : isBottom());
}

/**
* 通过getScrollY()来判断是否到顶部了
*
* @return true 到顶部了
*/

private boolean isTop() {
int scrollY = getScrollY();
return (scrollY == TOP_Y);
}

/**
* 判断是否在底部了
* 当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往下滑动
*/

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 ,而这个 ImageViewscaleTypecenterCrop

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

public class ElasticScrollView extends ScrollView {
/**
* 移动ScrollView中的View(ViewGroup)
* 就是改变位置
*
* @param deltaY
*/

private void moveInnerView(int deltaY) {
mInnerView.layout(mInnerView.getLeft(), mInnerView.getTop() - deltaY, mInnerView.getRight(), mInnerView.getBottom() - deltaY);
}
}

通过 InnerViewlayout 去改变位置。

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

public class ElasticScrollView extends ScrollView {
/**
* 复原
*/

private void doReset() {
boolean needReset = isNeedReset();
if (!needReset) {
return;
}
if (elasticView != null) {
resetElasticView();
} else {
resetInnerView();
}
}
/**
* 是否需要还原
*
* @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 分析完了。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » ElasticScrollView源码解析

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮