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

￡神魔★判官ぃ 2021-12-09 01:15 268阅读 0赞

本文同步自[http://javaexception.com/archives/103][http_javaexception.com_archives_103]

## 个人详情页滑动到顶部 ##

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

![667405-20190526103820288-1758110735.png][]

![667405-20190526103831098-201653686.png][]

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

先看看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][https_github.com_whisper92_WeiboProfile]，技术实现上采用的是ScrollView，ListView，部分代码可以看看。

ps:

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

转载于:https://www.cnblogs.com/xing-star/p/10925347.html

[http_javaexception.com_archives_103]: http://javaexception.com/archives/103
[667405-20190526103820288-1758110735.png]: /images/20211209/0799cfb5b2014f7c890b6a901d383d3f.png
[667405-20190526103831098-201653686.png]: /images/20211209/a830097995d4447b8375c202e880cbc8.png
[https_github.com_whisper92_WeiboProfile]: http://javaexception.com/go.html?url=https://github.com/whisper92/WeiboProfile