如何讓Android微博我的詳情頁滾動到頂部

時間 2019-11-07

原文原文鏈接

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

我的詳情頁滑動到頂部

最近產品提了個新需求，須要實現點擊App內的某個按鈕跳轉到我的詳情頁而且滑動到頂部，我的詳情頁的頁面交互稍微複雜，技術角度上包含了狀態欄顏色變換，view滑動聯動等問題，技術實現上採用了Google出的CoordinatorLayout那套組件，因爲App的我的詳情頁跟微博的類似，這裏就拿微博爲例來描述。微博默認的效果以及手動滑動到頂部的效果圖以下。android

我的詳情頁技術實現分析:

先看看xml佈局的僞代碼:git

<?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往上滑。github

appBarLayout.post(() -> {
   //...具體的滑動邏輯
});

操做AppBarLayout滑動的是對應的Behavior。在CoordinatorLayout這套組件裏面體現的淋漓盡致。感興趣的能夠好好分析下CoordinatorLayout是如何完成事件分發的，如何讓子view相互聯動的。服務器

這裏具體的滑動邏輯僞代碼爲:app

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。post

完整的代碼以下:url

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));
                }
            }
        });
    }
}