Android实现果冻滑动效果的控件

 更新时间:2016年11月13日 16:48:11   投稿:daisy  
这篇文章给大家主要介绍了利用Android如何实现果冻效果滑动效果的控件,实现的效果类似于iOS有阻尼效果的滑动控件,一般我们比较亲切地称之为果冻控件,常见的如微信里[我]的那个面板模块,即使没有再多的选项,也不会很生硬的不允许用户滑动。下面来一起看看吧。

前言

在微信是的处理方法是让用户滑动,但最终还是回滚到最初的地方,这样的效果很生动(毕竟成功还是取决于细节)。那么在安卓我们要怎么弄呢。下面为大家介绍一下JellyScrollView,是我继承ScrollView的一个有阻尼的效果的果冻滑动控件。

下面话不多说了,先来看看效果图

(在虚拟机或者真机跑起来是很流畅,可能是录制视频做成gif的时候有点卡顿。)

实现原理

其实只需要重写下它的拦截方法的逻辑就好了,ScrollView的拦截方法onInterceptTouchEvent一般情况下都默认地返回false,表示不拦截该事件。我们只需要在用户滑动了界面的情况下,拦截下来并移动布局就好了,当用户松开手就恢复布局。很简单

第一步:集成ScrollView重写几个构造方法;

第二步:重写下onFinishInflate方法,获得第一个子view;

第三步:在拦截方法里面处理上面所说的逻辑;

public class JellyScrollView extends ScrollView {
 
 private View inner;// 子View
 
 private float y;// 点击时y坐标
 
 private Rect normal = new Rect();// 矩形(这里只是个形式,只是用于判断是否需要动画.)
 
 private boolean isCount = false;// 是否开始计算
 
 private boolean isMoving = false;// 是否开始移动.
 
 private int top;// 拖动时时高度。
 
 private int mTouchSlop;//系统最少滑动距离
 
 public JellyScrollView(Context context) {
  super(context);
 }
 
 public JellyScrollView(Context context, AttributeSet attrs) {
  super(context, attrs);
 }
 
 public JellyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
 }
 
 /***
 * 根据 XML 生成视图工作完成.该函数在生成视图的最后调用,在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate
 * 方法,也应该调用父类的方法,使该方法得以执行.
 */
 @Override
 protected void onFinishInflate() {
  if (getChildCount() > 0) {
   inner = getChildAt(0);
  }
 }
 
 
 /**拦截事件*/
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
  if (inner != null) {
   int action = ev.getAction();
   switch (action) {
    case MotionEvent.ACTION_DOWN:
     y = ev.getY();
     top = 0;
     break;
 
    case MotionEvent.ACTION_UP:
     // 手指松开.
     isMoving = false;
     if (isNeedAnimation()) {
      animation();
     }
     break;
    /***
    * 排除出第一次移动计算,因为第一次无法得知y坐标, 在MotionEvent.ACTION_DOWN中获取不到,
    * 因为此时是ScrollView的touch事件传递到到了ListView的子item上面.所以从第二次计算开始.
    * 然而我们也要进行初始化,就是第一次移动的时候让滑动距离归0. 之后记录准确了就正常执行.
    */
    case MotionEvent.ACTION_MOVE:
     final float preY = y;// 按下时的y坐标
     float nowY = ev.getY();// 每时刻y坐标
     int deltaY = (int) (nowY - preY);// 滑动距离
     if (!isCount) {
      deltaY = 0; // 在这里要归0.
     }
 
     if (Math.abs(deltaY) < mTouchSlop && top <= 0)
      return true;
 
     // 当滚动到最上或者最下时就不会再滚动,这时移动布局
     isNeedMove();
 
     if (isMoving) {
      // 初始化头部矩形
      if (normal.isEmpty()) {
       // 保存正常的布局位置
       normal.set(inner.getLeft(), inner.getTop(), inner.getRight(), inner.getBottom());
      }
 
      // 移动布局
      inner.layout(inner.getLeft(), inner.getTop() + deltaY / 3, inner.getRight(), inner.getBottom() + deltaY / 3);
 
      top += (deltaY / 6);
     }
 
     isCount = true;
     y = nowY;
     break;
   }
  }
  return super.onInterceptTouchEvent(ev);
 }
 
 
 /***
 * 回缩动画
 */
 public void animation() {
  // 开启移动动画
  TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(), normal.top);
  ta.setDuration(200);
  inner.startAnimation(ta);
 
  // 设置回到正常的布局位置
  inner.layout(normal.left, normal.top, normal.right, normal.bottom);
  normal.setEmpty();
 
  // 手指松开要归0.
  isCount = false;
  y = 0;
 }
 
 // 是否需要开启动画
 public boolean isNeedAnimation() {
  return !normal.isEmpty();
 }
 
 /***
 * 是否需要移动布局
 * inner.getMeasuredHeight():获取的是控件的总高度
 * getHeight():获取的是屏幕的高度
 *
 * @return
 */
 public void isNeedMove() {
  int offset = inner.getMeasuredHeight() - getHeight();
  int scrollY = getScrollY();
  // scrollY == 0是顶部
  // scrollY == offset是底部
if (scrollY == 0 || scrollY == offset) {
 isMoving = true;
}
 }
}

然后在布局里面在最外层就使用我们的JellyScrollView

(为了方便展示,我只是大概写了一部分布局代码)

<?xml version="1.0" encoding="utf-8"?><cn.ichengxi.fang.view.JellyScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/bg"
 android:scrollbars="none">
 
 <LinearLayout  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <TextView   android:id="@+id/personal_setting_txt"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:alpha="0.8"
   android:gravity="center_vertical"
   android:text="设置"
   android:textColor="@android:color/black" />
 
 </LinearLayout></cn.ichengxi.fang.view.JellyScrollView>12345678910111213141516171819202122231234567891011121314151617181920212223

总结

好了,这样就可以很优雅的实现了果冻控件的效果啦。以上就是本文的全部内容了,希望这篇文章的内容对大家能有所帮助,如果有疑问大家可以留言交流。

相关文章

  • Android自定义控件实现圆形进度CircleProgressBar

    Android自定义控件实现圆形进度CircleProgressBar

    这篇文章主要为大家详细介绍了Android自定义控件实现圆形进度CircleProgressBar,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Android显示系统SurfaceFlinger详解

    Android显示系统SurfaceFlinger详解

    本文详细讲解了Android显示系统SurfaceFlinger,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • 详解android.mk中引用第三方库的方法

    详解android.mk中引用第三方库的方法

    本篇文章主要介绍了详解android.mk中引用第三方库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Android通过aapt命令获取apk详细信息(包括:文件包名,版本号,SDK等信息)

    Android通过aapt命令获取apk详细信息(包括:文件包名,版本号,SDK等信息)

    本文给大家分享android通过aapt命令获取apk详细信息(包括:文件包名,版本号,SDK等信息),非常不错,简单实用,对android sdk aapt知识感兴趣的朋友一起通过本文学习吧
    2016-11-11
  • Android源码 在Ubuntu上下载,编译和安装

    Android源码 在Ubuntu上下载,编译和安装

    本文主要介绍在Ubuntu 上Android的源码,想深入学习Android的朋友肯定都有学习Android的源代码,这里就帮大家介绍下载,安装,编译源码的详细步骤
    2016-08-08
  • Android实现自动点击无障碍服务功能的实例代码

    Android实现自动点击无障碍服务功能的实例代码

    这篇文章主要介绍了Android实现自动点击无障碍服务功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • Android使用ViewPager实现启动引导页

    Android使用ViewPager实现启动引导页

    这篇文章主要为大家详细介绍了Android使用ViewPager实现第一次启动引导页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Input系统截断策略的分析与应用详解

    Input系统截断策略的分析与应用详解

    这篇文章主要为大家介绍了Input系统截断策略的分析与应用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • android实现简单的矩形裁剪框

    android实现简单的矩形裁剪框

    这篇文章主要为大家详细介绍了android实现简单的矩形裁剪框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Android实现绘制LocationMarkerView图的示例代码

    Android实现绘制LocationMarkerView图的示例代码

    LocationMarker是运动轨迹上Start、End, 以及整公里点上笔者自定义绘制的一个MarkerView。这篇文章主要介绍了Android实现绘制LocationMarkerView图的示例代码,希望对大家有所帮助
    2023-02-02

最新评论