栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 移动开发 > Android

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

Android 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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例子:

 
 
  
  
  
   
   
  
  
   
   
   
   
   
   
  

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/159359.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号