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; 
 
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); 
  } 
 } 
 } 
  
 @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); 
 } 
  
 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); 
 } 
  
 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 滑到头部或尾部可伸缩放大效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程网网站的支持！

您可能感兴趣的文章:Android中Toolbar随着ScrollView滑动透明度渐变效果实现Android ScrollView滑动实现仿QQ空间标题栏渐变android 实现ScrollView自动滚动的实例代码android 自定义ScrollView实现背景图片伸缩的实现代码及思路Android控件之ScrollView用法实例分析Android中ScrollView实现滑动距离监听器的方法android输入框与文本框加滚动条scrollview示例Android中自定义ScrollView代码实例Android开发基于ScrollView实现的渐变导航栏效果示例