Android中ScrollView 滑到頭部或尾部可伸縮放大效果
最近做項目,想要這么一個效果,就是ScrollView 滑動到頂部,當(dāng)不能在滑動的時候,圖片可以下拉放大,松開又恢復(fù)?;降撞繘]有內(nèi)容的時候,也有伸縮效果,先看看效果圖吧。

就是如上圖這么個效果。系統(tǒng)提供的ScrollView 是不能做到這個效果的,所以需要自己自定義,網(wǎng)上找了一些資料。也參考了下其他人的做法。自己也整合了一下。希望對大家有所幫助。
核心的控件就是下面的這段代碼:
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坐標(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; // 在這里要歸0.
}
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>
以上所述是小編給大家介紹的Android ScrollView 滑到頭部或尾部可伸縮放大效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Android中Toolbar隨著ScrollView滑動透明度漸變效果實現(xiàn)
- Android ScrollView滑動實現(xiàn)仿QQ空間標(biāo)題欄漸變
- android 實現(xiàn)ScrollView自動滾動的實例代碼
- android 自定義ScrollView實現(xiàn)背景圖片伸縮的實現(xiàn)代碼及思路
- Android控件之ScrollView用法實例分析
- Android中ScrollView實現(xiàn)滑動距離監(jiān)聽器的方法
- android輸入框與文本框加滾動條scrollview示例
- Android中自定義ScrollView代碼實例
- Android開發(fā)基于ScrollView實現(xiàn)的漸變導(dǎo)航欄效果示例
相關(guān)文章
Android打開淘寶客戶端(手淘)效果及實現(xiàn)代碼
這篇文章主要介紹了Android打開淘寶客戶端(手淘)效果及實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04
RecyclerView設(shè)置間距和添加分割線的方法
在使用RecyclerView布局,經(jīng)常需要調(diào)整間距和添加分割線以達到更美觀效果,這篇文章主要介紹了RecyclerView設(shè)置間距和添加分割線的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-09-09
Android應(yīng)用內(nèi)調(diào)用第三方應(yīng)用的方法
這篇文章主要介紹了Android應(yīng)用內(nèi)調(diào)用第三方應(yīng)用的方法,有需要的朋友可以參考一下2014-01-01
Android中ListView下拉刷新的實現(xiàn)方法實例分析
這篇文章主要介紹了Android中ListView下拉刷新的實現(xiàn)方法,涉及Android操作ListView的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Android EditText追加空格、限制字符等方法示例
這篇文章主要給大家介紹了關(guān)于Android EditText追加空格、限制字符等的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06

