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.
9483
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));

}