仿大总点评浮动效果

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

      图1                                        

图2

    图3

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

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

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

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

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

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

布局文件:

activity_main.xml:

 <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" >  
  
     <com.tony.orderview.OrderView  
         android:id="@+id/refreshview" 
         android:layout_width="fill_parent" 
         android:layout_height="fill_parent" 
         android:background="#77aaaa" >  
  
         <ScrollView  
             android:id="@+id/scrollview" 
             android:layout_width="fill_parent" 
             android:layout_height="fill_parent" 
             android:background="#accaac" >  
  
             <LinearLayout  
                 android:layout_width="fill_parent" 
                 android:layout_height="wrap_content" 
                 android:orientation="vertical" >  
  
                 <LinearLayout  
                     android:layout_width="fill_parent" 
                     android:layout_height="250dip" 
                     android:background="@drawable/upload" 
                     android:text="one" 
                     android:textColor="#ffccee" />  
  
                 <include  
                     android:id="@+id/theview" 
                     layout="@layout/deal_buy_item" />  
  
                 <TextView  
                     android:layout_width="fill_parent" 
                     android:layout_height="1250dip" 
                     android:background="@drawable/ic_tuan_info_bg_1" 
                     android:text="粥面故事   仅售49元,超值享受哦" />  
  
                 <TextView  
  
                     android:layout_width="fill_parent" 
                     android:layout_height="50dip" 
                     android:background="#ff0055" 
                     android:text="支持随时退" />  
             </LinearLayout>  
         </ScrollView>  
     </com.tony.orderview.OrderView>  
  
     <include  
          android:visibility="gone" 
         android:id="@+id/theviewstay" 
         layout="@layout/deal_buy_item" />  
  
 </RelativeLayout>  

购买条布局:

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="fill_parent" 
     android:layout_height="65.0dip" 
     android:background="@drawable/ic_tuan_info_bg_1" 
     android:orientation="vertical" >  
  
     <LinearLayout  
         android:layout_width="fill_parent" 
         android:layout_height="0.0dip" 
         android:layout_weight="1.0" 
         android:gravity="center_vertical" 
         android:orientation="horizontal" 
         android:paddingLeft="10.0dip" 
         android:paddingRight="10.0dip" >  
  
         <LinearLayout  
             android:layout_width="0.0dip" 
             android:layout_height="fill_parent" 
             android:layout_weight="1.0" 
             android:gravity="center_vertical" 
             android:orientation="vertical" >  
  
             <TextView  
                 android:layout_width="wrap_content" 
                 android:layout_height="wrap_content" 
                 android:layout_marginRight="8.0dip" 
                 android:singleLine="true" 
                 android:textColor="#ffe55600" 
                 android:textSize="21.0sp" />  
  
             <TextView  
                 android:layout_width="wrap_content" 
                 android:layout_height="wrap_content" 
                 android:ellipsize="end" 
                 android:singleLine="true" 
                 android:textColor="#ff979797" 
                 android:textSize="12.0sp" />  
         </LinearLayout>  
  
         <Button  
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:ellipsize="end" 
             android:maxLines="1" 
             android:minWidth="150.0dip" 
             android:text="立即抢购" 
             android:textAppearance="?android:textAppearanceMedium" />  
     </LinearLayout>  
  
     <ImageView  
         android:layout_width="fill_parent" 
         android:layout_height="1.0dip" 
         android:background="@drawable/ic_tuan_info_bg_3" />  
  
 </LinearLayout>  

