效果图,分别是常态,向上滑动遮盖,向下拉伸放大
主要做了两个效果
1.向上滑动的时候下面部分会遮盖住图片,图片也会随着慢慢向上移动只是速度较慢。
2.向下拉的时候图片会放大,松手后图片恢复原来大小。
实现过程
这整个是一个下拉刷新列表,图片是listview的header内的一个child,改写于一个开源的下拉刷新列表xlistview
向上滑动的过程中,监听scroll事件,获得列表第一个child的top的位置t0,当firstItem==0 && t0<=0证明是遮盖的过程并且尚未完全遮盖,
然后通过Viewhelper移动图片的位置,速度是上滑速度的一半。
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
{
// send to user's listener
mTotalItemCount = totalItemCount;
if (mScrollListener != null)
{
mScrollListener.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount);
}
View c0 = view.getChildAt(0);
try
{
t0 = c0.getTop();
if (firstVisibleItem == 0 && t0 <= 0)
{
ViewHelper.setY(mHeaderViewContent, -t0 / 2);
}
}
catch (Exception e)
{
}
}
下拉过程监听touch事件,获得偏移量final float deltaY = ev.getRawY() - mLastY;,当deltaY>0的时候进行放大图片操作updateHeaderHeight(deltaY / OFFSET_RADIO);
@Override
public boolean onTouchEvent(MotionEvent ev)
{
if (mLastY == -1)
{
mLastY = ev.getRawY();
}
switch (ev.getAction())
{
case MotionEvent.ACTION_DOWN:
mLastY = ev.getRawY();
getParent().requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
final float deltaY = ev.getRawY() - mLastY;
mLastY = ev.getRawY();
if (getFirstVisiblePosition() == 0 && (mHeaderView.getVisiableHeight() > 0 || deltaY > 0) && !mPullRefreshing)
{
// the first item is showing, header has shown or pull down.
if (mEnablePullRefresh)
{
if (deltaY > 0)
{
updateHeaderHeight(deltaY / OFFSET_RADIO);
}
invokeOnScrolling();
}
}
else if (getLastVisiblePosition() == mTotalItemCount - 1 && (mFooterView.getBottomMargin() > 0 || deltaY < 0) && !mPullLoading)
{
// last item, already pulled up or want to pull up.
if (mEnablePullLoad)
{
updateFooterHeight(-deltaY / OFFSET_RADIO);
}
}
break;
default:
getParent().requestDisallowInterceptTouchEvent(false);
mLastY = -1; // reset
if (getFirstVisiblePosition() == 0)
{
// invoke refresh
// startOnRefresh();
resetHeaderHeight();
}
else if (getLastVisiblePosition() == mTotalItemCount - 1)
{
// invoke load more.
startLoadMore();
resetFooterHeight();
}
break;
}
// if(!canScrollVertically(1))
// {
// return false;
// }
return super.onTouchEvent(ev);
}
protected void updateHeaderHeight(float delta)
{
if (t0 < 0) return;
mHeaderView.setVisiableHeight((int) delta + mHeaderView.getVisiableHeight());
if (mEnablePullRefresh && !mPullRefreshing)
{
if (mHeaderView.getVisiableHeight() > mHeaderViewHeight)
{
// System.out.println("not mPullRefreshing");
mHeaderView.setState(GListViewHeader.STATE_READY);
}
else
{
// System.out.println("mPullRefreshing");
mHeaderView.setState(GListViewHeader.STATE_NORMAL);
}
}
setSelection(0); // scroll to top each time
}
放一张应用在高仿天猫项目中的图片