重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Android仿微博个人详情页滚动到顶部的实例代码

个人详情页滑动到顶部

专注于为中小企业提供成都网站建设、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业荔湾免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

最近产品提了个新需求,需要实现点击App内的某个按钮跳转到个人详情页并且滑动到顶部,个人详情页的页面交互稍微复杂,技术角度上包含了状态栏颜色变换,view滑动联动等问题,技术实现上采用了Google出的CoordinatorLayout那套组件,由于App的个人详情页跟微博的相似,这里就拿微博为例来描述。微博默认的效果以及手动滑动到顶部的效果图如下。

Android仿微博个人详情页滚动到顶部的实例代码

Android仿微博个人详情页滚动到顶部的实例代码

个人详情页技术实现分析:

先看看xml布局的伪代码:

<?xml version="1.0" encoding="utf-8"?>

  
    
      
      
    
    
    
  
  

整个结构上分为两部分,AppBarLayout(里面包含TabLayout),ViewPager,根节点是CoordinatorLayout。上下滑动会引起AppBarLayout的联动,悬浮在顶部,或者是跟着viewPager一起滑动以及视差效果之类的。目前我们要实现的是,在进入当前页面时,强制让AppBarLayout滑动到顶部,使toolbar悬浮固定不动。那么该怎么做呢,一种思路是在onCreate()方法中,发post任务,页面渲染结束后,执行post任务,post的任务是调用AppBarLayout的API方法,让AppBarLayout往上滑。

appBarLayout.post(() -> {
  //...具体的滑动逻辑
});

操作AppBarLayout滑动的是对应的Behavior。在CoordinatorLayout这套组件里面体现的淋漓尽致。感兴趣的可以好好分析下CoordinatorLayout是如何完成事件分发的,如何让子view相互联动的。

这里具体的滑动逻辑伪代码为:

CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams()).getBehavior();
if (behavior instanceof AppBarLayout.Behavior) {
  AppBarLayout.Behavior appBarLayoutBehavior = (AppBarLayout.Behavior) behavior;
  if (mCollapsingHeight != 0) {
    appBarLayoutBehavior.setTopAndBottomOffset(-Math.abs(mCollapsingHeight));
  }
}

我们将appBarLayout向上滑动了mCollapsingHeight的高度,那么这个高度值是如何计算出来的呢。这个值,实际上是在最开始做个人详情页这个需求就已经得出的值。

mCollapsingHeight = appBarLayout.getHeight() - toolbar.getHeight() - DisplayUtils.dip2px(46);

这个值需要结合页面布局来计算,我们的页面布局两部分中,最上面的是appBarLayout,规定的是距离靠近toolbar的高度就产生渐变,toolbar开始固定位置,那么就需要按照这个公式计算mCollapsingHeight。

完整的代码如下:

private void initView() {
  appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
    mCollapsingHeight = appBarLayout.getHeight() - toolbar.getHeight() - DisplayUtils.dip2px(46);
  });
  if (scrollType != 0) {
    appBarLayout.post(() -> {
      CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams()).getBehavior();
      if (behavior instanceof AppBarLayout.Behavior) {
        AppBarLayout.Behavior appBarLayoutBehavior = (AppBarLayout.Behavior) behavior;
        if (mCollapsingHeight != 0) {
          appBarLayoutBehavior.setTopAndBottomOffset(-Math.abs(mCollapsingHeight));
        }
      }
    });
  }
}

个人详情页相关:

在Github上找到了一个仿微博个人详情页的开源项目,https://github.com/whisper92/WeiboProfile,技术实现上采用的是ScrollView,ListView,部分代码可以看看。

总结

以上所述是小编给大家介绍的Android仿微博个人详情页滚动到顶部的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


网站标题:Android仿微博个人详情页滚动到顶部的实例代码
分享地址:http://cqcxhl.com/article/psdoph.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP