高仿大眾點評滑動效果

DemetriusDo 8年前發布 | 7K 次閱讀 Android開發移動開發

來自： http://blog.csdn.net//guijiaoba/article/details/17882347

最近在做一個項目，有點類似大眾點評的效果。下面是大眾點評的效果圖片。有個立即購買的按鈕，界面是可以滑動的，當上面的圖片滑動到頂部的時候，立即搶購不會滑動上去。這樣的效果還是比較簡單的，還是和大家分享下。

下面簡單描述下實現原理和步驟：

1、首先定義一個布局，這個布局就是上面購買的橫條。下面是代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f00"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="￥38" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

2、然后就是activity的布局，這個布局引用上面的布局，不過要引用2次。

<RelativeLayout 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" >

    <ScrollView
        android:id="@+id/scrollview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/pic" />

            <include
                android:id="@+id/view_price1"
                layout="@layout/view_price" />

            <!-- 其他內容，暫時沒有 -->
        </LinearLayout>
    </ScrollView>

    <include
        android:id="@+id/view_price2"
        layout="@layout/view_price"
        android:visibility="gone" />

</RelativeLayout>

上面使用<include>標簽，標示引用這個布局，id分別是view_price1和view_price2，注意view_price2是gone的，這樣首先進入界面顯示scrollview里面的view1。

3、下面是activity的代碼部分，邏輯是堅挺scrollview的滑動，然后分別顯示view_price1和2。

public class MainActivity extends Activity {
    View viewPrice1;
    View viewPrice2;
    Button btnBuy1;
    Button btnBuy2;

    ScrollView scrollview;

    int heightOffset;

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

        viewPrice1 = findViewById(R.id.view_price1);
        viewPrice2 = findViewById(R.id.view_price2);

        scrollview = (ScrollView) findViewById(R.id.scrollview);

        btnBuy1 = (Button) viewPrice1.findViewById(R.id.button1);
        btnBuy2 = (Button) viewPrice2.findViewById(R.id.button1);

        viewPrice1.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                heightOffset = viewPrice1.getTop();
                viewPrice1.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        });

        scrollview.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {
            public void onScrollChanged() {
                int y = scrollview.getScrollY();
                if (y >= heightOffset) {
                    viewPrice2.setVisibility(View.VISIBLE);
                } else {
                    viewPrice2.setVisibility(View.GONE);
                }
            }
        });

        btnBuy1.setOnClickListener(clickListener);
        btnBuy2.setOnClickListener(clickListener);
    }

    View.OnClickListener clickListener = new View.OnClickListener() {
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "buy", Toast.LENGTH_SHORT).show();
        }
    };
}

在界面剛剛進入的時候，先堅挺全局的布局，然后得到scrollview里面圖片的高度，也就是view_price1的top，這樣在后面的滑動時候，可以以這個作為參考，當scrolly的大約這個高度的時候，說明這個2個view是重合的，可以顯示view2的界面，如果小于這個高度則把view2隱藏，這需要注意的時候，不用操作view的顯示與隱藏，因已經滑動到不能顯示的位置，所以就可以不用管它。

還有需要說明的是，使用OnGlobalLayoutListener可以監聽全局的布局，以前使用的是view里面的計算方法，比較麻煩，而且還不算靠譜，這個就是比較好。不過要在計算完成后把這個監聽給remove掉，不然后面會重復調用，我們代碼部分只需要調用一次即可。所以就去除了堅挺。

好了就說到這里，完整代碼可以到eoe上面下載，csdn下載還是比較啃爹的。