实现效果：
这个效果就是仿qq个人中心的下拉弹回效果实现。
核心就是一个 自定义的ScrollView，如下：
package com.baobao.testpullscrollview;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
public class PullScrollView extends ScrollView {
/** 阻尼系数,越小阻力就越大. */
private static final float SCROLL_RATIO = 0.5f;
/** 滑动至翻转的距离. */
private static final int TURN_DISTANCE = 100;
/** 头部view. */
private View mHeader;
/** 头部view高度. */
private int mHeaderHeight;
/** 头部view显示高度. */
private int mHeaderVisibleHeight;
/** ScrollView的content view. */
private View mContentView;
/** ScrollView的content view矩形. */
private Rect mContentRect = new Rect();
/** 首次点击的Y坐标. */
private float mTouchDownY;
/** 是否关闭ScrollView的滑动. */
private boolean mEnableTouch = false;
/** 是否开始移动. */
private boolean isMoving = false;
/** 是否移动到顶部位置. */
private boolean isTop = false;
/** 头部图片初始顶部和底部. */
private int mInitTop, mInitBottom;
/** 头部图片拖动时顶部和底部. */
private int mCurrentTop, mCurrentBottom;
/** 状态变化时的监听器. */
private OnTurnListener mOnTurnListener;
private enum State {
/**顶部*/
UP,
/**底部*/
DOWN,
/**正常*/
NORMAL
}
/** 状态. */
private State mState = State.NORMAL;
public PullScrollView(Context context) {
super(context);
init(context, null);
}
public PullScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public PullScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs);
}
@SuppressLint("NewApi")
private void init(Context context, AttributeSet attrs) {
// set scroll mode
setOverScrollMode(OVER_SCROLL_NEVER);
if (null != attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.PullScrollView);
if (ta != null) {
mHeaderHeight = (int) ta.getDimension(R.styleable.PullScrollView_headerHeight, -1);
mHeaderVisibleHeight = (int) ta.getDimension(R.styleable
.PullScrollView_headerVisibleHeight, -1);
ta.recycle();
}
}
}
/**
* 设置Header
*
* @param view
*/
public void setHeader(View view) {
mHeader = view;
}
/**
* 设置状态改变时的监听器
*
* @param turnListener
*/
public void setOnTurnListener(OnTurnListener turnListener) {
mOnTurnListener = turnListener;
}
@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
mContentView = getChildAt(0);
}
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (getScrollY() == 0) {
isTop = true;
}
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_DOWN) {
mTouchDownY = ev.getY();
mCurrentTop = mInitTop = mHeader.getTop();
mCurrentBottom = mInitBottom = mHeader.getBottom();
}
return super.onInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (mContentView != null) {
doTouchEvent(ev);
}
// 禁止控件本身的滑动.
return mEnableTouch || super.onTouchEvent(ev);
}
/**
* 触摸事件处理
*
* @param event
*/
private void doTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_MOVE:
doActionMove(event);
break;
case MotionEvent.ACTION_UP:
// 回滚动画
if (isNeedAnimation()) {
rollBackAnimation();
}
if (getScrollY() == 0) {
mState = State.NORMAL;
}
isMoving = false;
mEnableTouch = false;
break;
default:
break;
}
}
/**
* 执行移动动画
*
* @param event
*/
private void doActionMove(MotionEvent event) {
// 当滚动到顶部时，将状态设置为正常，避免先向上拖动再向下拖动到顶端后首次触摸不响应的问题
if (getScrollY() == 0) {
mState = State.NORMAL;
// 滑动经过顶部初始位置时，修正Touch down的坐标为当前Touch点的坐标
if (isTop) {
isTop = false;
mTouchDownY = event.getY();
}
}
float deltaY = event.getY() - mTouchDownY;
// 对于首次Touch操作要判断方位：UP OR DOWN
if (deltaY < 0 && mState == State.NORMAL) {
mState = State.UP;
} else if (deltaY > 0 && mState == State.NORMAL) {
mState = State.DOWN;
}
if (mState == State.UP) {
deltaY = deltaY < 0 ? deltaY : 0;
isMoving = false;
mEnableTouch = false;
} else if (mState == State.DOWN) {
if (getScrollY() <= deltaY) {
mEnableTouch = true;
isMoving = true;
}
deltaY = deltaY < 0 ? 0 : deltaY;
}
if (isMoving) {
// 初始化content view矩形
if (mContentRect.isEmpty()) {
// 保存正常的布局位置
mContentRect.set(mContentView.getLeft(), mContentView.getTop(), mContentView.getRight(),
mContentView.getBottom());
}
// 计算header移动距离(手势移动的距离*阻尼系数*0.5)
float headerMoveHeight = deltaY * 0.5f * SCROLL_RATIO;
mCurrentTop = (int) (mInitTop + headerMoveHeight);
mCurrentBottom = (int) (mInitBottom + headerMoveHeight);
// 计算content移动距离(手势移动的距离*阻尼系数)
float contentMoveHeight = deltaY * SCROLL_RATIO;
// 修正content移动的距离，避免超过header的底边缘
int headerBottom = mCurrentBottom - mHeaderVisibleHeight;
int top = (int) (mContentRect.top + contentMoveHeight);
int bottom = (int) (mContentRect.bottom + contentMoveHeight);
if (top <= headerBottom) {
// 移动content view
mContentView.layout(mContentRect.left, top, mContentRect.right, bottom);
// 移动header view
mHeader.layout(mHeader.getLeft(), mCurrentTop, mHeader.getRight(), mCurrentBottom);
}
}
}
private void rollBackAnimation() {
TranslateAnimation tranAnim = new TranslateAnimation(0, 0,
Math.abs(mInitTop - mCurrentTop), 0);
tranAnim.setDuration(200);
mHeader.startAnimation(tranAnim);
mHeader.layout(mHeader.getLeft(), mInitTop, mHeader.getRight(), mInitBottom);
// 开启移动动画
TranslateAnimation innerAnim = new TranslateAnimation(0, 0, mContentView.getTop(), mContentRect.top);
innerAnim.setDuration(200);
mContentView.startAnimation(innerAnim);
mContentView.layout(mContentRect.left, mContentRect.top, mContentRect.right, mContentRect.bottom);
mContentRect.setEmpty();
// 回调监听器
if (mCurrentTop > mInitTop + TURN_DISTANCE && mOnTurnListener != null){
mOnTurnListener.onTurn();
}
}
/**
* 是否需要开启动画
*/
private boolean isNeedAnimation() {
return !mContentRect.isEmpty() && isMoving;
}
/**
* 翻转事件监听器
*
* @author markmjw
*/
public interface OnTurnListener {
/**
* 翻转回调方法
*/
public void onTurn();
}
}
调用Activity
package com.baobao.testpullscrollview;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
public class MainActivity extends Activity implements PullScrollView.OnTurnListener{
private PullScrollView mScrollView;
private ImageView mHeadImg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mScrollView = (PullScrollView) findViewById(R.id.scroll_view);
mHeadImg = (ImageView) findViewById(R.id.background_img);
mScrollView.setHeader(mHeadImg);
mScrollView.setOnTurnListener(this);
}
@Override
public void onTurn() {
// TODO Auto-generated method stub
}
}
xml文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical" >
<ImageView
android:id="@+id/background_img"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="-100dp"
android:contentDescription="@null"
android:scaleType="fitXY"
android:src="@drawable/scrollview_header" />
<com.baobao.testpullscrollview.PullScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:headerHeight="300dp"
app:headerVisibleHeight="100dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent"
android:orientation="vertical" >
<RelativeLayout
android:id="@+id/scroll_view_head"
android:layout_width="match_parent"
android:layout_height="112dp"
android:layout_marginTop="100dp"
android:background="@color/transparent"
android:orientation="vertical" >
<ImageView
android:id="@+id/user_avatar"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_marginLeft="21dp"
android:background="@android:color/white"
android:contentDescription="@null"
android:padding="1px"
android:src="@drawable/avatar_default" />
<TextView
android:id="@+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="13dp"
android:layout_toRightOf="@id/user_avatar"
android:ellipsize="end"
android:shadowColor="@android:color/black"
android:shadowDx="3.0"
android:shadowDy="3.0"
android:shadowRadius="5.0"
android:singleLine="true"
android:text="@string/user_name"
android:textColor="@android:color/white"
android:textSize="20sp" />
<FrameLayout
android:id="@+id/user_divider_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/user_avatar"
android:layout_marginLeft="21dp"
android:layout_marginRight="21dp"
android:layout_marginTop="4dp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginTop="5dp"
android:background="#DFDFDF"
android:contentDescription="@null" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="29dp"
android:contentDescription="@null"
android:src="@drawable/arrow_up" />
</FrameLayout>
</RelativeLayout>
</LinearLayout>
</com.baobao.testpullscrollview.PullScrollView>
</RelativeLayout>实现效果图如上图，最后给大家奉上 DEMO源码下载
如果大家demo下载有问题或者有其他问题
欢迎加入我的qq群：开发一群：454430053开发二群：537532956
作者：shaoyezhangliwei 发表于2017/9/13 10:20:25 原文链接
阅读：50 评论：0 查看评论