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

原创 2013年12月04日 22:29:46

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

                图1                                        图2



                                     图3

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


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

 



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

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

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



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


布局文件:

activity_main.xml:

  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>  

购买条布局:
  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:

  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的滑动高度:
  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

相关文章推荐

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

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

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

在大众点评团购中,有这样一个效果. 在具体的团购页面中商家图片下有一个购买条,当用户滚动团购详情界面的时候,购买条会停留在界面的最上方. 具体效果如图:                 图1     ...
  • t12x3456
  • t12x3456
  • 2013年06月12日 16:27
  • 18399

大众点评 团购界面 以及 团购购买条浮动效果效果 实现:

大众点评 团购界面 团购购买条浮动效果 效果实现: 分析UI 是我的理解是用POPwindow和两个ListView实现: (当然这里面用到自定义的View和ToogleButton,) 下...

仿大众点评购买浮动框

  • 2013年07月27日 16:43
  • 988KB
  • 下载

Android 仿美团网,大众点评购买框悬浮效果

转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢!我之前写了...

Android 仿美团网,大众点评购买框悬浮效果之修改版

本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写...

android 仿美团网,大众点评购买框悬浮效果之修改版

转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! ...

Android 仿美团网,大众点评购买框悬浮效果之修改版

分类: Android 高手进阶2014-01-03 09:08 13430人阅读 评论(55) 收藏 举报 android美团大众点评修改版 转帖请注明本文出自xiaanming...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 仿大众点评团购购买条浮动效果
举报原因:
原因补充:

(最多只允许输入30个字)