高仿大众点评滑动效果

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