Android 仿大众点评团购购买条浮动效果

在大众点评团购中，有这样一个效果. 在具体的团购页面中商家图片下有一个购买条，当用户滚动团购详情界面的时候，购买条会停留在界面的最上方. 具体效果如图:

                图1                                        图2

                                     图3

大家可以看到，大众点评中，为了突出这个购买条，当向上滚动时，该滚动条会显示在最上面(如图2)，而当用户滑动回来的时候，又可以恢复回第一张图的样子(如图1).

下面说一下具体的实现思路:

 

从这张图，我们可以看下具体的布局.实际上在最顶部的位置，有一个购买条1，最开始的时候是隐藏的，而当从上向下滑动到具体位置的时候将购买条1显示，将购买条2隐藏.

相反，当滑动回来的时候，讲购买条2显示，将购买条1隐藏.

核心的部分就是我们要去根据ScrollView的滑动高度去控制购买条的显示与隐藏.这里要注意的就是一定要判断好这个滑动的高度，否则会出现不平滑的效果，影响用户体验.

看一下这张图(画得很丑，希望大家不介意),当上面的原始视图滑动到这个位置时，也就是刚好原来上面的部分留在界面中的刚好是购买条的高度时，我们需要将隐藏的购买条显示出来，再将原来的购买条隐藏，这样子就不会有突兀的效果，从而使效果变得平滑.当界面从下向上的时候也是一样，这里不再复述.具体的还是大家看下代码：

布局文件:

activity_main.xml:

[java] view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <com.tony.orderview.OrderView  
7.         android:id="@+id/refreshview"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:background="#77aaaa" >  
11.   
12.         <ScrollView  
13.             android:id="@+id/scrollview"  
14.             android:layout_width="fill_parent"  
15.             android:layout_height="fill_parent"  
16.             android:background="#accaac" >  
17.   
18.             <LinearLayout  
19.                 android:layout_width="fill_parent"  
20.                 android:layout_height="wrap_content"  
21.                 android:orientation="vertical" >  
22.   
23.                 <LinearLayout  
24.                     android:layout_width="fill_parent"  
25.                     android:layout_height="250dip"  
26.                     android:background="@drawable/upload"  
27.                     android:text="one"  
28.                     android:textColor="#ffccee" />  
29.   
30.                 <include  
31.                     android:id="@+id/theview"  
32.                     layout="@layout/deal_buy_item" />  
33.   
34.                 <TextView  
35.                     android:layout_width="fill_parent"  
36.                     android:layout_height="1250dip"  
37.                     android:background="@drawable/ic_tuan_info_bg_1"  
38.                     android:text="粥面故事   仅售49元，超值享受哦" />  
39.   
40.                 <TextView  
41.                      
42.                     android:layout_width="fill_parent"  
43.                     android:layout_height="50dip"  
44.                     android:background="#ff0055"  
45.                     android:text="支持随时退" />  
46.             </LinearLayout>  
47.         </ScrollView>  
48.     </com.tony.orderview.OrderView>  
49.   
50.     <include  
51.          android:visibility="gone"  
52.         android:id="@+id/theviewstay"  
53.         layout="@layout/deal_buy_item" />  
54.   
55. </RelativeLayout>  

购买条布局:

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="65.0dip"  
5.     android:background="@drawable/ic_tuan_info_bg_1"  
6.     android:orientation="vertical" >  
7.   
8.     <LinearLayout  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="0.0dip"  
11.         android:layout_weight="1.0"  
12.         android:gravity="center_vertical"  
13.         android:orientation="horizontal"  
14.         android:paddingLeft="10.0dip"  
15.         android:paddingRight="10.0dip" >  
16.   
17.         <LinearLayout  
18.             android:layout_width="0.0dip"  
19.             android:layout_height="fill_parent"  
20.             android:layout_weight="1.0"  
21.             android:gravity="center_vertical"  
22.             android:orientation="vertical" >  
23.   
24.             <TextView  
25.                 android:layout_width="wrap_content"  
26.                 android:layout_height="wrap_content"  
27.                 android:layout_marginRight="8.0dip"  
28.                 android:singleLine="true"  
29.                 android:textColor="#ffe55600"  
30.                 android:textSize="21.0sp" />  
31.   
32.             <TextView  
33.                 android:layout_width="wrap_content"  
34.                 android:layout_height="wrap_content"  
35.                 android:ellipsize="end"  
36.                 android:singleLine="true"  
37.                 android:textColor="#ff979797"  
38.                 android:textSize="12.0sp" />  
39.         </LinearLayout>  
40.   
41.         <Button  
42.             android:layout_width="wrap_content"  
43.             android:layout_height="wrap_content"  
44.             android:ellipsize="end"  
45.             android:maxLines="1"  
46.             android:minWidth="150.0dip"  
47.             android:text="立即抢购"  
48.             android:textAppearance="?android:textAppearanceMedium" />  
49.     </LinearLayout>  
50.   
51.     <ImageView  
52.         android:layout_width="fill_parent"  
53.         android:layout_height="1.0dip"  
54.         android:background="@drawable/ic_tuan_info_bg_3" />  
55.   
56. </LinearLayout>  

