怎么在Android中利用ScrollView 實(shí)現(xiàn)一個伸縮放大效果

這篇文章給大家介紹怎么在Android中利用ScrollView 實(shí)現(xiàn)一個伸縮放大效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

核心的控件就是下面的這段代碼：

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;// 點(diǎn)擊時y坐標(biāo) 
 private Rect normal = new Rect();// 矩形(這里只是個形式，只是用于判斷是否需要動畫.) 
 private boolean isCount = false;// 是否開始計算 
 //最后的坐標(biāo) 
 private float lastX = 0; 
 private float lastY = 0; 
 //當(dāng)前坐標(biāo) 
 private float currentX = 0; 
 private float currentY = 0; 
 //移動的坐標(biāo)量 
 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); 
  } 
 } 
 } 
 /*** 
 * 生成視圖工作完成.該函數(shù)在生成視圖的最后調(diào)用，在所有子視圖添加完之后. 即使子類覆蓋了 onFinishInflate 
 * 方法，也應(yīng)該調(diào)用父類的方法，使該方法得以執(zhí)行. 
 */ 
 @Override 
 protected void onFinishInflate() { 
 //初始化 
 init(); 
 super.onFinishInflate(); 
 } 
 @Override 
 public boolean dispatchTouchEvent(MotionEvent ev) { 
 //這里只是計算尾部坐標(biāo) 
 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: 
  //手指離開后頭部恢復(fù)圖片 
  mScaling = false; 
  replyImage(); 
  // 手指松開尾部恢復(fù) 
  if (isNeedAnimation()) { 
   animation(); 
   isCount = false; 
  } 
  clear0(); 
  break; 
  //這里頭尾分開處理，互不干擾 
  case MotionEvent.ACTION_MOVE: 
  //尾部處理 
  final float preY = y;// 按下時的y坐標(biāo) 
  float nowY = ev.getY();// 時時y坐標(biāo) 
  int deltaY = (int) (preY - nowY);// 滑動距離 
  if (!isCount) { 
   deltaY = 0; // 在這里要?dú)w0. 
  } 
  y = nowY; 
  // 當(dāng)滾動到最上或者最下時就不會再滾動，這時移動布局 
  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); // 滾動距離乘以一個系數(shù) 
  if (distance < 0) { // 當(dāng)前位置比記錄位置要小，正常返回 
   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); 
 // 設(shè)置回到正常的布局位置 
 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; 
 // 設(shè)置動畫 
 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>

關(guān)于怎么在Android中利用ScrollView 實(shí)現(xiàn)一個伸縮放大效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。