仿淘宝view滑动至屏幕顶部会一直停留在顶部的位置

原创 2013年12月05日 17:31:57

               在刚刚完成的项目中,在一个页面中,用户体验师提出引用户操作的入住按钮要一直保留在页面当中,不管页面能滚动多长都得停留在页面的可视区域。最终实现效果如下图所示:

                         图片1                                           图片2                                                            

如图中的红色框中的view始终会停留在页面中,如果滑动至页面的顶部,会一直保留在顶部。

            下面来说下具体的实现思路:

思路:其实整个页面当中一共有两个视觉效果一样的View,通过滑动的位置来进行View的隐藏和显示来达到这种效果。整个页面的在上下滑动的过程中可以总结为两个状态,状态A(如图1所示),view2在可视区域内时,view1不可见。状态B(如图2所示),view2滑过了可视区域,此种状态view1可见,view2不可见。

view显示和隐藏的时机:1、当页面向上滑动时,从状态A转变到状态B的瞬间,view1正好滑动至顶部与view2重合的瞬间,将view1显示;

2、当页面向下滑动,从状态B转变到状态A的瞬间,view2正好和view1重合的瞬间,将view1隐藏。

 

ViewAllShowLinearLayout类

package org.sunday.uiext;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ScrollView;

/**
 * @author sunday 
 * 2013-12-5 
 * 邮箱:zhengchao1937@163.com 
 * QQ:804935743
 */
public class ViewAllShowLinearLayout extends LinearLayout {

	private View mView; // 顶部的View
	private ViewSwitchListener viewSwitchListener; // 对外钩子接口
	private ScrollView mScrollView;
	private boolean isFlag = true;		//辅助判断变量

	public void initData(View view, ScrollView scrollview,
			ViewSwitchListener viewSwitchListener) {
		this.mView = view;
		this.mScrollView = scrollview;
		this.viewSwitchListener = viewSwitchListener;
	}

	public ViewAllShowLinearLayout(Context context) {
		super(context);
		init();
	}

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

	private void init() {
		setOrientation(LinearLayout.VERTICAL);
	}

	@Override
	public void computeScroll() {
		if (mView != null && mScrollView != null && viewSwitchListener != null) {
			int y = mScrollView.getScrollY();
			if (isFlag) {
				int top = mView.getTop();
				if (y >= top) {
					viewSwitchListener.onViewShow();
					isFlag = false;
				}
			}
			if (!isFlag) {
				int bottom = mView.getBottom();
				if (y <= bottom - mView.getHeight()) {
					viewSwitchListener.onViewGone();
					isFlag = true;
				}
			}
		}
	}

	public interface ViewSwitchListener {
		public void onViewShow();
		public void onViewGone();
	}
}

项目中的使用效果:

 

demo:http://download.csdn.net/detail/ff20081528/6664263
 

 

转载请说明出处:http://blog.csdn.net/ff20081528/article/details/17145113

Scrollview滑到顶部时,顶部控件/标题栏一直在顶部悬浮显示

上滑ScrollView,实现标题滑动到顶部时一直悬浮在顶部 不论怎么滑动屏幕内容,当标题部分到达顶部时,便会一直会显示在顶部。 实现原理:  1. 顶部1,顶部2布局需要完全一样,初始化时顶部...
  • lst_shuo
  • lst_shuo
  • 2017年10月19日 10:01
  • 323

Android自定义View(LimitScrollerView-仿天猫广告栏上下滚动效果)

1分析 2定义组合控件布局 3继承最外层控件 4自定义属性 5重写onMeasure 6数据适配器 7动态添加子条目 8滚动动画 9条目点击事件 源码下载 转载请标明出处: http://blog...
  • u010163442
  • u010163442
  • 2016年11月23日 12:51
  • 3270

仿美团app,浮动layout滑动到顶部悬停效果

今天在帖子上看到有人需要做一个类似美团app的一个效果,就是当一个浮动layout的滑动到顶部时,这个浮动layout就悬停下来,当屏幕往下滑动时,浮动layout也跟着往下移动。 因...
  • dakun012
  • dakun012
  • 2015年11月27日 15:42
  • 2765

Android 打造顶部停留控件,可用于所有可滚动的控件(ScrollView,ListView)

1、序言现在很多App为了让一个页面可以有更多展示的东西。于是乎有一个界面就有几个tab进行切换页面,同时滚动的时候为了方便用户切换tab,这时tab需要悬浮在布局的顶部。所以这样就有了这篇blog咯...
  • lanfei1027
  • lanfei1027
  • 2016年03月05日 14:43
  • 2789

两个Layout一个属性快速实现Android滑动顶部悬停

大家先来看一下这个效果吧,在项目中应用的场景还是蛮多的。之前在网上看到有许多实现这个效果的做法,但是基本上是在滑动视图内改动,比如获取滑动的Y值来确定悬停View的位置。在design包问世之前这种做...
  • yun1185448859
  • yun1185448859
  • 2016年12月22日 13:31
  • 1689

Android:TabLayout向上滑动停留页面顶部

相信大家在很多APP中都可以看到这样的效果;下面是一个tablayout,上面可以加入其他的布局文件,当滑动的时候tablayout停留在页面顶部; 我们这里使用CoordingatorLayout ...
  • Zheng_Jiao
  • Zheng_Jiao
  • 2017年07月27日 14:12
  • 2693

微信小程序-scroll-view滚动到指定位置(一)

先来说一下官网例子吧 API 自己看咯  https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=2016112...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2016年12月21日 16:16
  • 15918

微信小程序例子——如何使用scroll-view组件实现视图垂直滚动

微信小程序scroll-view的应用。
  • FutrueJet
  • FutrueJet
  • 2016年10月18日 21:09
  • 5139

Android中实现 滑动时将指定View定位在顶部

在项目开发中遇到这样的需求,需要实现scrollview顶部的悬停效果,实现原理非常简单,下面小编通过本文给大家分享实例代码,需要的朋友参考下 因项目中的需要实现ScrollView顶部的悬停,也不...
  • u013252110
  • u013252110
  • 2017年12月04日 10:55
  • 87

IOS轻松实现仿网易新闻顶部滑动指示器(Scrollview实现)

实现原理很简单,就是利用了scrollview进行自定义,对外部传入的scrollview滑动事件进行监听,源码如下: (1)h文件代码 // // ScrollViewIndicator.h /...
  • u013835855
  • u013835855
  • 2017年05月22日 09:59
  • 774
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿淘宝view滑动至屏幕顶部会一直停留在顶部的位置
举报原因:
原因补充:

(最多只允许输入30个字)