模仿美团点评的Android应用中价格和购买栏悬浮固定的效果
作者：xiaanming
随着移动互联网的快速发展，它已经和我们的生活息息相关了，在公交地铁里面都能看到很多人的人低头看着自己的手机屏幕，从此“低头族”一词就产生了，作为一名移动行业的开发人员，我自己也是一名“低头族”，上下班时间在公交地铁上看看新闻来打发下时间，有时候也会看看那些受欢迎的App的一些界面效果，为什么人家的app那么受欢迎？跟用户体验跟UI设计也有直接的关系，最近在美团和大众点评的App看到如下效果，我感觉用户好，很人性化，所以自己也尝试着实现了下，接下来就讲解下实现思路！
如上图(2)我们看到了，当立即抢购布局向上滑动到导航栏布局的时候，立即抢购布局就贴在导航栏布局下面，下面的其他的布局还是可以滑动，当我们向下滑动的时候，立即抢购的布局又随着往下滑动了，看似有点复杂，但是一说思路可能你就顿时恍然大悟了。
当我们向上滑动过程中，我们判断立即抢购的布局是否滑到导航栏布局下面，如果立即抢购的上面顶到了导航栏，我们新建一个立即抢购的悬浮框来显示在导航栏下面，这样子就实现了立即抢购贴在导航栏下面的效果啦，而当我们向下滑动的时候，当立即抢购布局的下面刚好到了刚刚新建的立即抢购悬浮框的下面的时候，我们就移除立即抢购悬浮框，可能说的有点拗口，既然知道了思路，接下来我们就来实现效果。
新建一个Android项目，取名MeiTuanDemo,先看立即抢购（buy_layout.xml）的布局，这里为了方便我直接从美团上面截去了图片
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/buy_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/buy" />
</LinearLayout>
立即抢购的布局实现了，接下来实现主界面的布局，上面是导航栏布局，为了方便还是直接从美团截取的图片，然后下面的ViewPager布局，立即抢购布局，其他布局 放在ScrollView里面，界面还是很简单的
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="45dip"
android:src="@drawable/navigation_bar" />
<com.example.meituandemo.MyScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/iamge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/pic"
android:scaleType="centerCrop" />
<include
android:id="@+id/buy"
layout="@layout/buy_layout" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android: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;
/**
* 博客地址:http://blog.csdn.net/xiaanming
*
* @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滑动的距离
*/
@Override
public 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值。
实现了对ScrollView滚动的Y值进行监听，接下来就简单了，我们只需要显示立即抢购悬浮框和移除悬浮框了，接下来看看主界面Activity的代码编写
package com.example.meituandemo;
import android.app.Activity;
import android.content.Context;
import android.graphics.PixelFormat;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.view.WindowManager.LayoutParams;
import android.widget.LinearLayout;
import com.example.meituandemo.MyScrollView.OnScrollListener;
/**
* 博客地址:http://blog.csdn.net/xiaanming
*
* @author xiaanming
*
*/
public class MainActivity extends Activity implements OnScrollListener{
private MyScrollView myScrollView;
private LinearLayout mBuyLayout;
private WindowManager mWindowManager;
/**
* 手机屏幕宽度
*/
private int screenWidth;
/**
* 悬浮框View
*/
private static View suspendView;
/**
* 悬浮框的参数
*/
private static WindowManager.LayoutParams suspendLayoutParams;
/**
* 购买布局的高度
*/
private int buyLayoutHeight;
/**
* myScrollView与其父类布局的顶部距离
*/
private int myScrollViewTop;
/**
* 购买布局与其父类布局的顶部距离
*/
private int buyLayoutTop;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myScrollView = (MyScrollView) findViewById(R.id.scrollView);
mBuyLayout = (LinearLayout) findViewById(R.id.buy);
myScrollView.setOnScrollListener(this);
mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
screenWidth = mWindowManager.getDefaultDisplay().getWidth();
}
/**
* 窗口有焦点的时候，即所有的布局绘制完毕的时候，我们来获取购买布局的高度和myScrollView距离父类布局的顶部位置
*/
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hasFocus){
buyLayoutHeight = mBuyLayout.getHeight();
buyLayoutTop = mBuyLayout.getTop();
myScrollViewTop = myScrollView.getTop();
}
}
/**
* 滚动的回调方法，当滚动的Y距离大于或者等于 购买布局距离父类布局顶部的位置，就显示购买的悬浮框
* 当滚动的Y的距离小于 购买布局距离父类布局顶部的位置加上购买布局的高度就移除购买的悬浮框
*
*/
@Override
public void onScroll(int scrollY) {
if(scrollY >= buyLayoutTop){
if(suspendView == null){
showSuspend();
}
}else if(scrollY <= buyLayoutTop + buyLayoutHeight){
if(suspendView != null){
removeSuspend();
}
}
}
/**
* 显示购买的悬浮框
*/
private void showSuspend(){
if(suspendView == null){
suspendView = LayoutInflater.from(this).inflate(R.layout.buy_layout, null);
if(suspendLayoutParams == null){
suspendLayoutParams = new LayoutParams();
suspendLayoutParams.type = LayoutParams.TYPE_PHONE; //悬浮窗的类型，一般设为2002，表示在所有应用程序之上，但在状态栏之下
suspendLayoutParams.format = PixelFormat.RGBA_8888;
suspendLayoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
| LayoutParams.FLAG_NOT_FOCUSABLE; //悬浮窗的行为，比如说不可聚焦，非模态对话框等等
suspendLayoutParams.gravity = Gravity.TOP; //悬浮窗的对齐方式
suspendLayoutParams.width = screenWidth;
suspendLayoutParams.height = buyLayoutHeight;
suspendLayoutParams.x = 0; //悬浮窗X的位置
suspendLayoutParams.y = myScrollViewTop; ////悬浮窗Y的位置
}
}
mWindowManager.addView(suspendView, suspendLayoutParams);
}
/**
* 移除购买的悬浮框
*/
private void removeSuspend(){
if(suspendView != null){
mWindowManager.removeView(suspendView);
suspendView = null;
}
}
}
上面的代码比较简单，根据ScrollView滑动的距离来判断显示和移除悬浮框，悬浮框的实现主要是通过WindowManager这个类来实现的，调用这个类的addView方法用于添加一个悬浮框，removeView用于移除悬浮框。
通过上述代码就实现了美团，大众点评的这种效果，在运行项目之前我们必须在AndroidManifest.xml中加入<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
我们运行下项目看下效果吧
一个修改版
上面的代码，其实我自己感觉效果并不是很好，如果快速滑动界面，显示悬浮框的时候会出现一卡的现象，有些朋友说有时候会出现两个布局的情况，特别是对ScrollView滚动的Y值得监听，我还使用了Handler来获取，还有朋友给我介绍了Scrolling Tricks这个东西，我下载试了下，确实美团网，大众点评的购买框用的是这种效果，但是Scrolling Tricks只能在API11以上使用，这个有点小悲剧，然后我做了下修改，并将实现思路分享给大家，实现起来很简单
首先还是要先对ScrollView进行滚动监听，直接在onScrollChanged()方法中就能获取滚动的Y值，之前那里使用了Handler，走弯路了，直接看代码吧
package com.example.meituandemo;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
public class MyScrollView extends ScrollView {
private OnScrollListener onScrollListener;
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;
}
@Override
public int computeVerticalScrollRange() {
return super.computeVerticalScrollRange();
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if(onScrollListener != null){
onScrollListener.onScroll(t);
}
}
/**
*
* 滚动的回调接口
*/
public interface OnScrollListener{
/**
* 回调方法， 返回MyScrollView滑动的Y方向距离
* @param scrollY
* 、
*/
public void onScroll(int scrollY);
}
}
接下来看看主界面的布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/parent_layout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="45dip"
android:scaleType="centerCrop"
android:src="@drawable/navigation_bar" />
<com.example.meituandemo.MyScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/iamge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/pic"
android:scaleType="centerCrop" />
<include
android:id="@+id/buy"
layout="@layout/buy_layout" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
</LinearLayout>
<include
android:id="@+id/top_buy_layout"
layout="@layout/buy_layout" />
</FrameLayout>
</com.example.meituandemo.MyScrollView>
</LinearLayout>
下面是布局的效果图
从主界面的布局你可以看出，我们在上面放置了一个购买的布局，可能你会想，先让上面的布局隐藏起来，等下面的布局滑动上来就将其显示出来，如果这样子就跟我之前写的那篇文章差不多，效果不是很棒，所以这篇修改版的肯定不是这样子的，我们还是先看主界面的代码吧
package com.example.meituandemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.LinearLayout;
import com.example.meituandemo.MyScrollView.OnScrollListener;
public class MainActivity extends Activity implements OnScrollListener{
/**
* 自定义的MyScrollView
*/
private MyScrollView myScrollView;
/**
* 在MyScrollView里面的购买布局
*/
private LinearLayout mBuyLayout;
/**
* 位于顶部的购买布局
*/
private LinearLayout mTopBuyLayout;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myScrollView = (MyScrollView) findViewById(R.id.scrollView);
mBuyLayout = (LinearLayout) findViewById(R.id.buy);
mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);
myScrollView.setOnScrollListener(this);
//当布局的状态或者控件的可见性发生改变回调的接口
findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//这一步很重要，使得上面的购买布局和下面的购买布局重合
onScroll(myScrollView.getScrollY());
}
});
}
@Override
public void onScroll(int scrollY) {
int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());
mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());
}
}
主界面就短短的几行代码，可能看完这些代码你还是没有明白到底是怎么做到的，没关系，我给大家说说，其实我们是让上面的购买布局和下面的购买布局重合起来了，layout()这个方法是确定View的大小和位置的，然后将其绘制出来，里面的四个参数分别是View的四个点的坐标，他的坐标不是相对屏幕的原点，而且相对于他的父布局来说的，
我们在主页面最外层的ViewGroup添加了布局状态改变的监听器，当绘制完了屏幕会回调到方法onGlobalLayout()中，我们在onGlobalLayout()方法中手动调用了下onScroll()方法，刚开始myScrollView.getScrollY()等于0，所以说当scrollY小于mBuyLayout.getTop()的时候，上面的购买布局的上边缘到myScrollView的上边缘的距离等于mBuyLayout.getTop()(即下面布局的上边缘到myScrollView的上边缘）所以刚开始上面的购买布局和下面的购买布局重合了。
当myScrollView向上滚动，而上面购买布局的上边缘始终要和myScrollView的上边缘保持mBuyLayout.getTop()这个距离，所以上面的购买布局也跟着向上滚动，当scrollY大于mBuyLayout.getTop()的时候，表示购买布局上边缘滑动到了导航栏布局，所以此时购买布局的上边缘与myScrollView的上边缘始终要保持scrollY这个距离，所以购买布局才会一直在导航栏下面，就好像粘住了一样，不知道你了解了没有？好了，不过根据这种思路你也可以刚开始使用一个悬浮框来覆盖在下面的购买布局上面，然后onScroll()方法中更新悬浮框的位置，不过悬浮框的x,y不是相对于父布局的，这点要注意下，这样子也能实现效果，不过相对于此，要复杂的多，所以我们遇到类似的功能直接使用这种就行了，简洁明了，好了，你是不迫不及待的想看下效果，那我们接下来就运行下程序吧
含有多个购买布局的效果，下一个购买布局会将上一个购买布局顶上去，使用方法也很简单，只需要将你需要设置的布局设置Tag为sticky， 如
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="100dip"
android:background="#ff00ffff"
android:tag="sticky" >
<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>
这样子这个布局滚动到了顶部就会粘在顶部，大家可以试试！