版权声明:本文为xing_star原创文章,转载请注明出处!

本文同步自http://javaexception.com/archives/103

个人详情页滑动到顶部

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

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

先看看xml布局的伪代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7.  
  8. <android.support.design.widget.AppBarLayout
  9. android:id="@+id/app_bar_layout"
  10. android:layout_width="match_parent"
  11. android:layout_height="wrap_content"
  12. android:background="#fff6f6f6">
  13.  
  14. <android.support.design.widget.CollapsingToolbarLayout
  15. android:id="@+id/toolbar_layout"
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. app:contentScrim="@color/transparent"
  19. app:layout_scrollFlags="scroll|exitUntilCollapsed"
  20. app:toolbarId="@+id/toolbar">
  21.  
  22. <android.support.v7.widget.Toolbar
  23. android:id="@+id/toolbar"
  24. android:layout_width="match_parent"
  25. android:layout_height="48dp"
  26. android:visibility="invisible"
  27. android:background="@color/white"
  28. app:layout_collapseMode="pin">
  29.  
  30. </android.support.v7.widget.Toolbar>
  31.  
  32. </android.support.design.widget.CollapsingToolbarLayout>
  33.  
  34. <android.support.design.widget.TabLayout
  35. android:id="@+id/gift_tab"
  36. style="@style/CustomerTabLayout"
  37. android:layout_width="match_parent"
  38. android:layout_height="45dp"
  39. app:tabGravity="center"
  40. app:tabMode="scrollable" />
  41. <View
  42. android:layout_width="match_parent"
  43. android:layout_height="1dp"
  44. android:background="#f2f2f2" />
  45.  
  46. </android.support.design.widget.AppBarLayout>
  47.  
  48. <android.support.v4.view.ViewPager
  49. android:id="@+id/viewpager"
  50. app:layout_behavior="@string/appbar_scrolling_view_behavior"
  51. android:layout_width="match_parent"
  52. android:layout_height="match_parent" />
  53.  
  54. </android.support.design.widget.CoordinatorLayout>

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

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

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

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

  1. CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams()).getBehavior();
  2. if (behavior instanceof AppBarLayout.Behavior) {
  3. AppBarLayout.Behavior appBarLayoutBehavior = (AppBarLayout.Behavior) behavior;
  4. if (mCollapsingHeight != 0) {
  5. appBarLayoutBehavior.setTopAndBottomOffset(-Math.abs(mCollapsingHeight));
  6. }
  7. }

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

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

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

完整的代码如下:

  1. private void initView() {
  2. appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
  3. mCollapsingHeight = appBarLayout.getHeight() - toolbar.getHeight() - DisplayUtils.dip2px(46);
  4. });
  5. if (scrollType != 0) {
  6. appBarLayout.post(() -> {
  7. CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams()).getBehavior();
  8. if (behavior instanceof AppBarLayout.Behavior) {
  9. AppBarLayout.Behavior appBarLayoutBehavior = (AppBarLayout.Behavior) behavior;
  10. if (mCollapsingHeight != 0) {
  11. appBarLayoutBehavior.setTopAndBottomOffset(-Math.abs(mCollapsingHeight));
  12. }
  13. }
  14. });
  15. }
  16. }

个人详情页相关:

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

ps:

由于服务器出了问题,这篇文章内容已丢失,这是重新写的

如何让Android微博个人详情页滚动到顶部的更多相关文章

  1. iOS开发——UI进阶篇(十)导航控制器、微博详情页、控制器的View的生命周期

    一.导航控制器出栈 1.initWithRootViewController本质 UIViewController *vc = [[OneViewController alloc] init]; // ...

  2. iOS之UI--微博个人详情页

    前言:微博个人详情页,和我常用的的QQ空间的详情页是同样的.要求能够融会贯通,做这一类的界面能够快速上手实现. 动态图效果展示: 直接使用UINavigationBar->UITableView ...

  3. Android 自定义控件 轻松实现360软件详情页

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43649913,本文出自:[张鸿洋的博客] 1.概述 最近有不少朋友私聊问应用宝. ...

  4. Android仿淘宝继续上拉进入商品详情页的效果,使用双Fragment动画切换;

    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...

  5. Android跳转淘宝、京东APP商品详情页

    import Android.content.Intent; import android.content.pm.PackageManager; import android.net.Uri; imp ...

  6. Android点击跳转到淘宝的某一商品详情页或者某一店铺页面

    最近项目的有个需求是点击购买资料按钮进入淘宝界面,简单分析一下,如果用户手机有淘宝就打开淘宝的页面,没有的话也可以选择使用webView进行展示,还是使用手机浏览器进行展示. 判断有无淘宝的代码就不贴 ...

  7. react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置

    现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...

  8. 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

    高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...

  9. 自己定义ViewGroup实现仿淘宝的商品详情页

    近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...

随机推荐

  1. JQUERY多选框,单选框,检查选中的值

    var str=""; $(":checkbox:checked").each(function(){ if($(this).attr("checke ...

  2. Android自己定义组件系列【11】——实现3D立体旋转效果

    今天在网上看到一篇文章写关于Android实现3D旋转(ca=drs-">http://www.ibm.com/developerworks/cn/opensource/os-cn-a ...

  3. PPAPI与Browser间使用AsyncIPC通信

    採用AsyncIpc这个项目(https://github.com/hicdre/AsyncIpc).来完毕PPAPI Plugin进程与Browser进程的通信. foruok原创.如需转载请关注f ...

  4. rails用generate为两个模型创建has_and_belongs_to_many中间表

    假设 teachers和students具备many-to-many的关系,那么需要一个Join 表,has_and_belongs_to_many默认该表名字为teachers_students,这 ...

  5. node js 安装时选择勾上path

    勾上path则会自动配置环境变量,否则必须手动去添加nodejs的环境变量.

  6. SQL Server 2012 安装图解教程(附sql2012下载地址)

    在安装微软最新数据库SQL Server 2012之前,编者先确定一下安装环境:Windonws 7 SP1,32位操作系统.CPU是2.1GHz赛扬双核T3500,内存2.93GB. sql2012 ...

  7. miller_rabin模板

    miller_rabin素数测试法 #include <iostream> #include <cstdlib> #include <stdio.h> #inclu ...

  8. httpd2.4.27rpm包制作

    http2.4.27 rpm包制作1.安装rpm-buildyum -y install rpm-build2.使用普通用户创建spec规则文件su - lxhvim httpd.spec Name: ...

  9. react native 中的redux 理解

    redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...

  10. HDU2594 Simpsons’ Hidden Talents —— KMP next数组

    题目链接:https://vjudge.net/problem/HDU-2594 Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Oth ...