Android自定义ScrollView实现放大回弹效果

背景

在很多项目中我们都会用到ScrollView这个控件,因为ScrollView能够在屏幕内容多时下上滑动以适配加载的内容。但是ScrollView滑动时效果感觉太死板了,这个时候我们如果给它添加一个回弹的动画效果,会让界面交互更加舒服,提升用户体验效果。

自定义ScrollView

1、创建一个类,继承ScrollView并重写相应的构造函数

public class ZoomInScrollView extends ScrollView {

  public ZoomInScrollView(Context context) {
    this(context, null);
  }

  public ZoomInScrollView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public ZoomInScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }
}

2、获取默认第一个子View即我们的头部mHeaderView

@Override
protected void onFinishInflate() {
  super.onFinishInflate();
  // 设置不可过度滚动,否则上移后下拉会出现部分空白的情况
  setOverScrollMode(OVER_SCROLL_NEVER);
  View child = getChildAt(0);
  if (child != null && child instanceof ViewGroup) {
    // 获取默认第一个子View
    ViewGroup vg = (ViewGroup) getChildAt(0);
    if (vg.getChildAt(0) != null) {
      mHeaderView = vg.getChildAt(0);
    }
  }
}

3、获取头部View的长和宽

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mHeaderWidth = mHeaderView.getMeasuredWidth();
  mHeaderHeight = mHeaderView.getMeasuredHeight();
}

4、设置上下滑动标记

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
  currentX = ev.getX();
  currentY = ev.getY();

  switch (ev.getAction()) {
    case MotionEvent.ACTION_MOVE:
      distanceX = currentX - lastX;
      distanceY = currentY - lastY;
      if (Math.abs(distanceX) < Math.abs(distanceY) && Math.abs(distanceY) > 12) {
        upDownSlide = true;
      }
      break;
  }

  lastX = currentX;
  lastY = currentY;

  if (upDownSlide && mHeaderView != null) {
    commOnTouchEvent(ev);
  }
  return super.dispatchTouchEvent(ev);
}

5、监听触摸事件

private void commOnTouchEvent(MotionEvent ev) {
  switch (ev.getAction()) {
    case MotionEvent.ACTION_UP:
      // 手指离开后头部恢复图片
      mIsPulling = false;
      replyView();
      clear();
      break;
    case MotionEvent.ACTION_MOVE:
      if (!mIsPulling) {
        // 第一次下拉
        if (getScrollY() == 0) {
          // 滚动到顶部时记录位置,否则正常返回
          mLastY = (int) ev.getY();
        } else {
          break;
        }
      }

      int distance = (int) ((ev.getY() - mLastY) * mScaleRatio);
      // 当前位置比记录位置要小时正常返回
      if (distance < 0) {
        break;
      }
      mIsPulling = true;
      setZoom(distance);
      break;
  }
}

6、头部缩放

private void setZoom(float s) {
  float scaleTimes = (float) ((mHeaderWidth + s) / (mHeaderWidth * 1.0));
  // 如超过最大放大倍数则直接返回
  if (scaleTimes > mScaleTimes) {
    return;
  }
  ViewGroup.LayoutParams layoutParams = mHeaderView.getLayoutParams();
  layoutParams.width = (int) (mHeaderWidth + s);
  layoutParams.height = (int) (mHeaderHeight * ((mHeaderWidth + s) / mHeaderWidth));
  // 设置控件水平居中
  ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - mHeaderWidth) / 2, 0, 0, 0);
  mHeaderView.setLayoutParams(layoutParams);
}

7、回弹动画

private void replyView() {
  final float distance = mHeaderView.getMeasuredWidth() - mHeaderWidth;
  // 设置动画
  ValueAnimator anim = ObjectAnimator.ofFloat(distance, 0.0F).setDuration((long) (distance * mReplyRatio));
  anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
      setZoom((Float) animation.getAnimatedValue());
    }
  });
  anim.start();
}

通过以上方式就可以简单的实现我们想要的效果了!

