Android 仿美團網,大衆點評購買框懸浮效果之修改版

本文出自xiaanming的博客（http://blog.csdn.net/xiaanming/article/details/17761431），請尊重他人的辛勤勞動成果，謝謝！

我之前寫了一篇關於美團網，大衆點評的購買框效果的文章Android對ScrollView滾動監聽，實現美團、大衆點評的購買懸浮效果，我自己感覺效果並不是很好，如果快速滑動界面，顯示懸浮框的時候會出現一卡的現象，有些朋友說有時候會出現兩個佈局的情況，特別是對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;  
/** 
 * @blog http://blog.csdn.net/xiaanming 
 *  
 * @author xiaanming 
 * 
 */  
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);  
        }  
    }  
  
  
  
    /** 
     *  
     * 滾動的回調接口 
     *  
     * @author xiaanming 
     * 
     */  
    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;  
  
/** 
 * @blog http://blog.csdn.net/xiaanming 
 *  
 * @author xiaanming 
 * 
 */  
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>