MainActivity:

[java] view plain copy

1. package com.tony.orderview;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.Menu;  
6. import android.view.View;  
7. import android.widget.ScrollView;  
8.   
9. import com.example.stayview.R;  
10. import com.tony.orderview.OrderView.StayViewListener;  
11.   
12. public class MainActivity extends Activity {  
13.   
14.     @Override  
15.     public void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.activity_main);  
18.           
19.         OrderView refreshableView = (OrderView) findViewById(R.id.refreshview);  
20.           
21.         refreshableView.setStayView(findViewById(R.id.theview), (ScrollView)findViewById(R.id.scrollview),new StayViewListener() {  
22.             @Override  
23.             public void onStayViewShow() {  
24.                 //从下往上拉的时候回复显示  
25.                 findViewById(R.id.theviewstay).setVisibility(View.VISIBLE);  
26.                   
27.             }  
28.               
29.             @Override  
30.             public void onStayViewGone() {  
31.                 //从上往下拉隐藏布局  
32.                 findViewById(R.id.theviewstay).setVisibility(View.GONE);  
33.                   
34.             }  
35.         });  
36.           
37.           
38.     }  
39.   
40.     @Override  
41.     public boolean onCreateOptionsMenu(Menu menu) {  
42.         getMenuInflater().inflate(R.menu.activity_main, menu);  
43.         return true;  
44.     }  
45.   
46.       
47. }  

接着是最核心的部分，具体控制高度显示隐藏，我是这样做的，重写了一个OrderView,套在整个布局外面,然后计算ScrollView的滑动高度:

[java] view plain copy

1. package com.tony.orderview;  
2.   
3.   
4. import android.content.Context;  
5. import android.util.AttributeSet;  
6. import android.view.View;  
7. import android.widget.LinearLayout;  
8. import android.widget.ScrollView;  
9. import android.widget.Scroller;  
10.   
11.   
12. public class OrderView extends LinearLayout {  
13.   
14.     private Scroller scroller;  
15.     private Context mContext;  
16.       
17.     private View stayView;  
18.     private StayViewListener stayViewListener;  
19.     private ScrollView scrollView;  
20.       
21.     public void setStayView(View stayview,ScrollView scrollview,StayViewListener stayViewListener){  
22.         this.stayView = stayview;  
23.         this.scrollView = scrollview;  
24.         this.stayViewListener = stayViewListener;  
25.     }  
26.       
27.     public OrderView(Context context) {  
28.         super(context);  
29.         mContext = context;  
30.           
31.     }  
32.     public OrderView(Context context, AttributeSet attrs) {  
33.         super(context, attrs);  
34.         mContext = context;  
35.         init();  
36.           
37.     }  
38.     private void init() {  
39.         setOrientation(LinearLayout.VERTICAL);  
40.         scroller = new Scroller(mContext);  
41.     }  
42.   
43.       
44.     /** 
45.      *  
46.      */  
47.     boolean up = true;  
48.     @Override  
49.     public void computeScroll() {  
50.         if(stayView!=null&&scrollView!=null&&stayViewListener!=null){  
51.             int y = scrollView.getScrollY();  
52.             if(up){  
53.                 int top = stayView.getTop();  
54.                 if(y>=top){  
55.                     stayViewListener.onStayViewShow();  
56.                     up = false;  
57.                 }  
58.             }  
59.             if(!up){  
60.                 int bottom = stayView.getBottom();  
61.                 if(y<=bottom-stayView.getHeight()){  
62.                     stayViewListener.onStayViewGone();  
63.                     up = true;  
64.                 }  
65.             }  
66.         }  
67.     }  
68.       
69.       
70.     public interface StayViewListener{  
71.         public void onStayViewShow();  
72.         public void onStayViewGone();  
73.     }  
74.   
75. }  

       其实关于这种类似大众点评购买条的停留效果，具体还可以有很多的做法，并不一定像我这样自已定义View. 不过整体的思路还是不变,肯定还是要根据ScrollView的滚动高度来进行判断.  无论用何种方式实现，一定要注意位置的控制，使该效果变得平滑，而不是突然购买条出现在界面上. 具体的细节还有很多，回头有时间再补上吧.

    

如有转载，请声明出处: http://blog.csdn.net/t12x3456

http://blog.csdn.net/t12x3456/article/details/9079509