高仿大众点评滑动效果

最近在做一个项目，有点类似大众点评的效果。下面是大众点评的效果图片。有个立即购买的按钮，界面是可以滑动的，当上面的图片滑动到顶部的时候，立即抢购不会滑动上去。这样的效果还是比较简单的，还是和大家分享下。

 

下面简单描述下实现原理和步骤：

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下载还是比较啃爹的。

http://www.eoeandroid.com/thread-320387-1-1.html