仿点评下拉广告曝光

不多说,先看想要实现的效果:

先分析上述过程:

第一步:下拉,导航栏根据下拉的距离进行隐藏;不超过临界距离H1而释放时进行恢复

第二步:下拉超过临界距离H1而又不超过临界距离H2,在此区间进行释放时则进行恢复到H1位置进行刷新等待2s后再进行恢复

第三步:下拉超过临界距离H2后,待释放便进行全屏往下滑到底;再进入到下一个页面内容

解决方案:

最开始自己用了比较简单实现的方案:利用margingTop的变化来达到view往下滑动的效果

第一步:因为我们要把首页的内容包括进去,所以最简单的方式是自定义一个GroupView使其继承LinearLayout,然后在将首页内容放在自定义LinearLayout的中间

第二步:我们在自定义GroupView的构造方法中,将header的布局内容给加进来;然后设置headerView的margingTop的大小为其高度的负值;这样一开始我们就看不到头部内容了

第三步:我们要有滑动事件,所以需要添加滑动监听;这个可以重写View的Ontouch方法也可以给首页内容的view添加onTouchListener事件;不管哪种,都需要在onTouch方法中进行数据计算及处理;

第四步:根据得到的滑动位移,设置view的marginTop值;然后就能得到我们想要的滑动效果

case MotionEvent.ACTION_MOVE:

float yMove = event.getRawY();

int distance = (int) (yMove - yDown);

if (distance

return false;

}

if (distance

return false;

}

if (currentStatus != STATUS_REFRESHING) {

if (headerLayoutParams.topMargin > 0 && headerLayoutParams.topMargin

currentStatus = STATUS_RELEASE_TO_REFRESH;

} else if (headerLayoutParams.topMargin > releaseToIntentHeight) {

currentStatus = STATUS_RELEASE_TO_INTENT;

} else {

currentStatus = STATUS_PULL_TO_REFRESH;

}

headerLayoutParams.topMargin = (distance / 2) + hideHeaderHeight;

header.setLayoutParams(headerLayoutParams);

}

break;

第五步:释放时,针对滑动所到的阶段进行相应的回滚效果

if (currentStatus == STATUS_RELEASE_TO_REFRESH) {

new RefreshingTask().execute();

} else if (currentStatus == STATUS_RELEASE_TO_INTENT) {

new ReleaseToIntentTask().execute();

break;

}else if (currentStatus == STATUS_PULL_TO_REFRESH) {

new HideHeaderTask().execute();

}

break;

具体详情可参考实现代码:RefreshableView类https://github.com/guiyichen/opApplicationShop

然而老大指出这种方式不是最优的,告诉我去尝试另一种方案:scorller

这个知识点自己还是比较陌生,然后去查看相关源码进行学习;弄懂后应用也就比较简单了

首先我们知道scroller类是一个滑动过程的辅助类;因为我们的view在滑动过程中只提供了scrollTo和scrollBy方法,两方法都是直接将view移动到目的地,没有中间过程;而Scroller类就为我们提供了中间数据计算过程,然后结合view的computeScroll方法,将滑动的中间过程进行绘制;使得整个过程更流畅

有了前面的实现效果,接下来要替换成scroller就比较容易了;我们只要在滑动时使用scroller辅助类调用startScroll方法进行运动计算;然后在当前的groupView中重写computeScroll方法,方法中调用view的scrollTo方法即可

我们需要注意的是,scrollTo和scrollBy的区别;to是从从前位置移到目的位置,而By是当前位置移动的位移差值

在一个要注意的是,我们移动的不是view,而是视图框;所以当我们是往下滑的效果时移动数据是往上走

先看效果再看代码:

demo地址:PullToScrollLayout类https://github.com/guiyichen/opApplicationShop

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180421G02XSI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券