`

ScrollView中浮动条的实现

阅读更多
简单的浮窗
http://www.open-open.com/lib/view/open1467185415741.html


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

/**
 * 带浮动条的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);
		}
	}
}


用法:
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

import com.reyo.view.ObservableScrollView;
public class FloatActivity 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>


测试时尽量让ScrollView超过一屏,好让其滑动,这样才能看出效果。


Android 仿美团网,大众点评购买框悬浮效果之修改版
http://blog.csdn.net/xiaanming/article/details/17761431


一个可以滚动监听的类,这下可以根据自己的需求任意扩展了
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();
    }
}


如何解决ViewPager在ScrollView中滑动经常失效、无法正常滑动问题?
解决方法只需要在接近水平滚动时ScrollView不处理事件而交由其子View(即这里的ViewPager)处理即可,重写ScrollView的onInterceptTouchEvent函数,如下:
package cc.newnews.view;

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

public class VerticalScrollView extends ScrollView {

	private GestureDetector mGestureDetector;

	public VerticalScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mGestureDetector = new GestureDetector(context, new YScrollDetector());
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		return super.onInterceptTouchEvent(ev)
				&& mGestureDetector.onTouchEvent(ev);
	}

	class YScrollDetector extends SimpleOnGestureListener {

		@Override
		public boolean onScroll(MotionEvent e1, MotionEvent e2,
				float distanceX, float distanceY) {
			/**
			 * 如果我们滚动更接近水平方向,返回false,让子视图来处理它
			 */
			return (Math.abs(distanceY) > Math.abs(distanceX));
		}
	}
}

再将xml中的ScrollView改为<xxx.xxx.xxx.VerticalScrollView>即包名.重写的ScrollView的类名)即可。
本方法同样适用于ScrollView中ListView等其他View无法滚动。

Android UI开发第四十篇——ScrollTricks介绍
http://blog.csdn.net/xyz_lmn/article/details/20557925

Android-ObservableScrollView
https://github.com/ksoichiro/Android-ObservableScrollView
分享到:
评论

相关推荐

    仿drippler详情页效果(scrollview阻尼+layout浮动)

    在Android开发中,"仿drippler详情页效果"通常是指实现类似Drippler应用的滚动体验,这种体验包括ScrollView的阻尼效果和布局的浮动行为。这些特性为用户提供了更加自然、流畅的交互体验。下面我们将详细探讨这两个...

    悬浮条 scrollview

    如果悬浮条是作为操作按钮,例如一个浮动操作按钮(FloatingActionButton),可以利用`Design Support Library`中的`FloatingActionButton`,并配合`AppBarLayout`的`ScrollingViewBehavior`,使其在ScrollView滚动...

    ScrollView版悬浮菜单

    4. **处理滚动事件**:为了让悬浮菜单在`ScrollView`滚动时保持浮动,我们需要监听`ScrollView`的滚动事件,并根据滚动方向调整`FloatingActionButton`的位置。这可以通过重写`onScrollChanged()`方法实现,或者使用...

    Android 弹性ScrollView和悬浮头.zip

    这个名为"Android 弹性ScrollView和悬浮头"的压缩包文件正专注于解决这一问题,它提供了源码示例和相关说明,帮助开发者在Android应用中实现类似于iOS的弹性滚动效果和浮动头部功能。 首先,我们来理解一下"弹性...

    商城首页一键回到顶部功能实现(包括ListView, RecyclerView 和 ScrollView)

    在所有这些实现中,FloatingActionButton是一个理想的组件来表示“一键回到顶部”按钮,因为它自带了浮动物件的特性,可以在合适的时候自动显示或隐藏。在布局文件中,我们可以将FloatingActionButton置于Activity的...

    Android实现浮动表头

    2. **悬浮效果**:为了实现浮动表头,我们需要监听ScrollView的滚动事件,并在事件回调中调整表头的位置。可以重写`onScrollChanged()`方法,当ScrollView滚动时,检查表头是否需要保持在可视区域。如果需要,可以...

    微信头和仿天猫浮动按钮

    在移动应用开发中,微信头和仿天猫浮动按钮的设计与实现是提高用户体验的重要元素。微信作为中国最流行的社交平台,其界面设计往往被其他开发者借鉴,以提供类似的功能和交互体验。本文将深入探讨这两个特性,并结合...

    Android应用源码之ScrollView版悬浮菜单.rar

    本资源“Android应用源码之ScrollView版悬浮菜单.rar”提供了一个使用ScrollView实现的悬浮菜单的示例代码,对于学习如何在Android应用中创建可滚动且浮动的菜单非常有帮助。下面我们将深入探讨相关的知识点。 1. ...

    Android应用源码之ScrollView版悬浮菜单.zip

    本资源“Android应用源码之ScrollView版悬浮菜单”着重展示了如何在ScrollView中实现一个浮动菜单,这对于构建具有复杂界面和多层级交互的移动应用至关重要。 首先,ScrollView是LinearLayout或RelativeLayout等...

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

    在Android开发中,实现类似大众点评团购页面的购买条浮动效果是一种常见的需求,它能提供良好的用户体验,使得关键操作(如购买、加入购物车等)始终保持在用户视野内。这个效果通常涉及到滚动监听、布局管理和...

    一个popwindow的小demo

    PopWindow是Android系统中的PopupWindow类的一个实例,它可以在任意位置显示一个浮动窗口。与对话框不同,PopWindow并不阻塞用户对主界面的交互,因此非常适合用来实现快速操作或临时显示信息。 在“一个popwindow...

    ScrollViewForLinearLayout

    `ScrollViewForLinearLayout`这个标题暗示了我们可能在讨论一个特殊的实现,它在`ScrollView`中嵌套了一个`LinearLayout`,并提供了头部置顶浮动的Tab功能。 首先,`ScrollView`的基本用法是将一个或多个视图作为它...

    上下滑动监听弹出浮动框

    在Android开发中,"上下滑动监听弹出浮动框"是一种常见的交互设计,它能够提升用户的操作体验。这种设计主要用于在用户上滑或下滑屏幕时,动态地展示或隐藏浮动框,例如通知、菜单或者快捷操作。下面我们将深入探讨...

    Android 仿Keep,探索向上滑动时PopupWindow向右退出消失,向下移动时PopupWindow向左推出出现

    在Android开发中,PopupWindow是一种常用的UI组件,它可以在屏幕上的任意位置显示一个浮动窗口,类似于弹出对话框。在本示例中,我们将探讨如何实现一个类似Keep应用中的PopupWindow效果,即当用户向上滑动时,...

    android 悬浮条

    - Android系统提供了`WindowManager`服务,通过`addView()`方法可以将一个View添加到浮动窗口中,实现悬浮条的效果。 - 需要在AndroidManifest.xml中添加`...

    FloatScrollViewDemo

    这个项目的核心是创建一个可以浮动于应用界面之上,并且继承自ScrollView的自定义组件,使得用户可以在任意界面中浏览并操作这个悬浮的ScrollView。在Android应用中,悬浮窗口通常用于实现类似于浮动按钮、悬浮菜单...

    Android--- 微信头和仿天猫浮动按钮

    这个功能在Android中可以通过实现ScrollView或NestedScrollView的头部嵌套布局来完成。具体步骤包括: 1. 创建一个包含标题的布局,作为滚动视图的头部。 2. 将该头部布局添加到ScrollView或NestedScrollView中,...

    简单的电子阅读器

    这款应用充分利用了Android系统的核心组件和技术,如文件流输入、ScrollView以及WindowManager,来实现其核心功能。接下来,我们将详细探讨这些关键知识点。 1. 文件流输入: 在Android开发中,文件流输入是处理...

    android 悬浮框

    - 要实现ListView在ScrollView中的固定悬浮效果,可以考虑使用`HeaderView`或`FooterView`,将悬浮元素添加到ListView的顶部或底部。 3. **滚动时固定效果**: - 当ScrollView滚动时,可以监听滚动事件,如`...

Global site tag (gtag.js) - Google Analytics