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

个人详情页滑动到顶部

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

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

先看看xml布局的伪代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff6f6f6">
    <android.support.design.widget.CollapsingToolbarLayout
      android:id="@+id/toolbar_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:contentScrim="@color/transparent"
      app:layout_scrollFlags="scroll|exitUntilCollapsed"
      app:toolbarId="@+id/toolbar">
      <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:visibility="invisible"
        android:background="@color/white"
        app:layout_collapseMode="pin">
      </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
    <android.support.design.widget.TabLayout
      android:id="@+id/gift_tab"
      style="@style/CustomerTabLayout"
      android:layout_width="match_parent"
      android:layout_height="45dp"
      app:tabGravity="center"
      app:tabMode="scrollable" />
    <View
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="#f2f2f2" />
  </android.support.design.widget.AppBarLayout>
  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

整个结构上分为两部分,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仿微博个人详情页滚动到顶部的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 安卓(android)仿电商app商品详情页按钮浮动效果

    1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,headView 3.中间内容,与悬浮内容相同,middleView 4.商品详情展示页面,detailView 因为页面内容高度会超出屏幕,所以用Scrollview实现滚动,悬浮view与scrollview同级,都在一个帧布局或者相对布局中. 当y方向的滚动距离小于中间的内容middleView到

  • Android仿京东、天猫商品详情页

    前言 前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东.天猫详情页面的效果,今天要说的是优化版,是我们线上实现的效果,首先看一张效果: 项目结构分析 首先我们来分析一下要实现上面的效果,我们需要怎么做.顶部是一个可以滑动切换Tab,可以用ViewPager+Fragment实现,也可以使用系统的TabLayout控件实现:而下面的 View是一个可以滑动拖动效果的View,可以采用网上一个叫做DragLayout的控件,我这里是自己实现了一个,主要

  • Android如何跳转到应用商店的APP详情页面

    需求:从App内部点击按钮或链接,跳转到应用商店的某个APP的详情页面. 让用户 下载 或 评论. 实现: /** * 启动到应用商店app详情界面 * * @param appPkg 目标App的包名 * @param marketPkg 应用商店包名 ,如果为""则由系统弹出应用商店列表供用户选择,否则调转到目标市场的应用详情界面,某些应用商店可能会失败 */ public void launchAppDetail(String appPkg, String marketPkg)

  • Android应用自动跳转到应用市场详情页面的方法

    前言 众所周知在Android应用开发过程中,可能会有需求,比如:推广时跳转到应用市场下载应用,跳转到应用市场给自己的应用打分,跳转到应用市场更新自己的应用. 那如何跳转到应用市场呢? 可能跳转的方法大家都是知道的,方法如下: public static void goToMarket(Context context, String packageName) { Uri uri = Uri.parse("market://details?id=" + packageName); Int

  • android scrollview 自动滚动到顶部或者底部的实例

    android scrollview 自动滚动到顶部或者底部 摘要: android scrollview 自动滚动到顶部或者底部 android scrollview 自动滚动到顶部或者底部 //设置默认滚动到顶部 scrollView.post(new Runnable() { @Override public void run() { // TODO Auto-generated method stub scrollView.fullScroll(ScrollView.FOCUS_UP);

  • Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解

    一.淘宝商品详情页效果 我们的效果 二.实现思路 使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView的竖直排列,以及滑动事件的处理.如下图 三.具体实现 1.继承viewGroup自定义布局View 重写onMeasure()和onLayout方法,在onLayout方法中完成对两个子ScrollView的竖直排列布局,代码如下: 布局文件: <RelativeLayout xmlns:android="http:/

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

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

  • Android仿QQ好友详情页下拉顶部图片缩放效果

    本文实例为大家分享了Android下拉顶部图片缩放效果展示的具体代码,供大家参考,具体内容如下 效果图 效果分析 1 向下滑动,头部的图片随着手指滑动不断变大 2 向上滑动,不断的向上移动图片,直到图片不可见 3 当顶部图片不可见时,向上滑动,滑动ListView 实现思路 1 由于这个View分上下两部分,垂直排列,可以通过继承LinearLayout实现::自定义一个DragImageView,该View继承LinearLayout public DragImageView(Context

  • Android实现listview滑动时渐隐渐现顶部栏实例代码

    我在开发的时候遇到了这样的需求,就是在listview的滑动中,需要对顶部的栏目由透明慢慢的变为不透明的状态,就是以下的效果 最先开始的时候想的很简单,无非就是监听listview的滑动距离,然后根据距离算出透明度的比值,就可以了,但是事实上呢也的确是这样做的 只是在获取listview的滑动距离上可能没法直接获取,需要动态的去计算 下面贴出全部代码吧,不想码字了,最近感冒了,脑袋晕乎乎的,还疼,代码更直观一些 private void initListener() { lvList.setOn

  • Android仿视频加载旋转小球动画效果的实例代码

    先上个效果图,以免大家跑错地了. 嗯,除了只能录三秒,其他没啥问题. 下面分析一下怎么实现上面这个效果. 理性分析后我们可以看到是几个小球绕着一个圆进行运动,那这里面的重点我们看看什么. 绘制五个球,没什么难度,让球绕圆进行运动,这个好像我们没有见到是怎么去实现了,那下就说这个. 从本质上看,球绕圆运动,其实我们可以看作是一个物体绕指定的路劲运动,那我们就有下面几个东西需要说一下: 1:Path 2:ValueAnimator 3:PathMeasure 前两个大家应该都见过,一个是路径,就是可

  • Android仿微信朋友圈全文、收起功能的实例代码

    前言 一般在社交APP中都有类似朋友圈的功能,其中发表的动态内容很长的时候不可能让它全部显示.这里就需要做一个仿微信朋友圈全文.收起功能来解决该问题.在网上看到一个例子-->http://www.jb51.net/article/105251.htm,写的很不错,但是有个bug,他这个Demo只有在条目固定的时候才正常,当增加.删除条目的时候会出现全文.收起显示混乱的问题.原因是他使用了固定的position作为key来保存当前显示的状态.这篇文章在他的基础上进行优化. 效果图 具体代码 (详细

  • Android模仿实现微博详情页滑动固定顶部栏的效果实例

    前言 最近项目中遇到一个需求,类似微博详情页的效果,通过查找相关的资料终于找了对应的解决方案,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下我们今天要实现的效果: 滑动固定顶部栏效果图 这段时间公司准备重构一个项目,刚好用到这个效果,我就顺带写了篇文章,关于这个效果网上可以找到一些相关资料的,昨晚看了一些,感觉都不是很好,有点模棱两可的样子,也没提到需要注意的一些关键点,这里来做下整理,由于涉及到公司的代码,这里我就写个简单的Demo来讲解. 简单Demo 传统套路:

  • Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能

    需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始没什么思路,后来搜了一下,发现有好几种实现方法,最好的一种就是在ViewPager图片的后面再加一个view,然后滑动viewpager的时候,判断一下就行了. 附一个链接,我写的代码就是参考的这个,稍微改了一点点,先看看效果图. 实现起来比较简单,先写一个滑动加载详情的布局,然后在viewpager的instantiateItem里面判断一下,如果是最后一张,就显示加载详情的那个布局.不过需要注意的是,v

  • 如何利用Android仿微博正文链接交互效果

    目录 前言 一.链接的匹配和显示交互 二.链接的点击交互 总结 前言 社区内容经常会有插入链接的需要,这时就产生了对链接的UI和点击交互的需求,我们在微博中也经常会在列表页面和详情页面看到.下边我们就此功能分析一下具体实现. 一.链接的匹配和显示交互 首先我们先分析一下链接的组成部分,可以肯定的是需要一个显示的标题,我们可能会对这个标题在UI表现上做些处理(常见的是一个链接的标志和设置不同的颜色)来提示和吸引用户的注意,另外还需要点击时跳转的链接,这条链接可以是内部也可以是外部(这就属于业务的需

  • Android仿UC浏览器左右上下滚动功能

    本文要解决在侧滑菜单右边加个文本框,并能实现文本的上下滑动和菜单的左右滚动.这里推荐可以好好看看android的触摸事件的分发机制,这里我就不详细讲了,我只讲讲这个应用.要实现的功能就像UC浏览器(或其它手机浏览器)的左右滚动,切换网页,上下滚动,拖动内容. 本文的效果: 一.功能要求与实现 1.功能要求: (1)手指一开始按着屏幕左右移动时,只能左右滚动菜单,如果这时手指一直按着,而且上下移动了,那么菜单显示部分保持不变,但文本框也不上下移动!                       (2

  • Android仿天天动听歌曲自动滚动view

    最近项目中要做一个类似天天动听歌曲自动滚动行数的效果.首先自己想了下Android要滚动的那就是scroller类或者scrollto.scrollby结合了,或者view.layout()方法,或者使用动画.但是要循环滚动,貌似这些到最后一行滚动到第一行都有往回滚的效果,都不是很好的解决方法.怎么会忘记了可以绘制事件万物的的canvas呢.好吧,既然找到了,那就用这个方案吧!但是天天动听歌曲还有一个手动滑动的效果,貌似这篇文章没写.既然这样,那就自己来写下吧!实现之前还是先看下天天动听的效果:

随机推荐