Android实现自定义引导页(实现跟随式小圆点效果)
Android实现自定义引导页(实现跟随式小圆点效果)
蜗牛崛起 发表于8个月前
Android实现自定义引导页(实现跟随式小圆点效果)
  • 发表于 8个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

实现效果图如下

输入图片说明

具体实现过程可参看链接: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
博文 115
码字总数 59184
×
蜗牛崛起
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: