android 仿天猫商品详情界面滑动效果

      demo地址

效果图，分别是常态，向上滑动遮盖，向下拉伸放大

     

主要做了两个效果

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


    }

放一张应用在高仿天猫项目中的图片