ScrollView中浮动条的实现

简单的浮窗
[url]http://www.open-open.com/lib/view/open1467185415741.html[/url]


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 仿美团网,大众点评购买框悬浮效果之修改版
[url]http://blog.csdn.net/xiaanming/article/details/17761431[/url]


一个可以滚动监听的类,这下可以根据自己的需求任意扩展了

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();
}
}


[size=x-large][color=red]如何解决ViewPager在ScrollView中滑动经常失效、无法正常滑动问题?[/color][/size]
解决方法只需要在接近水平滚动时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介绍
[url]http://blog.csdn.net/xyz_lmn/article/details/20557925[/url]

Android-ObservableScrollView
[url]https://github.com/ksoichiro/Android-ObservableScrollView[/url]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值