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

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

图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.OrderViewandroid:id="@+id/refreshview"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#77aaaa" ><ScrollViewandroid:id="@+id/scrollview"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#accaac" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="vertical" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="250dip"android:background="@drawable/upload"android:text="one"android:textColor="#ffccee" /><includeandroid:id="@+id/theview"layout="@layout/deal_buy_item" /><TextViewandroid:layout_width="fill_parent"android:layout_height="1250dip"android:background="@drawable/ic_tuan_info_bg_1"android:text="粥面故事   仅售49元，超值享受哦" /><TextViewandroid:layout_width="fill_parent"android:layout_height="50dip"android:background="#ff0055"android:text="支持随时退" /></LinearLayout></ScrollView></com.tony.orderview.OrderView><includeandroid: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" ><LinearLayoutandroid: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" ><LinearLayoutandroid:layout_width="0.0dip"android:layout_height="fill_parent"android:layout_weight="1.0"android:gravity="center_vertical"android:orientation="vertical" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="8.0dip"android:singleLine="true"android:textColor="#ffe55600"android:textSize="21.0sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:ellipsize="end"android:singleLine="true"android:textColor="#ff979797"android:textSize="12.0sp" /></LinearLayout><Buttonandroid: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><ImageViewandroid: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 {@Overridepublic 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() {@Overridepublic void onStayViewShow() {//从下往上拉的时候回复显示findViewById(R.id.theviewstay).setVisibility(View.VISIBLE);}@Overridepublic void onStayViewGone() {//从上往下拉隐藏布局findViewById(R.id.theviewstay).setVisibility(View.GONE);}});}@Overridepublic 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;@Overridepublic 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的滚动高度来进行判断. 无论用何种方式实现，一定要注意位置的控制，使该效果变得平滑，而不是突然购买条出现在界面上. 具体的细节还有很多，回头有时间再补上吧.

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

Android 仿大众点评团购购买条浮动效果相关推荐

android 仿ios动画效果代码,Android仿IOS上拉下拉弹性效果的实例代码
用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还 ...
android 今日头条加载动画,Android 仿今日头条简单的刷新效果实例代码
点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感 ...
仿呱呱购物流时间轴效果(swift)
仿呱呱购物流时间轴效果(swift): 在呱呱购App二期的优化过程中,发现物流信息详情界面显示的不太友好,由此,修改了部分代码使cell实现自适应,完美显示具体的物流轨迹.我使用了快递鸟的api,将 ...
android 模仿大众点评团购卷列表多余3条时折叠,点击时显示剩余全部的功能
要实现这样一个效果:加载一组数据,当这组数据的条数超过2条时,则这显示两条,其余的隐藏,当点击"展开全部时"在显示余下的部分.效果如下图所示: 展开前的效果: 展开后的效果 : 实 ...
Android (仿支付宝) 收益进度条
一. 看效果二.上代码 package com.framework.widget; import android.app.Activity; import android.content.Conte ...
android 网易云音乐上滑动画,Android 仿网易云音乐音轨跳动效果
网易云音乐的Loading效果,大家应该也比较熟悉了,效果是一个红色音轨不断跳动的效果,一般用于Loading等待时填充使用.本篇来自定义这个效果. Android 仿网易云音乐音轨跳动View.g ...
Android仿今日头条图片滑动退出效果
资源下载(2C币) 逛CSDN的时候,看到几篇写仿今日头条图片滑动退出效果的文章,闲着无聊便想着也给自己项目加上,实现的思路有很多种,本着就近原则选了一篇与自己思路相近的文章结合自己的实践总结一下. ...
Android仿华为系统升级进度条的实现
目录前言: 实现步骤: 1.用DashPathEffect给paint加上虚线效果 2.画出进度条 3.绘制文字 4.加入动画效果前言: 之前用华为Android系统的时候总是会想到这种虚线进度条 ...
支付宝 android ui,Android 仿支付宝芝麻信用分仪表盘效果 CreditSesameRingView
软件介绍自定义View之仿支付宝芝麻信用分仪表盘效果,喜欢的话,请给个star,谢谢. 使用添加项目依赖Add it in your root build.gradle at the end of ...

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

Android 仿大众点评团购购买条浮动效果相关推荐

最新文章

热门文章