在大衆點評團購中，有這樣一個效果. 在具體的團購頁面中商家圖檔下有一個購買條，當使用者滾動團購詳情界面的時候，購買條會停留在界面的最上方. 具體效果如圖:
圖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_height="1250dip"
android:background="@drawable/ic_tuan_info_bg_1"
android:text="粥面故事 僅售49元，超值享受哦" />
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_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_weight="1.0"
android:gravity="center_vertical"
android:orientation="vertical" >
<textview
android:layout_width="wrap_content"
android:layout_marginright="8.0dip"
android:singleline="true"
android:textcolor="#ffe55600"
android:textsize="21.0sp" />
android:ellipsize="end"
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_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);
}
public void onstayviewgone() {
//從上往下拉隐藏布局
findviewbyid(r.id.theviewstay).setvisibility(view.gone);
});
}
public boolean oncreateoptionsmenu(menu menu) {
getmenuinflater().inflate(r.menu.activity_main, menu);
return true;
}
接着是最核心的部分，具體控制高度顯示隐藏，我是這樣做的，重寫了一個orderview,套在整個布局外面,然後計算scrollview的滑動高度:
import android.content.context;
import android.util.attributeset;
import android.widget.linearlayout;
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);
init();
private void init() {
setorientation(linearlayout.vertical);
scroller = new scroller(mcontext);
/**
*
*/
boolean up = true;
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的滾動高度來進行判斷. 無論用何種方式實作，一定要注意位置的控制，使該效果變得平滑，而不是突然購買條出現在界面上. 具體的細節還有很多，回頭有時間再補上吧.