项目地址 ☞ 传送门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • android scrollview 自动滚动到顶部或者底部的实例

    android scrollview 自动滚动到顶部或者底部 摘要: android scrollview 自动滚动到顶部或者底部 android scrollview 自动滚动到顶部或者底部 //设置默认滚动到顶部 scrollView.post(new Runnable() { @Override public void run() { // TODO Auto-generated method stub scrollView.fullScroll(ScrollView.FOCUS_UP);

  • Android中使用ScrollView指定view的顶部悬停效果

    因项目中的需要实现ScrollView顶部的悬停,也不是太难便自己实现功能,话不多说,先上效果图 红色text一到顶上便会悬浮在上面,不会跟随scrollview的滑动而上滑. 原理: 原理其实很简单就是对view的gone和visible,写两个相同的要置顶的view,一个设置为gone,一个为visible,当可见的view超出屏幕范围的时候,将不可以的view设置为visible,不可见的view 与scrollview要同级,这样滑动的时候不会影响到view的位置. 直接上代码 <?xm

  • Android ScrollView取消惯性滚动的方法

    ScrollView中惯性滚动的效果,想让这个ScrollView慢一点滑动或者接近drag(拖拽)操作,就提出了添加阻尼的说法.只要重新fling方法即可,将velocity值极至缩小. 实例如下: public class CustomHorizontalScrollView extends HorizontalScrollView { private Context context; private ScrollViewListenner listenner; private Custom

  • Android ScrollView无法填充满屏幕的解决办法

    Android ScrollView无法填充满屏幕的解决办法 ScrollView滚动视图是指当拥有很多内容.屏幕显示不完时.需要通过滚动跳来显示的视图.Scrollview的一般用法如下 以下代码在Scrollview里面放了一个RelativeLayout.并且是设置为Android:layout_height="match_parent"填充全屏的和RelativeLayout里面放置了一个TextView背景设为了一张图片.按照代码理解.图片应该是居于屏幕的最下方的 <S

  • Android ScrollView 下嵌套 ListView 或 GridView出现问题解决办法

    Android ScrollView 下嵌套 ListView 或 GridView出现问题解决办法 ScrollView 下嵌套 ListView 或 GridView 会发列表现数据只能显示一行.因为他们都是滚动结构,两个滚动条放到一起就会引起冲突. 解决此问题可以通过计算 ListView 高度或重写 ListView 的 onMeasure 方法来解决.下面介绍通过重写 onMeasure 方法来解决问题. 重写 onMeasure 方法如下: public class ScrollLi

  • Android中ScrollView嵌套GridView显示不全解决方法

    Android中ScrollView嵌套GridView显示不全解决方法 由于ScrollView和GridView这两款控件都自带滚动条,一起使用GridView会显示不全 解决方法:自定义gridview 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • Android ScrollView实现反弹效果的实例

    Android ScrollView实现反弹效果 自定义ScrollView控件: /** * ScrollView反弹效果的实现 */ public class BounceScrollView extends ScrollView { private View inner;// 孩子View private float y;// 点击时y坐标 private Rect normal = new Rect();// 矩形(这里只是个形式,只是用于判断是否需要动画.) private boole

  • android scrollview 滑动到顶端或者指定位置的实现方法

    在Android开发中很多时候会遇到一屏显示不下所有内容的现象,那大家也知道这个时候肯定会想到用scrollview来进行滚屏显示. 这个时候由于某些需求,会要求在最开始显示scrollview的时候就定位到某一处,这篇就是来讲这个的哈- 首先,scrollView.scrollTo( x, y );这个方法是能对滚动条进行定位的,这个大家都知道. But,貌似很多时候这个方法的调用没有什么效果呀-- 上面所说的调用scrollTo方法看上去好像并没有起到对滚动条进行定位的效果,其实是因为我们是

  • Android自定义ScrollView实现放大回弹效果实例代码

    1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下: 2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部分方法,所以这里我们要把布局分成两部分,对应的布局文件效果图如下: 3,自定义ScrollView 第一步:创建一个类,继承自ScrollView,重写相应的构造函数 public class ZoomInScrollView extends ScrollView { public ZoomInScrollView(Context context) { t

  • Android自定义ScrollView实现放大回弹效果

    背景 在很多项目中我们都会用到ScrollView这个控件,因为ScrollView能够在屏幕内容多时下上滑动以适配加载的内容.但是ScrollView滑动时效果感觉太死板了,这个时候我们如果给它添加一个回弹的动画效果,会让界面交互更加舒服,提升用户体验效果. 自定义ScrollView 1.创建一个类,继承ScrollView并重写相应的构造函数 public class ZoomInScrollView extends ScrollView { public ZoomInScrollView

  • Android自定义ScrollView实现阻尼回弹

    Android开发中,当一个页面存放的控件超出屏幕时,通常需要使用ScrollView来包裹布局.这样用户可以通过手指的滑动来查看超出屏幕的部分.然而当ScrollView滑动到边界时,继续滑动只会显示一个阴影效果.iOS自带的控件却可以实现边界的阻尼回弹效果,这种阻尼回弹效果会让用户有更好的使用体验.这里给出一个Android上的实现方案 解决思路: ScrollView使用时要求内部有且仅一个子View.当ScrollView滑动到边界时,让子View在ScrollView中随着手指按一定的

  • Android背景图下拉回弹效果实例

    目录 Android实现背景图下拉回弹效果 效果 实现 总结 Android实现背景图下拉回弹效果 增加设置不横向拉伸时增加回弹效果 增加切换横屏时可滑动效果 效果 实现 public class HeadZoomScrollView extends NestedScrollView { public HeadZoomScrollView(Context context) { super(context); } public HeadZoomScrollView(Context context,

  • Android自定义View实现弹性小球效果

    照例先看效果图 自定义代码示例 public class BezierView extends View { Paint paint;//画笔 Path path;//路径 int radius = 50;//圆的半径 int time = 100;//计数时长 int index; int offsetIndex; float viewX, viewY;//图形中心点坐标 float width;//屏幕宽度 float partWidth;//屏幕宽度的1/4 int paddingLeft

  • Android自定义View实现折线图效果

    下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo

  • Android自定义VIew实现卫星菜单效果浅析

     一 概述: 最近一直致力于Android自定义VIew的学习,主要在看<android群英传>,还有CSDN博客鸿洋大神和wing大神的一些文章,写的很详细,自己心血来潮,学着写了个实现了类似卫星效果的一个自定义的View,分享到博客上,望各位指点一二.写的比较粗糙,见谅.(因为是在Linux系统下写的,效果图我直接用手机拍的,难看,大家讲究下就看个效果,勿喷). 先来看个效果图,有点不忍直视: 自定义VIew准备: (1)创建继承自View的类; (2)重写构造函数; (3)定义属性. (

  • Android自定义View实现拖拽效果

    腾讯QQ有那种红点拖动效果,今天就来实现一个简单的自定义View拖动效果,再回到原处,并非完全仿QQ红点拖动. 先来看一下效果图 简单说一下实现步骤 1.创建一个类继承View 2.绘制出一个小球 3.重写onTouchEvent,来根据手指放下,移动,抬起,来控制小球 4.直接在布局中引用 先贴一张图看下View的坐标系 下面就贴一下代码,最后会给出源码 public class CustomView extends View { private int lastX; private int

  • Android自定义view之围棋动画效果的实现

    前言 废话不多说直接开始 老规矩,文章最后有源码 完成效果图 棋子加渐变色 棋子不加渐变色 一.测量 1.获取宽高 @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; useWidth = mWidth; if (mWidth > mHeight) { useWidth =

  • Android自定义view之3D正方体效果实例

    目录 前言 一.小提 二.将传感器改成事件分发机制 三.使用 四.源码 总结 前言 在之前写了一篇关于3D效果的文章,借助传感器展示,有小伙伴问可不可以改成手势滑动操作(事件分发),所以出一篇文章 传感器相关文章链接:Android 3D效果的实现 一.小提 相对于常见的自定义view而言,继承的GLSurfaceView只有两个构造函数.可以理解为没有提供获取自定义属性的方法. public TouchSurfaceView(Context context) { super(context);

随机推荐