Android中ScrollView 滑到头部或尾部可伸缩放大效果

最近做项目,想要这么一个效果,就是ScrollView 滑动到顶部,当不能在滑动的时候,图片可以下拉放大,松开又恢复。滑到底部没有内容的时候,也有伸缩效果,先看看效果图吧。

就是如上图这么个效果。系统提供的ScrollView 是不能做到这个效果的,所以需要自己自定义,网上找了一些资料。也参考了下其他人的做法。自己也整合了一下。希望对大家有所帮助。

核心的控件就是下面的这段代码:

package com.kokjuis.travel.customView;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
/**
 * 注意使用的时候需要放大的view,一般是第一个RelativeLayout或者LinearLayout。要加上 android:layout_gravity="center_horizontal"
 * <p>
 * Created by kokJuis on 2017/3/14. 189155278@qq.com
 */
public class BounceZoomScrollView extends ScrollView {
 private static final String TAG = "BounceScrollView";
 //----头部收缩属性--------
 // 记录首次按下位置
 private float mFirstPosition = 0;
 // 头部图片是否正在放大
 private Boolean mScaling = false;
 private View dropZoomView;//需要被放大的view
 private int dropZoomViewWidth;
 private int dropZoomViewHeight;
 //----头部收缩属性end--------
 //------尾部收缩属性--------
 private View inner;// 子View
 private float y;// 点击时y坐标
 private Rect normal = new Rect();// 矩形(这里只是个形式,只是用于判断是否需要动画.)
 private boolean isCount = false;// 是否开始计算
 //最后的坐标
 private float lastX = 0;
 private float lastY = 0;
 //当前坐标
 private float currentX = 0;
 private float currentY = 0;
 //移动的坐标量
 private float distanceX = 0;
 private float distanceY = 0;
 private boolean upDownSlide = false; //判断上下滑动的flag
 //------尾部收缩属性end--------
 public BounceScrollView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }
 //初始化
 private void init() {
 setOverScrollMode(OVER_SCROLL_NEVER);
 if (getChildAt(0) != null) {
  inner = getChildAt(0);//这个是底部收缩的view
  //头部收缩的
  ViewGroup vg = (ViewGroup) getChildAt(0);
  if (vg.getChildAt(0) != null) {
  dropZoomView = vg.getChildAt(0);
  }
 }
 }
 /***
 * 生成视图工作完成.该函数在生成视图的最后调用,在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate
 * 方法,也应该调用父类的方法,使该方法得以执行.
 */
 @Override
 protected void onFinishInflate() {
 //初始化
 init();
 super.onFinishInflate();
 }
 @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 && inner != null) commOnTouchEvent(ev);
 return super.dispatchTouchEvent(ev);
 }
 /***
 * 触摸事件
 *
 * @param ev
 */
 public void commOnTouchEvent(MotionEvent ev) {
 //头部缩放计算
 if (dropZoomViewWidth <= 0 || dropZoomViewHeight <= 0) {
  dropZoomViewWidth = dropZoomView.getMeasuredWidth();
  dropZoomViewHeight = dropZoomView.getMeasuredHeight();
 }
 switch (ev.getAction()) {
  case MotionEvent.ACTION_UP:
  //手指离开后头部恢复图片
  mScaling = false;
  replyImage();
  // 手指松开尾部恢复
  if (isNeedAnimation()) {
   animation();
   isCount = false;
  }
  clear0();
  break;
  //这里头尾分开处理,互不干扰
  case MotionEvent.ACTION_MOVE:
  //尾部处理
  final float preY = y;// 按下时的y坐标
  float nowY = ev.getY();// 时时y坐标
  int deltaY = (int) (preY - nowY);// 滑动距离
  if (!isCount) {
   deltaY = 0; // 在这里要归0.
  }
  y = nowY;
  // 当滚动到最上或者最下时就不会再滚动,这时移动布局
  if (isNeedMove()) {
   // 初始化头部矩形
   if (normal.isEmpty()) {
   // 保存正常的布局位置
   normal.set(inner.getLeft(), inner.getTop(),
    inner.getRight(), inner.getBottom());
   }
   // 移动布局
   inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,
    inner.getRight(), inner.getBottom() - deltaY / 2);
  }
  isCount = true;
  //尾部处理end
  //头部处理
  if (!mScaling) {
   if (getScrollY() == 0) {
   mFirstPosition = ev.getY();// 滚动到顶部时记录位置,否则正常返回
   } else {
   break;
   }
  }
  int distance = (int) ((ev.getY() - mFirstPosition) * 0.6); // 滚动距离乘以一个系数
  if (distance < 0) { // 当前位置比记录位置要小,正常返回
   break;
  }
  // 处理放大
  mScaling = true;
  setZoom(1 + distance);
  //头部处理end
  break;
 }
 }
 /***
 * 回缩动画,尾部往下缩动画
 */
 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();
 }
 // 是否需要开启动画
 public boolean isNeedAnimation() {
 return !normal.isEmpty();
 }
 // 回弹动画,header往上缩动画 (使用了属性动画)
 public void replyImage() {
 final float distance = dropZoomView.getMeasuredWidth() - dropZoomViewWidth;
 // 设置动画
 ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration((long) (distance * 0.7));
 anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  float cVal = (Float) animation.getAnimatedValue();
  setZoom(distance - ((distance) * cVal));
  }
 });
 anim.start();
 }
 //头部缩放
 public void setZoom(float s) {
 if (dropZoomViewHeight <= 0 || dropZoomViewWidth <= 0) {
  return;
 }
 ViewGroup.LayoutParams lp = dropZoomView.getLayoutParams();
 lp.width = (int) (dropZoomViewWidth + s);
 lp.height = (int) (dropZoomViewHeight * ((dropZoomViewWidth + s) / dropZoomViewWidth));
 dropZoomView.setLayoutParams(lp);
 }
 /***
 * 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度
 *
 * getHeight():获取的是屏幕的高度
 *
 * @return
 */
 public boolean isNeedMove() {
 int offset = inner.getMeasuredHeight() - getHeight();
 int scrollY = getScrollY();
 // 0是顶部,后面那个是底部
 if (scrollY == 0 || scrollY == offset) {
  return true;
 }
 return false;
 }
 //清理尾部属性值
 private void clear0() {
 lastX = 0;
 lastY = 0;
 distanceX = 0;
 distanceY = 0;
 upDownSlide = false;
 }
}