MainActivity:

 package com.tony.orderview;  
  
 import android.app.Activity;  
 import android.os.Bundle;  
 import android.view.Menu;  
 import android.view.View;  
 import android.widget.ScrollView;  
  
 import com.example.stayview.R;  
 import com.tony.orderview.OrderView.StayViewListener;  
  
 public class MainActivity extends Activity {  
  
  @Override 
  public void onCreate(Bundle savedInstanceState) {  
  super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
  
         OrderView refreshableView = (OrderView) findViewById(R.id.refreshview);  
  
         refreshableView.setStayView(findViewById(R.id.theview), (ScrollView)findViewById(R.id.scrollview),new StayViewListener() {  
  @Override 
  public void onStayViewShow() {  
  //从下往上拉的时候回复显示 
                 findViewById(R.id.theviewstay).setVisibility(View.VISIBLE);  
  
             }  
  
  @Override 
  public void onStayViewGone() {  
  //从上往下拉隐藏布局 
                 findViewById(R.id.theviewstay).setVisibility(View.GONE);  
  
             }  
         });  
  
  
     }  
  
  @Override 
  public boolean onCreateOptionsMenu(Menu menu) {  
         getMenuInflater().inflate(R.menu.activity_main, menu);  
  return true;  
     }  
  
  
 }  

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

 package com.tony.orderview;  
  
  
 import android.content.Context;  
 import android.util.AttributeSet;  
 import android.view.View;  
 import android.widget.LinearLayout;  
 import android.widget.ScrollView;  
 import android.widget.Scroller;  
  
  
 public class OrderView extends LinearLayout {  
  
  private Scroller scroller;  
  private Context mContext;  
  
  private View stayView;  
  private StayViewListener stayViewListener;  
  private ScrollView scrollView;  
  
  public void setStayView(View stayview,ScrollView scrollview,StayViewListener stayViewListener){  
  this.stayView = stayview;  
  this.scrollView = scrollview;  
  this.stayViewListener = stayViewListener;  
     }  
  
  public OrderView(Context context) {  
  super(context);  
         mContext = context;  
  
     }  
  public OrderView(Context context, AttributeSet attrs) {  
  super(context, attrs);  
         mContext = context;  
         init();  
  
     }  
  private void init() {  
         setOrientation(LinearLayout.VERTICAL);  
         scroller = new Scroller(mContext);  
     }  
  
  
  /** 
      *  
      */ 
  boolean up = true;  
  @Override 
  public void computeScroll() {  
  if(stayView!=null&&scrollView!=null&&stayViewListener!=null){  
  int y = scrollView.getScrollY();  
  if(up){  
  int top = stayView.getTop();  
  if(y>=top){  
                     stayViewListener.onStayViewShow();  
                     up = false;  
                 }  
             }  
  if(!up){  
  int bottom = stayView.getBottom();  
  if(y<=bottom-stayView.getHeight()){  
                     stayViewListener.onStayViewGone();  
                     up = true;  
                 }  
             }  
         }  
     }  
  
  
  public interface StayViewListener{  
  public void onStayViewShow();  
  public void onStayViewGone();  
     }  
  
 }  

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

自定义控件详解(六):Paint 画笔MaskFilter过滤

1763
来自专栏数据小魔方

PPT图文混排三大常用技能

今天跟大家聊一聊多图型PPT最常用的三大排版技巧 ——半透明遮罩、色块衬底、渐变过渡 图文混排技巧 ▽ 虽然PPT在图文排版方面与专业的修图软件PS比起来 要有...

3056
来自专栏Coco的专栏

滚动视差?CSS 不在话下

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的...

3917
来自专栏河湾欢儿的专栏

流式布局解决方案

在真实项目中设计师给我们一般是:640960 6401136 750*1334 响应式布局的解决方案: 1>流式布局法 容器或者是盒子一般都不写...

982
来自专栏Flutter入门到实战

Android应用坐标系统全面详解

去年有很多人私信告诉我让说说自定义控件,其实通观网络上的很多博客都在讲各种自定义控件,但是大多数都是授之以鱼,却很少有较为系统性授之于渔的文章,同时由于自己也迟...

1731
来自专栏木子昭的博客

几个好玩的flex布局案例Flex是个不错的东西,看懂上面三个Demo也就算入门了,如果要了解更全面的内容, 推荐阮一峰老师的 Flex 布局教程语法篇

弹性盒子布局flex,为自适应布局而生 弹性盒子布局的选项很多(选项越多->越专业->越难记), 但对于普通的开发者,只要记住两三个关键词,就能满足大多数的需...

6436
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 padding 篇

对于block元素 1.没宽度设置的情况:垂直向外扩张,水平向内挤压 上下padding会增加元素占据的尺寸(即看上去高度在增加),左右因为元素宽度...

1153
来自专栏HTML5学堂

移动端H5知识[系列] - fixed定位模式与其他

TML5学堂:移动端H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~! 本文会讲解到fixed的定位模式,另外,关于li...

2985
来自专栏Android机动车

使用Span实现各种酷炫效果

前一段时间一直在做富文本展示和文本处理,主要用到了Html.fromHtml()实现加载网页,但实现整段文本的某些特殊如个别文字的点击,改背景色、前景色等效果,...

1643
来自专栏何俊林

如何优化你的布局层级结构之RelativeLayout和LinearLayout及FrameLayout性能分析(二)

FrameLayout和LinearLayout性能PK ? FrameLayout ? LinearLayout Measure:2.058ms Layout...

6257

扫码关注云+社区

领取腾讯云代金券