高仿大众点评滑动效果
DemetriusDo
8年前
来自： 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下载还是比较啃爹的。
http://www.eoeandroid.com/thread-320387-1-1.html