转帖请注明本文出自xiaanming的博客（），请尊重他人的辛勤劳动成果，谢谢！
随着移动互联网的快速发展，它已经和我们的生活息息相关了，在公交地铁里面都能看到很多人的人低头看着自己的手机屏幕，从此“低头族”一词就产生了，作为一名移动行业的开发人员，我自己也是一名“低头族”，上下班时间在公交地铁上看看新闻来打发下时间，有时候也会看看那些受欢迎的App的一些界面效果，为什么人家的app那么受欢迎？跟用户体验跟UI设计也有直接的关系，最近在美团和大众点评的App看到如下效果，我感觉用户好，很人性化，所以自己也尝试着实现了下，接下来就讲解下实现思路！
如上图(2)我们看到了，当立即抢购布局向上滑动到导航栏布局的时候，立即抢购布局就贴在导航栏布局下面，下面的其他的布局还是可以滑动，当我们向下滑动的时候，立即抢购的布局又随着往下滑动了，看似有点复杂，但是一说思路可能你就顿时恍然大悟了。
当我们向上滑动过程中，我们判断立即抢购的布局是否滑到导航栏布局下面，如果立即抢购的上面顶到了导航栏，我们新建一个立即抢购的悬浮框来显示在导航栏下面，这样子就实现了立即抢购贴在导航栏下面的效果啦，而当我们向下滑动的时候，当立即抢购布局的下面刚好到了刚刚新建的立即抢购悬浮框的下面的时候，我们就移除立即抢购悬浮框，可能说的有点拗口，既然知道了思路，接下来我们就来实现效果。
新建一个Android项目，取名MeiTuanDemo,先看立即抢购（buy_layout.xml）的布局，这里为了方便我直接从美团上面截去了图片
<?xml version="1.0" encoding="UTF-8"?><LinearLayout xmlns:android=""android:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/buy_layout"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="@drawable/buy" /></LinearLayout>立即抢购的布局实现了，接下来实现主界面的布局，上面是导航栏布局，为了方便还是直接从美团截取的图片，然后下面的ViewPager布局，立即抢购布局，其他布局 放在ScrollView里面，界面还是很简单的<LinearLayout xmlns:android=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><ImageViewandroid:id="@+id/imageView1"android:scaleType="centerCrop"android:layout_width="match_parent"android:layout_height="45dip"android:src="@drawable/navigation_bar" /><com.example.meituandemo.MyScrollViewandroid:id="@+id/scrollView"android:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><ImageViewandroid:id="@+id/iamge"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/pic"android:scaleType="centerCrop" /><includeandroid:id="@+id/buy"layout="@layout/buy_layout" /><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/one"android:scaleType="centerCrop" /><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/one"android:scaleType="centerCrop" /><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/one"android:scaleType="centerCrop" /></LinearLayout></com.example.meituandemo.MyScrollView></LinearLayout>
你会发现上面的主界面布局中并不是ScrollView,而是自定义的一个MyScrollView,接下来就看看MyScrollView类中的代码
package com.example.meituandemo;import android.content.Context;import android.os.Handler;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.ScrollView;/** * 博客地址: * * @author xiaanming * */public class MyScrollView extends ScrollView {private OnScrollListener onScrollListener;/** * 主要是用在用户手指离开MyScrollView，MyScrollView还在继续滑动，我们用来保存Y的距离，然后做比较 */private int lastScrollY;public MyScrollView(Context context) {this(context, null);}public MyScrollView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MyScrollView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}/** * 设置滚动接口 * @param onScrollListener */public void setOnScrollListener(OnScrollListener onScrollListener) {this.onScrollListener = onScrollListener;}/** * 用于用户手指离开MyScrollView的时候获取MyScrollView滚动的Y距离，然后回调给onScroll方法中 */private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {int scrollY = MyScrollView.this.getScrollY();//此时的距离和记录下的距离不相等，在隔5毫秒给handler发送消息if(lastScrollY != scrollY){lastScrollY = scrollY;handler.sendMessageDelayed(handler.obtainMessage(), 5);}if(onScrollListener != null){onScrollListener.onScroll(scrollY);}};}; /** * 重写onTouchEvent， 当用户的手在MyScrollView上面的时候， * 直接将MyScrollView滑动的Y方向距离回调给onScroll方法中，当用户抬起手的时候， * MyScrollView可能还在滑动，所以当用户抬起手我们隔5毫秒给handler发送消息，在handler处理 * MyScrollView滑动的距离 */@Overridepublic boolean onTouchEvent(MotionEvent ev) {if(onScrollListener != null){onScrollListener.onScroll(lastScrollY = this.getScrollY());}switch(ev.getAction()){case MotionEvent.ACTION_UP:handler.sendMessageDelayed(handler.obtainMessage(), 5);break;}return super.onTouchEvent(ev);}/** * * 滚动的回调接口 * * @author xiaanming * */public interface OnScrollListener{/** * 回调方法， 返回MyScrollView滑动的Y方向距离 * @param scrollY *、 */public void onScroll(int scrollY);}}一看代码你也许明白了，就是对ScrollView的滚动Y值进行监听，我们知道ScrollView并没有实现滚动监听，所以我们必须自行实现对ScrollView的监听，我们很自然的想到在onTouchEvent()方法中实现对滚动Y轴进行监听，可是你会发现，我们在滑动ScrollView的时候，当我们手指离开ScrollView。它可能还会继续滑动一段距离，所以我们选择在用户手指离开的时候每隔5毫秒来判断ScrollView是否停止滑动，并将ScrollView的滚动Y值回调给OnScrollListener接口的onScroll(int scrollY)方法中，我们只需要对ScrollView调用我们只需要对ScrollView调用setOnScrollListener方法就能监听到滚动的Y值。别人失去了信心，他却下决心实现自己的目标。