下面是我自己使用的一个layout例子:

<?xml version="1.0" encoding="utf-8"?>
<com.kokjuis.travel.customView.BounceZoomScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scrollbars="none">
 <!-- <LinearLayout
  android:id="@+id/ui_allchatlist_header_relativelayout"
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:background="@drawable/bar_bg"
  android:orientation="horizontal"
  android:paddingBottom="5dp"
  android:paddingTop="5dp">
  <Button
  android:id="@+id/ui_allchatlist_backbtn"
  android:layout_width="wrap_content"
  android:layout_height="match_parent"
  android:layout_marginBottom="3dp"
  android:layout_marginLeft="5dp"
  android:layout_marginTop="3dp"
  android:background="@null"
  android:gravity="center"
  android:text="我"
  android:textColor="@color/white"
  android:textSize="18sp" />
 </LinearLayout>
 -->
 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="250dp"
  android:layout_gravity="center_horizontal">
  <ImageView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marginBottom="40dp"
  android:background="@drawable/personinfo_bg" />
  <com.kokjuis.travel.customView.RoundImageView
  android:id="@+id/headImage"
  android:layout_width="80dp"
  android:layout_height="80dp"
  android:layout_alignParentBottom="true"
  android:layout_centerHorizontal="true"
  android:src="@drawable/headimg"
  imagecontrol:border_inside_color="#fff7f2e9"
  imagecontrol:border_outside_color="#ffd5d1c8"
  imagecontrol:border_thickness="2dp" />
 </RelativeLayout>
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <TextView
  android:id="@+id/name_tv"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:layout_marginTop="6dp"
  android:gravity="center_vertical"
  android:text="昵称:"
  android:textSize="20sp" />
  <TextView
  android:id="@+id/motto_tv"
  android:layout_width="wrap_content"
  android:layout_height="40dp"
  android:layout_gravity="center_horizontal"
  android:gravity="center_vertical"
  android:text="座右铭:"
  android:textSize="11sp" />
  <LinearLayout
  android:layout_width="150dp"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:orientation="vertical">
  <TextView
   android:id="@+id/accounts_tv"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="8dp"
   android:gravity="center_vertical"
   android:text="帐号:"
   android:textSize="12sp" />
  <TextView
   android:id="@+id/gender_tv"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="2dp"
   android:gravity="center_vertical"
   android:text="性别:"
   android:textSize="12sp" />
  </LinearLayout>
  <Button
  android:id="@+id/logout_btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:layout_marginTop="20dp"
  android:text="注销" />
 </LinearLayout>
 </LinearLayout>
