转载

ElasticScrollView源码解析

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

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;
        }
    }
}

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用的
     */
    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 ，而这个 ImageView 的 scaleType 为 centerCrop 。

现在来看看滑动 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);
    }
}

通过 InnerView 的 layout 去改变位置。

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

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 分析完了。

原文  http://yydcdut.com/2016/03/27/elasticscrollview-analyse/
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 java-demo Maven教程 springcloud-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用 Docker 打包和运行 Vue 应用
  2. 2 Dependency Check命令行方式扫描jar包的安全漏洞
  3. 3 maven使用Dependency-Check来扫描安全漏洞
  4. 4 使用sonarqube分析代码质量
  5. 5 使用screw来对比数据库表和字段差异
  6. 6 Spring Boot 实现防盗链功能
  7. 7 在Spring Boot中的实现国际化（i18n）
  8. 8 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  9. 9 Spring Boot 3.x嵌入MongoDB 进行测试
  10. 10 java如何解析和生成yaml文件？
网站信息
  • 文章总数：82,737 篇
  • 文件总数：284,312 个
  • 标签总数：2,416 个
  • 分类总数：85 个
  • 留言数量：2,559 条
  • 在线人数：669 人
  • 运行天数：4,440天
  • 最后更新：2024年12月23日01点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG