`
大头K
  • 浏览: 185993 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

视差Viewpager(仿手机菜单背景图跟随拖动方向缓慢前进效果附源码!)

阅读更多
视差Viewpager:
即当我们拖动viewpager左右滑动的时候,背景图片也跟左右滑动,不过以相对滑动更慢的速度滑动,故产生视差效果。

先看效果图:




1.先看最外层布局:
说明一下:与Viewpager并列一个HorizontalScrollView,里面放背一张图片作为Viewpager的背景图,当Viewpager滑动时,HorizontalScrollView跟随滑动,下一个代码介绍在哪里控制HorizontalScrollView跟随滑动如何滑动
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <HorizontalScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/bg"
            />
    </HorizontalScrollView>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>



2.如何控制HorizontalScrollView跟随Viewpager滑动和如何滑动:
说明一下:设置Viewpager滑动监听,在onPageScrolled中实现标题效果,具体请参考以下代码。

		// 设置viewpager的滚动监听
		pager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int arg0) {
				// 页面被选择是调用
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// viewpager滑动时被调用

				// pager所有子页面的总宽度
				float widthOfPagers = pager.getWidth() * adapter.getCount();
				// 背景图片的宽的
				float widthOfScroll = image.getWidth();

				// ViewPager可滑动的总长度
				float moveWidthOfPagers = widthOfPagers - pager.getWidth();
				// 背景图的可滑动总长度
				float moveWidthOfScroll = widthOfScroll - pager.getWidth();

				// 可滑动距离比例
				float ratio = moveWidthOfScroll / moveWidthOfPagers;
				// 当前Pager的滑动距离
				float currentPosOfPager = arg0 * pager.getWidth() + arg2;

				// 背景滑动到对应位置
				scroll.scrollTo((int) (currentPosOfPager * ratio),
						scroll.getScrollY());
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// 滚动状态改变时被调用
			}
		});
	}


3.需要了解更多的朋友可以下载源码。
源码地址:https://github.com/kk-java/ParallaxViewpager
  • 大小: 1.6 MB
分享到:
评论

相关推荐

    安卓动画效果相关-ParallaxPager视差动画效果的ViewPager.zip

    本资料包主要关注的是"ParallaxPager",一种实现视差滚动效果的ViewPager扩展。视差动画通常是指在用户滚动界面时,不同元素以不同的速度移动,营造出深度感和立体感,这种效果常见于现代移动应用设计中。 ...

    parallaxviewpager-一个可以设置视差背景的ViewPager.zip

    parallaxviewpager通过设置一个背景图片,使原有的ViewPager页面与这个背景图片间实现视差效果。这就要求你的背景图片的高宽比要大于屏幕的高宽比。效果非常不错。项目地址:...

    jQuery单页视差效果网站源码

    **jQuery单页视差效果网站源码解析** 在网页设计中,视差滚动效果是一种流行的交互设计技术,它使得背景图像以不同的速度滚动,从而创造出深度感和立体感,为用户带来独特的浏览体验。本资源提供了基于jQuery实现的...

    自定义控件实现横向滑动背景图视差效果

    本文将深入探讨如何通过自定义控件实现横向滑动背景图的视差效果,这通常用于模仿真实世界中的深度感知,增强用户的沉浸感。我们将讨论以下几个方面: 1. **视差效果的理解**:视差效果是指当用户滚动或滑动界面时...

    安卓欢迎界面引导页面viewpager相关-使用viewpager的PageTransformer实现的视差效果源码.rar

    在这个"安卓欢迎界面引导页面viewpager相关-使用viewpager的PageTransformer实现的视差效果源码"中,开发者可能已经实现了几种常见的视差效果,例如: 1. **深度缩放**:当页面滑动时,页面元素根据距离中心位置的...

    css3背景图片页面滚动视差效果

    在网页设计中,CSS3(层叠样式表第三版)为开发者带来了许多创新特性,其中“背景图片页面滚动视差效果”是近年来颇受欢迎的一种视觉表现手法。这种效果通过精心设计,使得背景图像在页面滚动时以不同的速度移动,...

    ViewPager五种动画效果

    ViewPager是Android平台中一个强大的视图滑动组件,它允许用户在多个页面间进行左右滑动切换,常用于实现类似轮播图或者应用导航的效果。Google为ViewPager提供了丰富的动画效果,使得页面切换更加生动和吸引人。在...

    Android-天气折线图icon会随着移动产生视差效果仿小米天气

    本示例"Android-天气折线图icon会随着移动产生视差效果仿小米天气"着重于实现一种动态的用户界面元素,即天气图标随用户的屏幕滚动而展现出视差效果。这种效果常见于小米天气等应用中,为用户提供更为生动、真实的...

    jQuery苹果ios10风格背景图片视差动画特效

    【jQuery苹果iOS10风格背景图片视差动画特效】是一种基于JavaScript库jQuery实现的网页设计技术,它模拟了苹果iOS10系统中的一个独特视觉效果。这种特效在用户滚动页面或者移动鼠标时,背景图片会产生一种缓慢的移动...

    安卓FragmentTab选项卡相关-ViewPagertab视差效果sticky效果的demo.rar

    在这个“安卓FragmentTab选项卡相关-ViewPagertab视差效果sticky效果的demo”中,开发者可能想要展示如何将这两个组件结合,同时添加视差效果和sticky效果来提升用户体验。 视差效果是一种设计趋势,它使得背景元素...

    不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefreshLayout+ViewPager+RecyclerView

    不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefreshLayout+ViewPager+RecyclerView,简书地址:https://www.jianshu.com/p/d35b5fa37b26

    图片视差效果

    图片视差效果是一种视觉上的创新设计技术,它通过让背景图像以较慢的速度移动,相对于前景元素,创造出一种深度感和立体感。这种效果在网页设计中被广泛应用,能够提升用户体验,使网站更加生动有趣。在本文中,我们...

    ParallaxPagerTransformer-为ViewPager添加视差效果的辅助控件.zip

    为ViewPager添加视差效果的辅助控件。项目地址:https://github.com/xgc1986/ParallaxPagerTransformer 效果图:如何使用你只需要为现有的ViewPager设置ParallaxPagerTransformer即可:viewPager.setPageTransformer...

    视差图转深度图1

    在计算机视觉和3D重建领域,视差图到深度图的转换是一个重要的步骤,它能够帮助我们从两个或多个视角的图像中恢复出场景的三维结构。标题中的"视差图转深度图1"提示我们将探讨这个过程,尤其是处理特定类型的视差图...

    jQuery全屏视差滚动效果

    7. **响应式设计**:全屏视差滚动效果应考虑不同屏幕尺寸和设备的方向,可能需要使用媒体查询(`@media`)或响应式框架(如Bootstrap)来调整元素大小和布局,以适应各种设备。 8. **插件使用**:在提供的参考示例...

    HTML5实现带平行视差效果的蓝天白云背景动画源码.zip

    这个"HTML5实现带平行视差效果的蓝天白云背景动画源码.zip"文件显然包含了一个使用HTML5技术创建的互动背景动画,特别的是,它运用了平行视差(Parallax Scrolling)效果。 平行视差是近年来在网页设计中非常流行的...

    html5实现的酷炫网页3D图片视差移动特效源码.zip

    这个特效是通过在网页上应用3D视差滚动效果来增强用户体验,使得当用户滚动或移动鼠标时,背景图片和前景元素产生不同的移动速度,从而营造出深度感和立体感。 视差滚动技术源自游戏设计,现在已经被广泛应用到网页...

    视差和3D变换效果的欢迎页

    本文将深入探讨如何利用`PageTransformer`实现`ViewPager`的视差效果和反转效果变换。 `ViewPager`是Android SDK中的一个强大组件,它允许用户在多个页面之间进行平滑的左右滑动。默认情况下,`ViewPager`提供了...

    视差轮播图-高级质感切换特效-HTML源码

    在网页设计中,视差滚动(Parallax Scrolling)是一种流行的视觉效果,它使得背景元素以不同的速度移动,从而创建出深度和立体感,给用户带来独特的浏览体验。本资源提供的"视差轮播图-高级质感切换特效-HTML源码...

    html5电影海报跟随鼠标移动视差动画特效.rar

    具体来说,这个项目实现了电影海报在网页上跟随鼠标移动时产生视差滚动的效果,这种效果能够增加网站的视觉吸引力和用户的沉浸感。 首先,我们有`index.html`和`index2.html`两个主要的HTML文件。这些文件是网页的...

Global site tag (gtag.js) - Google Analytics