高仿大众点评滑动效果

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


 






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

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