您当前的位置： 首页 > 

xiangzhihong8

暂无认证

  • 4浏览

    0关注

    1324博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

仿大总点评浮动效果

xiangzhihong8 发布时间：2013-12-01 18:40:36 ，浏览量：4

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

                图1                                        图2

                                     图3

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

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

  

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

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

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

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

布局文件:

activity_main.xml:

[java]  view plain copy
  1.   
  2.   
  3.       
  4.   
  5.           
  6.   
  7.               
  8.   
  9.                   
  10.   
  11.                   
  12.   
  13.                   
  14.   
  15.                   
  16.               
  17.           
  18.       
  19.   
  20.       
  21.   
  22.   
购买条布局:

[java]  view plain copy
  1.   
  2.   
  3.   
  4.       
  5.   
  6.           
  7.   
  8.               
  9.   
  10.               
  11.           
  12.   
  13.           
  14.       
  15.   
  16.       
  17.   
  18.   

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
关注
打赏
1482932726
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.0525s