</com.kokjuis.travel.customView.BounceZoomScrollView>

以上所述是小编给大家介绍的Android ScrollView 滑到头部或尾部可伸缩放大效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android中Toolbar随着ScrollView滑动透明度渐变效果实现

    Android中Toolbar随着ScrollView滑动透明度渐变效果实现 一.思路:监听ScrollView的滑动事件 不断的修改Toolbar的透明度 二.注意 1.ScrollView 6.0以前没有scrollView.setOnScrollChangeListener(l)方法  所以要自定义ScrollView 在onScrollChanged()中监听 2.ScrollView 6.0(23)以前没有scrollView.setOnScrollChangeListener()方法

  • Android中ScrollView实现滑动距离监听器的方法

    前言 众所周知ScrollView是我们经常使用的一个UI控件,也许你在使用ScrollView的过程中会发现,当你想监听ScrollView滑动的距离时却没有合适的监听器!当然在API 23中有setOnScrollChangeListener(View.OnScrollChangeListener l)可以使用,但是并不兼容低版本的API.那怎么办呢?只好重写ScrollView来实现对滑动距离的监听了. 话不多说,直接上代码: public class MyScrollView exten

  • Android ScrollView滑动实现仿QQ空间标题栏渐变

    今天来研究的是ScrollView-滚动视图,滚动视图又分横向滚动视图(HorizontalScrollView)和纵向滚动视图(ScrollView),今天主要研究纵向的.相信大家在开发中经常用到,ScrollView的功能已经很强大了,但是仍然满足不了我们脑洞大开的UI设计师们,所以我们要自定义-本篇文章主要讲监听ScrollView的滑动实现仿QQ空间标题栏渐变,先看一下效果图: 好了我们切入主题. 有可能你不知道的那些ScrollView属性  •android:scrollbars 设

  • Android HorizontalScrollView左右滑动效果

    本文实例为大家分享了Android HorizontalScrollView左右滑动的具体代码,供大家参考,具体内容如下 效果图 一.什么是HorizontalScrollView HorizontalScrollView实际上是一个FrameLayout ,这意味着你只能在它下面放置一个子控件 ,这个子控件可以包含很多数据内容.有可能这个子控件本身就是一个布局控件,可以包含非常多的其他用来展示数据的控件.这个布局控件一般使用的是一个水平布局的LinearLayout.TextView也是一个可

  • ScrollView与SeekBar绑定实现滑动时出现小滑块效果

    这是一项挺复杂的工作 重写SeekBar 重写ScroView 主工程 布局 SeekBar样式修改 绑定SeekBar和ScrollView 监听ScrollView的滑动状态 1.重写SeekBar public class VerticalSeekbar extends SeekBar { public VerticalSeekbar(Context context) { super(context); } public VerticalSeekbar(Context context, A

  • Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法

    本文实例讲述了Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法.分享给大家供大家参考,具体如下: 这里主要介绍如何解决ViewPager在ScrollView中滑动经常失效.无法正常滑动问题. 解决方法只需要在接近水平滚动时ScrollView不处理事件而交由其子View(即这里的ViewPager)处理即可,重写ScrollView的onInterceptTouchEvent函数,如下: package cc.newnews.view; import an

  • ScrollView嵌套ListView滑动冲突的解决方法

    ScrollView和ListView这两个控件想必大家都不会陌生,但是这两者嵌套使用的时候就会出现麻烦.比如,我们如果想在ListView下面添加其他的布局或者控件,然后想让它们作为一个整体都可以滑动的话,最常想到的就是用一个ScrollView把它们包裹起来.想法似乎很美好,但是现实就有点残酷了.我们可以写一个小例子体验一下. 首先创建一个Activity,在它的布局文件上放置一个ListView: <?xml version="1.0" encoding="utf

  • Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android中实现监听ScrollView滑动事件

    时候我们需要监听ScroView的滑动情况,比如滑动了多少距离,是否滑到布局的顶部或者底部.可惜的是SDK并没有相应的方法,不过倒是提供了一个 复制代码 代码如下: protected void onScrollChanged(int x, int y, int oldx, int oldy) 方法,显然这个方法是不能被外界调用的,因此就需要把它暴露出去,方便使用.解决方式就是写一个接口, 复制代码 代码如下: package com.example.demo1;    public inter

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

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

随机推荐