MyException - 我的异常网
当前位置:我的异常网» Android » Android 仿大众点评团购购置条浮动效果

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

www.MyException.Cn  网友分享于:2013-10-09  浏览:38次
Android 仿大众点评团购购买条浮动效果

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

                图1                                        图2

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

 

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

  

 

 

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

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

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


 

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

 

布局文件:

activity_main.xml:

[java] view plaincopy
 
  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 plaincopy
 
  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 plaincopy
 
  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.                 findViewById(R.id.theview).setVisibility(View.GONE);  
  27.             }  
  28.               
  29.             @Override  
  30.             public void onStayViewGone() {  
  31.                 //从上往下拉隐藏大布局,显示小布局  
  32.                 findViewById(R.id.theviewstay).setVisibility(View.GONE);  
  33.                 findViewById(R.id.theview).setVisibility(View.VISIBLE);  
  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 plaincopy
 
  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的滚动高度来进行判断.  无论用何种方式实现,一定要注意位置的控制,使该效果变得平滑,而不是突然购买条出现在界面上. 具体的细节还有很多,回头有时间再补上吧.

文章评论

程序员都该阅读的书
程序员都该阅读的书
Java程序员必看电影
Java程序员必看电影
老程序员的下场
老程序员的下场
我的丈夫是个程序员
我的丈夫是个程序员
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
 程序员的样子
程序员的样子
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员必看的十大电影
程序员必看的十大电影
一个程序员的时间管理
一个程序员的时间管理
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
那些争议最大的编程观点
那些争议最大的编程观点
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的鄙视链
程序员的鄙视链
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
鲜为人知的编程真相
鲜为人知的编程真相
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
代码女神横空出世
代码女神横空出世
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
如何成为一名黑客
如何成为一名黑客
10个调试和排错的小建议
10个调试和排错的小建议
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
为什么程序员都是夜猫子
为什么程序员都是夜猫子
编程语言是女人
编程语言是女人
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
漫画:程序员的工作
漫画:程序员的工作
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员应该关注的一些事儿
程序员应该关注的一些事儿
中美印日四国程序员比较
中美印日四国程序员比较
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有