ScrollView中浮动条的实现

仿美团网,大众点评购买框悬浮效果之修改版


ScrollView中如果内容比较长，往下拉的时候有一部分（通常是菜单）View就一直固定在屏幕顶端，像个浮动条一样，该效果Web页面使用比较多。
实现这种效果需要重写ScrollView的onScrollChanged(),具体如下：

/** 
 * 带浮动条的ScrollView 
 *  
 *  
 */  
public class ObservableScrollView extends ScrollView {  
    private OnScrollListener onScrollListener = null;  
  
    private View viewInScroll,viewOutScroll;  
    public ObservableScrollView(Context context, AttributeSet attrs,  
            int defStyle) {  
        super(context, attrs, defStyle);  
    }  
  
    public ObservableScrollView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  
  
    public ObservableScrollView(Context context) {  
        super(context);  
    }  
  
    public void setOnScrollListener(OnScrollListener onScrollListener) {  
        this.onScrollListener = onScrollListener;  
    }  
  
    @Override  
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {  
        super.onScrollChanged(x, y, oldx, oldy);  
        if (onScrollListener != null) {  
            onScrollListener.onScrollChanged(this, x, y, oldx, oldy);  
        }  
        computeFloatIfNecessary();  
    }  
  
    /** 
     * 监听ScrollView滚动接口 
     * @author reyo 
     * 
     */  
    public interface OnScrollListener {  
  
        public void onScrollChanged(ObservableScrollView scrollView, int x,  
                int y, int oldx, int oldy);  
  
    }  
      
    /** 
     * 设置需要浮动的View 
     * @param viewInScroll ScollView内的view 
     * @param viewFloat ScollView外的view，真正需要浮动的view 
     */  
    public void setFloatView(View viewInScroll,View viewOutScroll){  
        this.viewInScroll=viewInScroll;  
        this.viewOutScroll=viewOutScroll;  
    }  
      
    private void computeFloatIfNecessary(){  
        if(viewInScroll==null&&viewOutScroll==null){  
            return;  
        }  
        // 获取ScrollView的x,y坐标  
        int[] location = new int[2];  
        this.getLocationInWindow(location);  
        // 获取浮动View的x,y坐标  
        int[] loc = new int[2];  
        viewInScroll.getLocationOnScreen(loc);  
        // 当浮动view的y <= ScrollView的y坐标时，把固定的view显示出来  
        if (loc[1] <= location[1]) {  
            // 处理一下把原有view设置INVISIBLE，这样显示效果会好点  
            viewOutScroll.setVisibility(View.VISIBLE);  
            viewInScroll.setVisibility(View.INVISIBLE);  
        } else {  
            // 记得还原回来  
            viewOutScroll.setVisibility(View.GONE);  
            viewInScroll.setVisibility(View.VISIBLE);  
        }  
    }  
}

用法：

public class TestActivity extends Activity{  
  
    private ObservableScrollView scrollView;  
  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_float);  
        scrollView = (ObservableScrollView) findViewById(R.id.scrollView);  
        scrollView.setFloatView(findViewById(R.id.viewInScroll), findViewById(R.id.viewOutScroll));  
        scrollView.setOnScrollListener(new com.reyo.view.ObservableScrollView.OnScrollListener() {  
  
            @Override  
            public void onScrollChanged(ObservableScrollView scrollView, int x,  
                    int y, int oldx, int oldy) {  
                Log.i("tag", "y="+y+";oldy="+oldy);  
            }  
        });  
  
    }  
  
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  
    <com.reyo.view.ObservableScrollView  
        android:id="@+id/scrollView"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent" >  
  
        <LinearLayout  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"   
            android:orientation="vertical"  
            >  
  
            <ImageView  
                android:id="@+id/img"  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:src="@drawable/pic" />  
  
            <LinearLayout  
                android:id="@+id/viewInScroll"  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:orientation="horizontal" >  
  
                <Button  
                    android:id="@+id/button0"  
                    android:layout_width="0dp"  
                    android:layout_height="wrap_content"  
                    android:layout_weight="1"  
                    android:text="排队叫号" />  
  
                <Button  
                    android:id="@+id/button1"  
                    android:layout_width="0dp"  
                    android:layout_height="wrap_content"  
                    android:layout_weight="1"  
                    android:text="预定桌位" />  
  
            </LinearLayout>  
  
            <TextView  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:layout_marginTop="20dp"  
                android:padding="5dp"  
                android:text="@string/test1"  
                android:textColor="#555555"  
                android:textSize="20dip" />  
  
            <TextView  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:layout_marginTop="20dp"  
                android:padding="5dp"  
                android:text="@string/test2"  
                android:textColor="#555555"  
                android:textSize="20dip" />  
  
            <TextView  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:layout_marginTop="20dp"  
                android:padding="5dp"  
                android:text="@string/test3"  
                android:textColor="#555555"  
                android:textSize="20dip" />  
  
            <TextView  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:layout_marginTop="20dp"  
                android:padding="5dp"  
                android:text="@string/test4"  
                android:textColor="#555555"  
                android:textSize="20dip" />  
        </LinearLayout>  
    </com.reyo.view.ObservableScrollView>  
  
    <FrameLayout  
        android:id="@+id/viewOutScroll"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_alignParentTop="true"  
        android:visibility="gone" >  
  
        <LinearLayout  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:orientation="horizontal" >  
  
            <Button  
                android:id="@+id/button0"  
                android:layout_width="0dp"  
                android:layout_height="wrap_content"  
                android:layout_weight="1"  
                android:text="排队叫号" />  
  
            <Button  
                android:id="@+id/button1"  
                android:layout_width="0dp"  
                android:layout_height="wrap_content"  
                android:layout_weight="1"  
                android:text="预定桌位" />  
  
        </LinearLayout>  
    </FrameLayout>  
</RelativeLayout>