如何让Android微博个人详情页滚动到顶部

版权声明：本文为xing_star原创文章，转载请注明出处！

本文同步自

个人详情页滑动到顶部

最近产品提了个新需求，需要实现点击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，部分代码可以看看。

ps:

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