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

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

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

??????????????? 图1 ???????????????????????????????????????图2

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

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

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

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

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

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

布局文件:

activity_main.xml:

[java]?view plaincopy?
<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>??

购买条布局:

[java]?view plaincopy?
<?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:

[java]?view plaincopy?
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);??
????????????????findViewById(R.id.theview).setVisibility(View.GONE);??
????????????}??
??????????????
????????????@Override??
????????????public?void?onStayViewGone()?{??
????????????????//从上往下拉隐藏大布局，显示小布局??
????????????????findViewById(R.id.theviewstay).setVisibility(View.GONE);??
????????????????findViewById(R.id.theview).setVisibility(View.VISIBLE);??
????????????}??
????????});??
??????????
??????????
????}??
??
????@Override??
????public?boolean?onCreateOptionsMenu(Menu?menu)?{??
????????getMenuInflater().inflate(R.menu.activity_main,?menu);??
????????return?true;??
????}??
??
??????
}??

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

[java]?view plaincopy?
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的滚动高度来进行判断.? 无论用何种方式实现，一定要注意位置的控制，使该效果变得平滑，而不是突然购买条出现在界面上. 具体的细节还有很多，回头有时间再补上吧.