ObservableScrollView+TabPageIndicator+fragment 实现顶部悬浮菜单效果

顶部悬浮是在scrollview中进行的。通过在scrollview添加空布局来实现。

直接上代码

/*
 * Copyright 2013 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.zhsq365.yuci.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

/**
 * A custom ScrollView that can accept a scroll listener.
 */
public class ObservableScrollView extends ScrollView {
    private Callbacks mCallbacks;

    public ObservableScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mCallbacks != null) {
            mCallbacks.onScrollChanged(t);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mCallbacks != null) {
            switch (ev.getActionMasked()) {
                case MotionEvent.ACTION_DOWN:
                    mCallbacks.onDownMotionEvent();
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    mCallbacks.onUpOrCancelMotionEvent();
                    break;
            }
        }
        return super.onTouchEvent(ev);
    }

    @Override
    public int computeVerticalScrollRange() {
        return super.computeVerticalScrollRange();
    }

    public void setCallbacks(Callbacks listener) {
        mCallbacks = listener;
    }

    public static interface Callbacks {
        public void onScrollChanged(int scrollY);
        public void onDownMotionEvent();
        public void onUpOrCancelMotionEvent();
    }
}

重写的scollview来监听滑动事件。

再上xml布局文件

<com.zhsq365.yuci.view.ObservableScrollView
            android:id="@+id/scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/layout_title"
            android:scrollbars="none"
            android:fillViewport="true">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/shop_bg_color"
                    android:orientation="vertical">

                    <RelativeLayout
                        android:id="@+id/layoutViewPager"
                        android:layout_width="match_parent"
                        android:layout_height="163dp">

                        <android.support.v4.view.ViewPager
                            android:id="@+id/LoopViewPager"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@drawable/binder_view_default" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_alignBottom="@+id/LoopViewPager"
                            android:layout_alignParentLeft="true"
                            android:orientation="vertical"
                            android:padding="8dp">

                            <LinearLayout
                                android:id="@+id/dot"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_horizontal"
                                android:layout_marginTop="3dp"
                                android:orientation="horizontal"></LinearLayout>
                        </LinearLayout>
                    </RelativeLayout>

                    <!--此处重要-->
                    <View
                        android:id="@+id/placeholder"
                        android:layout_width="fill_parent"
                        android:layout_height="@dimen/min_height_textheader_materiallike" />
                    <com.zhsq365.yuci.view.ScrollByViewpager
                        android:id="@+id/viewPager"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" />
                </LinearLayout>

                <com.zhsq365.yuci.widget.wheelview.viewpagerindicator.TabPageIndicator
                    android:id="@+id/tabPageIndicator"
                    android:layout_width="fill_parent"
                    android:layout_height="@dimen/min_height_textheader_materiallike"
                    android:background="#F3F3F3" />
            </FrameLayout>

        </com.zhsq365.yuci.view.ObservableScrollView>

布局文件中，placeholder和tabPage控件则为悬浮控件！

MainActivity中代码

1、首先实现observableScrollView.callback 接口

2、在activity中设置监听。更具计算高度，来控制悬浮框

mScrollview.setCallbacks(this);
        mScrollview.getViewTreeObserver().addOnGlobalLayoutListener(
                new ViewTreeObserver.OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        onScrollChanged(mScrollview.getScrollY());
                    }
                });

3、

public void onScrollChanged(int scrollY) {
        tabPageIndicator.setTranslationY(Math.max(placeholder.getTop(), scrollY));

    }