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

轉帖請註明本文出自xiaanming的博客（https://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 https://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);
	}
	
	

}

接下來看看主界面的佈局文件

    

    

        <frameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            

                

                

                

                

                
            

            
        </frameLayout>
    

下面是佈局的效果圖

從主界面的佈局你可以看出，我們在上面放置瞭一個購買的佈局，可能你會想，先讓上面的佈局隱藏起來，等下面的佈局滑動上來就將其顯示出來，如果這樣子就跟我之前寫的那篇文章差不多，效果不是很棒，所以這篇修改版的肯定不是這樣子的，我們還是先看主界面的代碼吧vcD48cD48L3A+PHByZSBjbGFzcz0=”brush:java;”>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 https://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());

System.out.println(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不是相對於父佈局的，這點要註意下，這樣子也能實現效果，不過相對於此，要復雜的多，所以我們遇到類似的功能直接使用這種就行瞭，簡潔明瞭，好瞭，你是不迫不及待的想看下效果，那我們接下來就運行下程序吧

運行程序你會發現，無論我們怎麼滑動，都不會出現之前那篇文章的那些情況，很流暢吧，這跟美團，大眾點評的效果完全一致，好瞭，修改版的講解就到這裡結束瞭，有問題的請在下面留言，我會為大傢解答的！

很榮幸我能夠成為CSDN 2013年度博客之星評選的候選人，希望繼續得到大傢的支持與鼓勵,看到的朋友幫我投上寶貴的一票吧！

投票地址：https://vote.blog.csdn.net/blogstaritem/blogstar2013/xiaanming