文档章节

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

蜗牛崛起
 蜗牛崛起
发布于 2017/05/03 15:51
字数 428
阅读 13
收藏 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指示、爬取美女图片等源码

Android精选源码 一个爬取美女图片的app(http://www.apkbus.com/thread-600077-1-1.html) Android高仿抖音(http://www.apkbus.com/thread-600081-1-1.html) android一个可以上拉下滑的Ui效果......

逆鳞龙
06/12
0
0
android 三种实现水平向滑动方式(ViewPager、ViewFilpper、ViewF...

ViewPager ViewPager类提供了多界面切换的新效果。新效果有如下特征: [1] 当前显示一组界面中的其中一个界面。 [2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分...

带梦想一7飞
2013/08/01
0
1
Android App 多语言切换

前段时间公司 App 需要实现多语言切换功能,接到任务后先 Google 了下,发现搜到的方法都比较老旧,很多都莫名其妙,比如什么 API 欺骗、反射、手动转换语系,感觉不应该这么复杂地实现(也可...

丁佳辉
05/29
0
0
【Parallax Animation】实现知乎 Android 客户端启动页视差滚动效果

欢迎转载,但请务必注明出处![http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen-of-zhihu/][6] 前言 Parallax Scrolling(视差滚动)......

RyanHoo
2014/07/18
0
3

没有更多内容

加载失败,请刷新页面

加载更多

Vue学习资料

一直以为Vue是依赖nodejs的。 作为前端也可以耦合性就很低了。 //npm包管理器 进行管理npm install vue//初始化一个项目vue init//本地调试npm run dev//编译完成 ...

大灰狼wow
25分钟前
1
0
fullcalendar重新渲染

uiCalendarConfig.calendars.lesson_calendar.fullCalendar('removeEvents');var ym = uiCalendarConfig.calendars.lesson_calendar.fullCalendar('getView').title;$scope.get_lesson(y......

人来疯啊
30分钟前
1
0
多渠道打包总结

https://www.jianshu.com/p/2130db7584c8 https://blog.csdn.net/u011153817/article/details/50772496...

塔塔米
39分钟前
1
0
android -------- Data Binding的使用 ( 六) 自定义属性

今天来说说DataBinding在自定义属性的使用 默认的android命名空间下,我们会发现并不是所有的属性都能直接通过data binding进行设置,比如margin,padding,还有自定义View的各种属性。 默认...

切切歆语
45分钟前
1
0
收邮件 下载附件

uses IdMessage, IdMessageParts, IdAttachment, IdGlobalProtocols, ...;procedure SaveAttachmentsFromFile(FileName: String)var IdMessage: TIdMessage; MsgPart: Ti......

vga
51分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部