文档章节

Android实现自定义引导页(实现跟随式小圆点效果)

蜗牛崛起
 蜗牛崛起
发布于 2017/05/03 15:51
字数 428
阅读 14
收藏 0

实现效果图如下

输入图片说明

具体实现过程可参看链接:http://www.jianshu.com/p/adb21180862a

这里主要看下实现跟随式小圆点效果的思路及知识点

实现小圆点动态跟随的思路:首要的是获得两个点之间的距离【mDistance 】,然后根据页面的移动,通过设置小圆点的 leftMargin 实现动态跟随。【根据mDistance * (position + positionOffset) 可以实时更新小白点的位】。

需要注意的是:在onCreate()中直接获得小白点(实时跟随的小圆点)的左边距 getLeft()结果为0,这是因为View组件布局要在onResume回调后完成。所以,我们可以根据下面方法来获取

//在布局发生改变或者某个视图的可视状态发生改变时调用该事件。但此方法会被多次调用,因此需要在获取到视图的宽度和高度后执行 remove 方法移除该监听事件。

mLight_dots.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                //获得两个圆点之间的距离
                mDistance = mIn_ll.getChildAt(1).getLeft() - mIn_ll.getChildAt(0).getLeft();
               mLight_dots.getViewTreeObserver()
                        .removeGlobalOnLayoutListener(this);
            }
        });

监听页面的移动情况

 mIn_vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //页面滚动时小白点移动的距离,并通过setLayoutParams(params)不断更新其位置
                float leftMargin = mDistance * (position + positionOffset);
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)      mLight_dots.getLayoutParams();  
                params.leftMargin = (int) leftMargin;
                mLight_dots.setLayoutParams(params); 
            }

            @Override
            public void onPageSelected(int position) {
                //页面跳转时,设置小圆点的margin
                float leftMargin = mDistance * position;
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mLight_dots.getLayoutParams();
                params.leftMargin = (int) leftMargin;
                mLight_dots.setLayoutParams(params);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

在页面移动过程中,根据mDistance * (position + positionOffset) 可以实时更新小白点的位置。

另外我们可以了解下getViewTreeObserver的用法

© 著作权归作者所有

共有 人打赏支持
蜗牛崛起
粉丝 3
博文 127
码字总数 63547
作品 0
东城
程序员
私信 提问
Android ViewPager使用详解

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等...

Remix_jx
2014/10/27
0
0
Android 滑动效果高级篇(八)—— 自定义控件

自定义控件,较常用View、ViewGroup、Scroller三个类,其继承关系如下: 本示例自定义控件,实现一个Gallery效果,并添加了一个显示View个数和位置的bar条,效果图: 自定义控件,包含通过继...

长平狐
2013/01/06
1K
0
模仿美团团购第一次使用时候的引导界面(有动画效果图)

实现方式:ViewPager+PopupWindow。背景是透明的,先看下效果 进入程序后会以动画的方式弹出引导界面,可以左右横向拖动,在最后一张图片的立即体验上触摸后可以关闭引导,回到主界面 package co...

长平狐
2012/08/09
6.2K
6
模仿美团团购第一次使用时候的引导界面(有动画效果图)

实现方式:ViewPager+PopupWindow。背景是透明的,先看下效果 进入程序后会以动画的方式弹出引导界面,可以左右横向拖动,在最后一张图片的立即体验上触摸后可以关闭引导,回到主界面 package co...

长平狐
2012/08/21
607
0
模仿美团团购第一次使用时候的引导界面(有动画效果图)

实现方式:ViewPager+PopupWindow。背景是透明的,先看下效果 进入程序后会以动画的方式弹出引导界面,可以左右横向拖动,在最后一张图片的立即体验上触摸后可以关闭引导,回到主界面 package co...

长平狐
2012/08/14
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

初探Spring Cloud(一)

1. 什么是Spring Cloud? Spring提供了一系列工具,可以帮助开发人员迅速搭建分布式系统中的公共组件(比如:配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,...

__HuWei
12分钟前
0
0
Mac配置ssh免密钥登录

Mac终端每次使用ssh -p 22 user@ip登录很是麻烦,下面介绍配置ssh免密钥登录: cd ~/.ssh下创建conf文件,写入以下配置: Host test HostName ip Port 22 IdentityFile /Users/t/key/test.p...

littlemesieV
27分钟前
1
0
Spark2.0操作ES

ES提供了支持包来方便的操作ES。首先添加ES的依赖maven: <dependency> <groupId>org.elasticsearch</groupId> <artifactId>elasticsearch-spark-20_2.11</artifactId> <version>6.2.0</ver......

守望者之父
29分钟前
1
0
专业术语

1、防御性编程 DruidDataSource类有一个init方法,我们在spring中配置druid时,都会指定 init-method='init'. 而且DruidDataSource也在其他地方,诸如getConnection()方法里作了防御性编程, 也就...

still5656
31分钟前
1
0
微信开发--测试账号相关

1、微信公众平台选择代码开发后,其平台上的部分功能会不可用 可在开发者工具中选择开通测试账号,进行相关的功能调试(测试账号出微信支付不可调试外,其他功能基本上都可以调试) 2、测试账号...

Code辉
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部