购买栏悬浮效果实现

在各电商APP的商品详情页中，我们经常会看到这种效果。

默认情况下，购买栏显示在商品图片下方：


当页面向上滑动，购买栏滑动到屏幕顶部时，会一直固定在屏幕顶部：

今天我们来实现这种显示效果。

实现思路：
首先，页面能够滚动，需要ScrollView的支持。在ScrollView内部，包含一个垂直方向的LinearLayout，商品图片和购买栏呈垂直线性排列，这些都比较容易想到。难点在于如何把页面中的购买栏固定住，而页面还可以继续滚动。那么我们就变换一下思维，如果从一开始，在屏幕的顶部就一直存在着一个一模一样的购买栏，只不过是隐藏状态，当商品图片下边的购买栏滑动到屏幕顶部时，我们将屏幕顶部已有的购买栏显示出来就好啦。

思路图：


基于上述思路，我们就有了下面的布局代码：

好了，下面开始用代码实现逻辑了。
我们首先要获取到商品图片区域的高度，然后监听ScrollView在垂直方向的滚动距离，当滚动距离大于商品图片的高度时，就将屏幕顶部的购买栏显示出来，否则将其隐藏。

监听滚动，很容易会想到setOnScrollChangeListener(OnScrollChangeListener l)方法。不过，很遗憾的是，ScrollView只有在api level 23以上，才提供了该方法。那么，在低版本中，我们如何监听ScrollView的滚动呢？

我们发现，在ScrollView中，有如下方法。

/**
  * This is called in response to an internal scroll in this view (i.e., the
  * view scrolled its own contents). This is typically as a result of
  * {@link #scrollBy(int, int)} or {@link #scrollTo(int, int)} having been
  * called.
  *
  * @param l Current horizontal scroll origin.
  * @param t Current vertical scroll origin.
  * @param oldl Previous horizontal scroll origin.
  * @param oldt Previous vertical scroll origin.
  */
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  // ...
}

而且，该方法是protected的，那么我们可以自定义一个View，继承自ScrollView，然后重写onScrollChanged()方法，将参数t（垂直方向的滚动距离）回调出去为我们所用。

实现如下。

package net.csdn.blog.ruancoder;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

public class ScrollChangedView extends ScrollView {
    private OnScrollChangedListener mListener;

    public void setOnScrollChangedListener(OnScrollChangedListener listener) {
        this.mListener = listener;
    }

    public ScrollChangedView(Context context) {
        super(context);
    }

    public ScrollChangedView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ScrollChangedView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mListener != null) {
            // 将ScrollView垂直方向滚动的距离回调出去
            mListener.onScrollChanged(t);
        }
    }

    public interface OnScrollChangedListener {
        void onScrollChanged(int scrollY);
    }
}

然后在Activity中，监听ScrollChangedView.OnScrollChangedListener，根据scrollY的大小来控制顶部购买栏的显示或隐藏，就可以实现上述效果。

package net.csdn.blog.ruancoder;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewTreeObserver;

public class MainActivity extends Activity implements ScrollChangedView.OnScrollChangedListener {
    private View mFixedBuyBar;// 顶部固定的购买栏
    private int mTopViewHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final View topView = findViewById(R.id.top_view);
        mFixedBuyBar = findViewById(R.id.fixed_buy_button_bar);
        mFixedBuyBar.setVisibility(View.GONE);

        final ScrollChangedView scrollView = (ScrollChangedView) findViewById(R.id.scrollview);
        scrollView.setOnScrollChangedListener(this);

        scrollView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                // 获取顶部视图的高度
                mTopViewHeight = topView.getHeight();
                scrollView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });
    }

    @Override
    public void onScrollChanged(int scrollY) {
        if (scrollY > mTopViewHeight) {// 滚动超出顶部视图的高度，此时显示顶部固定的购买栏
            mFixedBuyBar.setVisibility(View.VISIBLE);
        } else {// 否则，隐藏顶部固定的购买栏
            mFixedBuyBar.setVisibility(View.GONE);
        }
    }
}

最后附上完整工程代码下载链接：
http://download.csdn.net/detail/ruancoder/9594054