首页 > 学院 > 开发设计 > 正文

自定义御泥坊(淘宝、360手机卫士)产品详情页的布局悬停效果

2019-11-09 14:38:49
字体:
来源:转载
供稿:网友

如题:

当一个浮动layout的滑动到顶部时,这个浮动layout就悬停下来,当屏幕往下滑动时,浮动layout也跟着往下移动。

因为不知道怎么录制jif图片,所以上传两张图片代替。

    

效果就如上面三张图片所示。

 好,看完效果图之后,我们来看一下这个效果的设计原理。        首先,我们来看一张整体的设计图:

 

 

 

 

 

 

 

设计效果图是分为三个部分:顶部区域、浮动区域A、列表区域。1.当屏幕往上面滑动的时候,互动区域A也跟着滑动;2.当浮动区域A滑动到顶部的时候,浮动区域A停留在顶部(上右图);3.当屏幕往下滑动的时候,浮动区域A也跟着往下滑动。这是整个滑动的效果流程。

 

那么,这时问题来了。怎么能让浮动区域A停在顶部,而且不影响其他内容的滑动呢?

在这里我们可以写多一个和浮动区域A界面效果一模一样的浮动区域B。在布局的时候,先把浮动区域B的可见性设置为gone,即隐藏起来。当浮动区域A滑动到顶部的时候,就把浮动区域B的可见性设置为VISIBLE,即可见。这时浮动区域B会覆盖在整个屏幕的上面,即使整个屏幕在滑动的时候也不会影响浮动区域B的位置,那么看起来就好像浮动区域A是停留在顶部位置不动了,见下图。

 

 

(此时,设置浮动区域B的可见性为VISIBLE,即可见)

同理,当整个屏幕往下滑动的时候,再把浮动区域B的可见性设置为GONE,那么看起来的效果就好像浮动区域A又重新滑动起来了。

实现过程       说完原理之后,让我们来看看在代码里面是怎么实现这个过程的。我们先看看布局文件activity_main.xml

      由于整体的布局内容都是放在一个自定义的ScrollView里面。所以,只要我们在ScrollView里面判断:      当Scrollview向上滑动的距离大于等于顶部区域的高度时,也就是浮动区域A的顶边贴到屏幕顶部的时候,这是将浮动区域B的可见性设置为VISIBLE即可,否则设置为GONE即可。      这样就实现了我们想要的效果了,代码如下:      自定义的ListView代码:


上一篇:psci

下一篇:实现SDK的打包处理

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表