Android果冻效果滑动控件

LitteSnail / 文 发表于2016-11-09 14:48 次阅读 阻尼,果冻控件,android控件

类似于iOS有阻尼效果的滑动控件,一般我们比较亲切地称之为果冻控件

比较常见的地方,如微信里[我]的那个面板模块,即使没有再多的选项,也不会很生硬的不允许用户滑动。

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

20161109142032850.gif

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

实现原理:其实只需要重写下它的拦截方法的逻辑就好了,ScrollView的拦截方法onInterceptTouchEvent一般情况下都默认地返回false,表示不拦截该事件。(如果不了解事件机制的同学先补补基础touch事件的分发和消费机制)我们只需要在用户滑动了界面的情况下,拦截下来并移动布局就好了,当用户松开手就恢复布局。很简单

第一步:集成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

然后就可以很优雅的实现了果冻控件的效果啦。。。成功的同学记得回来点赞


收藏 赞 (9) 踩 (14)