Android頂部粘至視圖詳解

不知從某某時間開始，這種效果開始在UI設計中流行起來了，讓我們先來看看效果：

大家在支付寶、美團等很多App中都有使用，要實現這個效果，我們可以來分析下思路：

我們肯定要用2個一樣的布局來顯示我們的粘至布局，一個是正常的、另一個是到頂部不動的，正常的那個，隨著scroll一起滾，該滾到哪滾到哪，只是他滾到最上面的時候，

我們需要用粘至的布局，放到頂部，當然，他還在後面繼續滾，ok，現在我們來看看具體如何實現：

先看布局，just a demo，用幾張圖片稍微做做樣子。

粘至布局：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD48cD48L3A+PHByZSBjbGFzcz0="brush:java;">
主布局：

    

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

            

                

                

                

                

                
            

            
        </frameLayout>
    

由於ScrollView中並沒有提供scroll listener，因此我們只能重寫下，來創建一個接口：

package com.xys.scrolltrick;

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

public class TrickScroll extends ScrollView {

	public interface onScrollListener {
		public void onScroll(int scrollY);
	}

	private onScrollListener onScrollListener;

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

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

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

	public void setOnScrollListener(onScrollListener onsScrollListener) {
		this.onScrollListener = onsScrollListener;
	}

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);
		if (onScrollListener != null) {
			onScrollListener.onScroll(t);
		}
	}
}

主程序：

package com.xys.scrolltrick;

import android.app.Activity;
import android.os.Bundle;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.LinearLayout;

import com.xys.scrolltrick.TrickScroll.onScrollListener;

public class MainActivity extends Activity implements onScrollListener {

	private TrickScroll mScroll;
	// 正常狀態下的布局
	private LinearLayout mLayout1;
	// 頂部粘至的布局
	private LinearLayout mLayout2;

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

		mScroll = (TrickScroll) findViewById(R.id.scrollView);
		mLayout1 = (LinearLayout) findViewById(R.id.stick);
		mLayout2 = (LinearLayout) findViewById(R.id.normal);

		mScroll.setOnScrollListener(this);

		// 根布局狀態下，監聽布局改變
		findViewById(R.id.parent_layout).getViewTreeObserver()
				.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

					@Override
					public void onGlobalLayout() {
						onScroll(mScroll.getScrollY());
					}
				});
	}

	@Override
	public void onScroll(int scrollY) {
		// 獲取正常布局的位置來重新設置粘至布局的位置
		int layoutTop = Math.max(scrollY, mLayout1.getTop());
		mLayout2.layout(0, layoutTop, mLayout2.getWidth(),
				layoutTop + mLayout2.getHeight());
	}
}

其中的核心就在onScroll(int scrollY)這個方法中，我們用max函數來判斷當前最大值

這裡需要注意2個方法：

1、getTop()：該方法返回該view到容器的top像素

2、getScrollY()：該方法返回的是，你的scrollview已經滾了多少

－－－－－－－－－－－－－－－－－－－一旦這個世界有了scroll整個世界就不一樣了－－－－－－－－－－－－－－－－－－－

知道了這2個方法後，我們就可以判斷了，當滾的距離小於getTop()的時候，保持與正常的一樣，大於的時候，就需要用getScrollY()了，這個比較難理解，其實你可以把布局想象成一個紙帶，而手機屏幕是一個挖了孔的框，我們在後面從下往上拉紙帶，這樣就模擬了scroll滑動，這樣理解的話，會比較清楚點

以上。