高仿大众点评滑动效果
DemetriusDo
9年前
来自: 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