自定義 behavior 完美仿 QQ 瀏覽器首頁，美團商家詳情頁

徐公碼字發表於2019-09-16

前言

記得兩年前的時候，曾寫過自定義 behavior 的文章自定義 Behavior -仿新浪微博發現頁的實現，到現在差不多有一萬多的閱讀量吧。

今天，對該 behavior 進行升級，相對於兩年前的 behavior，增加了以下功能

級聯滑動過程中增加監聽回撥，方便外部根據滑動距離，進行相應的動畫，展現炫酷的 UI，通過 setPagerStateListener 設定回撥監聽
在滑動到頂部的時候，可以設定是否能夠滑動將 Head 滑動下來，方法為 setCouldScroollOpen
手指在 header 部分慣性滑動的時候，增加 fling 回撥，可根據需要，是否滑動 content 部分的 list ，方法為 setOnHeaderFlingListener
HeaderBehavior ，ContentBehavior 程式碼優化，與業務邏輯剝離開，方便複用。

使用說明

效果圖

我們先來看一下新浪微博發現頁的效果：

接下來我們在來看一下我們兩年前仿照新浪微博實現的效果

仿 QQ 瀏覽器

仿美團商家詳情頁面的：

分析說明：

有兩種狀態，open 和 close 狀態。

open 狀態指 Tab+ViewPager 還沒有滑動到頂部的時候，header 還沒有被完全移除螢幕的時候
close 狀態指 Tab+ViewPager 滑動到頂部的時候，Header 被移除螢幕的時候

從效果圖，我們可以看到在 open 狀態下，我們向上滑動 ViewPager 裡面的 RecyclerView 的時候，RecyclerView 並不會向上移動（RecyclerView 的滑動事件交給外部的容器處理，被被全部消費掉了），而是整個佈局（指 Header + Tab +ViewPager）會向上偏移。當 Tab 滑動到頂部的時候，我們向上滑動 ViewPager 裡面的 RecyclerView 的時候，RecyclerView 可以正常向上滑動，即此時外部容器沒有攔截滑動事件。

同時我們可以看到在 open 狀態的時候，我們是不支援下拉重新整理的，這個比較容易實現，監聽頁面的狀態，如果是 open 狀態，我們設定 SwipeRefreshLayout setEnabled 為 false，這樣不會攔截事件，在頁面 close 的時候，設定 SwipeRefreshLayout setEnabled 為 TRUE，這樣就可以支援下拉重新整理了。

基於上面的分析，我們這裡可以把整個效果劃分為三個部分

第一部分 Header 部分：在 Header 部分還沒有滑動到頂部的時候（即 open 的時候），跟隨手指滑動第二部分 Content 部分：我們向上滑動的時候，當Header 處於 open 狀態，這時候 Header 向上滑動， content 部分的 recyclerView 不會滑動，當 header 處於 close 狀態，content 部分向上滑動， RecyclerView 向上滑動。當我們向下滑動的時候，header 並不會隨著滑動，只會滑動 content 部分的 recyclerView 第三部分 search 部分：當我們向上滑動的時候，Search 部分會隨著滑動，最終停留在固定的位置.

我們把這三部分的關係定義為 Content 依賴於 Header。Header 移動的時候，Content 跟著移動。所以，我們在處理滑動事件的時候，只需要處理好 Header 部分的 Behavior 就oK了，Content 部分的 Behavior 不需要處理滑動事件，只需依賴於 Header ，跟著做相應的移動即可。Search 部分的 behavior 也不需要處理滑動事件，只需依賴與 Header，跟著做相應的移動。

至於具體怎麼實現的，可以看自定義 Behavior -仿新浪微博發現頁的實現，核心思想差不多，這裡不再重複。

使用說明

這裡我們已仿 QQ 瀏覽器 demo 進行說明：

我們一起來看一下怎樣使用：簡單來說，只需要兩步：

第一步，分別在 xml 檔案中，為 header 部分， content 部分指定我們對應的 behavior
第二部分，在程式碼裡面設定一些配置引數

第一步：編寫 xml 檔案，並指定相應的 behavior

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_light"
    android:fitsSystemWindows="true">

    <!-- Header 部分-->
    <FrameLayout
        android:id="@+id/id_uc_news_header_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/behavior_qq_browser_header_pager">


        <com.xj.qqbroswer.behavior.base.NestedLinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/header_height"
            android:orientation="vertical">

            <TextView
                android:id="@+id/news_tv_header_pager"
                style="@style/TextAppearance.AppCompat.Title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:gravity="center"
                android:text="QQBrowser Header"
                android:textColor="@android:color/white" />


        </com.xj.qqbroswer.behavior.base.NestedLinearLayout>
    </FrameLayout>

    <!-- ContentProvide 部分-->
    <LinearLayout
        android:id="@+id/behavior_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_behavior="@string/behavior_contents">

        <android.support.design.widget.TabLayout
            android:id="@+id/id_uc_news_tab"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tabs_height"
            android:background="@color/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorPrimaryLight"
            app:tabSelectedTextColor="@color/colorPrimaryLight"
            app:tabTextColor="@color/colorPrimaryIcons" />

        <android.support.v4.view.ViewPager
            android:id="@+id/id_uc_news_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#F0F4C3">

        </android.support.v4.view.ViewPager>
    </LinearLayout>

    <!--search 部分-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/header_title_height"
        app:layout_behavior="@string/behavior_search">

        <android.support.v7.widget.SearchView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="50dp"
            android:background="@android:color/white"
            app:defaultQueryHint="搜尋"
            app:queryHint="搜尋">

        </android.support.v7.widget.SearchView>

        <android.support.v7.widget.AppCompatImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:src="@mipmap/camera"
            android:tint="@android:color/white" />

    </RelativeLayout>


</android.support.design.widget.CoordinatorLayout>

複製程式碼

第二步：在程式碼裡面動態設定一些引數

private void initBehavior() {
    Resources resources = DemoApplication.getAppContext().getResources();
    mHeaderBehavior = (QQBrowserHeaderBehavior) ((CoordinatorLayout.LayoutParams) findViewById(R.id.id_uc_news_header_pager).getLayoutParams()).getBehavior();
    mHeaderBehavior.setPagerStateListener(new QQBrowserHeaderBehavior.OnPagerStateListener() {
        @Override
        public void onPagerClosed() {
            if (BuildConfig.DEBUG) {
                Log.d(TAG, "onPagerClosed: ");
            }
            Snackbar.make(mNewsPager, "pager closed", Snackbar.LENGTH_SHORT).show();
            setFragmentRefreshEnabled(true);
            setViewPagerScrollEnable(mNewsPager, true);
        }

        @Override
        public void onScrollChange(boolean isUp, int dy, int type) {

        }

        @Override
        public void onPagerOpened() {
            Snackbar.make(mNewsPager, "pager opened", Snackbar.LENGTH_SHORT).show();
            setFragmentRefreshEnabled(false);
        }
    });
    // 設定為 header height 的相反數
    mHeaderBehavior.setHeaderOffsetRange(-resources.getDimensionPixelOffset(R.dimen.header_height));
    // 設定 header close 的時候是否能夠通過滑動開啟
    mHeaderBehavior.setCouldScroollOpen(false);
    
    mContentBehavior = (QQBrowserContentBehavior) ((CoordinatorLayout.LayoutParams) findViewById(R.id.behavior_content).getLayoutParams()).getBehavior();
    // 設定依賴於哪一個 id，這裡要設定為 Header layout id
    mContentBehavior.setDependsLayoutId(R.id.id_uc_news_header_pager);
    // 設定 content 部分最終停留的位置
    mContentBehavior.setFinalY(resources.getDimensionPixelOffset(R.dimen.header_title_height));
}

複製程式碼

mHeaderBehavior.setHeaderOffsetRange 設定 Header 部分的偏移量，我們是通過 translationY 實現的，因此我們一般設定為 header 高度的相反數即可。 mHeaderBehavior.setCouldScroollOpen(false) ，設定 header close 的時候是否能夠通過滑動開啟。

mContentBehavior.setDependsLayoutId(R.id.id_uc_news_header_pager);設定依賴於哪一個 id，這裡要設定為 Header layout id。 mContentBehavior.setFinalY 設定 content 部分最終停留的位置。

我們來看一下 OnPagerStateListener 的回撥

/**
 * callback for HeaderPager 's state
 */
public interface OnPagerStateListener {
    /**
     * do callback when pager closed
     */
    void onPagerClosed();

    /**
     * when scrooll, it would call back
     *
     * @param isUp  isScroollUp
     * @param dy   child.getTanslationY
     * @param type touch or not touch, TYPE_TOUCH, TYPE_NON_TOUCH
     */
    void onScrollChange(boolean isUp, int dy, @ViewCompat.NestedScrollType int type);

    /**
     * do callback when pager opened
     */
    void onPagerOpened();
}

複製程式碼

主要有三個方法，第一個方法，onPagerClosed 當 header close 的時候，會回撥，第二個方法，當 header 滑動距離變化的時候，會回撥 onScrollChange 方法。它有三個引數， isUp 代表是否是向上滑動， dy 代表 header 的偏移量， type 代表型別是 touch 或者是非 touch 的（即 fling 滑動的）

如果你想要做一些酷炫的效果的話，你可以在 onScrollChange 方法中，根據滑動的距離，各個不同的 View 做相應的動畫。

仿美圖商家詳情頁面

步驟跟上面的仿 QQ 瀏覽器的步驟是一樣的，這裡不再重複相同的步驟，說幾個關鍵點：第一：在頁面 header close 的時候，我們可以通過滑動開啟header，這是通過呼叫 mHeaderBehavior.setCouldScroollOpen(true); 實現的。第二：滑動 header， fling 的時候，可以看到 content 部分的 recyclerView 也在滑動，我們是通過 header 的 fling 事件做到的，在 onFlingStart 的時候手動呼叫 RecyclerView 的 smoothScrollBy 進行滑動。

mHeaderBehavior.setOnHeaderFlingListener(new HeaderFlingRunnable.OnHeaderFlingListener() {
    @Override
    public void onFlingFinish() {

    }

    @Override
    public void onFlingStart(View child, View target, float velocityX, float velocityY) {
        Log.i(TAG, "onFlingStart: velocityY =" + velocityY);
        if (velocityY < 0) {
            mRecyclerView.smoothScrollBy(0, (int) Math.abs(velocityY), new AccelerateDecelerateInterpolator());
        }

    }

    @Override
    public void onHeaderClose() {

    }

    @Override
    public void onHeaderOpen() {

    }
});

複製程式碼

碰到的坑

header 部分無法響應滑動事件

我們是通過自定義一個 NestedLinearLayout ,重寫它的 onTouchEvent 事件，通過 NestedScrolling 機制將事件傳遞給 NestedScrollingParent，即 CoordinatorLayout，而 NestedScrollingParent 會交給子 View 的 behavior 進行處理。

@Override
public boolean onTouchEvent(MotionEvent event) {
    mGestureDetector.onTouchEvent(event);
    final int action = MotionEventCompat.getActionMasked(event);
    switch (action) {
        case MotionEvent.ACTION_DOWN:
            startNestedScroll(ViewCompat.SCROLL_AXIS_HORIZONTAL
                    | ViewCompat.SCROLL_AXIS_VERTICAL);

            break;
        case MotionEvent.ACTION_MOVE:
            int dy = (int) (event.getRawY() - lastY);
            lastY = (int) event.getRawY();
            //  dy < 0 上滑， dy>0 下拉
            if (dy < 0) { // 上滑的時候交給父類去處理
                if (startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL) // 如果找到了支援巢狀滾動的父類
                        && dispatchNestedPreScroll(0, -dy, consumed, offset)) {//
                    // 父類進行了一部分滾動

                }
            } else {
                if (startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL) // 如果找到了支援巢狀滾動的父類
                        && dispatchNestedScroll(0, 0, 0, -dy, offset)) {//
                    // 父類進行了一部分滾動

                }
            }
            break;
        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP:
            stopNestedScroll();
            break;

    }
    return super.onTouchEvent(event);
}


複製程式碼

當我們給 header 的子 View 設定點選事件的時候，無法滑動 header

對 Android 事件分發機制有一定了解的，都知道，在 Android 中，預設的事件傳遞機制是這樣的，

當TouchEvent發生時，首先Activity將TouchEvent傳遞給最頂層的View，TouchEvent最先到達最頂層 view 的 dispatchTouchEvent ，然後由 dispatchTouchEvent 方法進行分發。

如果dispatchTouchEvent返回true 消費事件，事件終結。
如果dispatchTouchEvent返回 false ，則回傳給父View的onTouchEvent事件處理；

onTouchEvent事件返回true，事件終結，返回false，交給父View的OnTouchEvent方法處理
如果dispatchTouchEvent返回super的話，預設會呼叫自己的onInterceptTouchEvent方法

預設的情況下interceptTouchEvent回撥用super方法，super方法預設返回false，所以會交給子View的onDispatchTouchEvent方法處理如果 interceptTouchEvent 返回 true ，也就是攔截掉了，則交給它的 onTouchEvent 來處理如果 interceptTouchEvent 返回 false ，那麼就傳遞給子 view ，由子 view 的 dispatchTouchEvent 再來開始這個事件的分發。

因此，當我們給子 View 設定點選事件的時候，由於預設的 parent 沒有攔截事件，會走到子 View 的 onToucheEvent 事件中，由於設定了點選事件，事件被消費了，所以不會回撥父 View onTouchEvent 中的 ACTION_MOVE 事件。

解決辦法: 重寫 NestedLinearLayout 的 onInterceptToucheEvent 事件，當是 ACTION_MOVE 事件的時候，返回 true ，攔截，這樣會呼叫自己的 onTouchEvent 事件，從而保證可以滑動。

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mDownY = (int) event.getRawY();
            // 當開始滑動的時候，告訴父view
            startNestedScroll(ViewCompat.SCROLL_AXIS_HORIZONTAL
                    | ViewCompat.SCROLL_AXIS_VERTICAL);
            break;
        case MotionEvent.ACTION_MOVE:
            // 確保不消耗 ACTION_DOWN 事件
            if (Math.abs(event.getRawY() - mDownY) > mScaledTouchSlop) {
                logD("onInterceptTouchEvent: ACTION_MOVE  mScaledTouchSlop =" + mScaledTouchSlop);
                return true;
            }
    }
    return super.onInterceptTouchEvent(event);
}


複製程式碼

但這裡還有一個坑，正常一個點選事件，會促發 ACTION_DOWN， ACTION_MOVE， ACTION_UP，如果我們直接在 ACTION_MOVE 裡面返回 true，將會導致子 View 的 onClick 事件失效。

解決辦法：

final ViewConfiguration configuration = ViewConfiguration.get(getContext());
mScaledTouchSlop = configuration.getScaledTouchSlop();
if (Math.abs(event.getRawY() - mDownY) > mScaledTouchSlop) {
    return true；
}
複製程式碼

關於滑動衝突解決的，可以看我以前的一篇部落格:ViewPager，ScrollView 巢狀ViewPager滑動衝突解決

如何判斷 header 是 fling 動作

我們這裡通過手勢處理器 GestureDetector 做到的，當然你也可以通過 VelocityTracker 計算，只不過比較繁瑣

public boolean onTouchEvent(MotionEvent event) {
    mGestureDetector.onTouchEvent(event);
}

        GestureDetector.OnGestureListener onGestureListener = new GestureDetector.OnGestureListener() {

            @Override
            public boolean onDown(MotionEvent e) {
                return false;
            }

            -----// 省略若干程式碼

            @Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                Log.d(TAG, "onFling: velocityY =" + velocityY);
//                fling((int) velocityY);
                getScrollingChildHelper().dispatchNestedPreFling(velocityX, velocityY);
                return false;
            }
        };

        mGestureDetector = new GestureDetector(getContext(), onGestureListener);



複製程式碼

題外話

有時候，做一些筆記真的挺重要的。

這一次寫這一篇部落格，是因為在專案中要做類似的效果。剛開始，真的沒什麼思路。但清楚得記得兩年前寫過類似的文章，具體實現原理早已忘光。我檢視了兩年前的部落格，整理了一下思路，將程式碼搬到專案中，發現了一些坑。修修補補，把坑都填了。

試想一下，如果當初沒有將原理記錄下來，這個效果，真的挺難實現的。如果你對 Coordinatorlayout , behavior,NestedScroll 機制這些不熟悉，你根本就無法實現。兩年前寫自定義 Behavior -仿新浪微博發現頁的實現這篇部落格的時候，收到挺多私信的，有一些反饋說他們做這個效果做了兩個多星期還是無法實現，挺感謝我寫這篇部落格的。因此，從現在起，不妨嘗試一下多做一下筆記。真的，好記性不如爛筆頭。

第二點感觸比較深的是，剛開始，我看了我兩年前寫的程式碼，我一開始的反應，我去，這是什麼垃圾程式碼。確實，很多地方寫得挺爛的，behavior 耦合業務邏輯，很難複用，也不好維護。因此，這一次，我在空閒的時間將 behavior 抽離出來，以後要實現類似的效果，輕鬆實現， biu biu biu。

說這麼多，總結如下

遇到不會的多做筆記，尤其是涉及到原理的
對程式碼要有敬畏之心，不多說，自己領悟取
保持一顆謙卑之心

CoordinatorLayoutExample

覺得效果還不錯的，可以動手掃一掃關注我的微信公眾號，或者到我的 github 上面 star，謝謝

仿UC瀏覽器首頁下拉動畫及實現分析
2016-11-26
瀏覽器動畫
iOS仿淘寶詳情頁，支付寶首頁上滑效果
2017-11-22
iOS
可用的空白頁網址,自己用來自定義瀏覽器的起始頁.
2018-03-02
瀏覽器
初學CSS仿QQ郵箱首頁介面
2017-07-09
CSS
警惕“仙劍”木馬篡改瀏覽器首頁
2016-07-06
瀏覽器
overscroll-behavior-x限制瀏覽器預設滑動返回上一頁
2024-05-08
瀏覽器
自定義behavior-仿華為應用市場
2018-07-05
win10用qq瀏覽器網頁卡怎麼處理 win10系統qq瀏覽器開啟網頁卡恢復方法
2020-10-28
Win10瀏覽器網頁
自定義web瀏覽器(五)
2013-06-26
Web瀏覽器
自定義模型怎麼在首頁呼叫？
2019-05-11
模型
Laravel 自定義 Markdown 電子郵件頁首和頁尾
2020-06-30
Laravel
瀏覽器中捲軸自定義
2024-05-03
瀏覽器
自定義分頁標籤詳解
2017-01-06
！！！網頁詳情頁成功!!!
2024-05-05
網頁
自定義圓形ImageView（仿QQ頭像）
2016-07-14
View
Android自定義View之高仿QQ健康
2016-04-18
AndroidView
瀏覽器頁面渲染機制
2019-03-01
瀏覽器
瀏覽器彈出小頁面
2016-07-04
瀏覽器
GKPhotoBrowser--自定義圖片瀏覽器
2017-11-28
瀏覽器
自定義瀏覽器捲軸樣式
2024-09-18
瀏覽器
edge瀏覽器怎麼設定預設主頁新版edge瀏覽器如何修改主頁
2022-10-11
瀏覽器
JS仿淘寶詳情頁選單條智慧定位效果
2014-01-15
JS
（六）仿QQ首頁drawer/側滑刪除/浮動imgaeView/角標拖拽
2018-11-23
View
相容各瀏覽器的設為首頁和加入收藏程式碼
2017-03-14
瀏覽器
VS Code在瀏覽器預覽HTML頁面
2019-06-05
瀏覽器HTML
瀏覽器渲染頁面的主體流程
2020-04-04
瀏覽器
谷歌瀏覽器頁面放大縮小
2019-09-03
谷歌瀏覽器
瀏覽器渲染網頁的過程
2019-04-09
瀏覽器網頁
瀏覽器頁面載入過程
2019-04-23
瀏覽器
uc 瀏覽器不能開啟網頁
2017-10-11
瀏覽器網頁
網頁跳轉（APP內/瀏覽器）
2017-09-29
網頁APP瀏覽器
仿知乎首頁學習 CoordinateLayout
2016-12-22
WebKit 瀏覽器內幕之瀏覽器特性/網頁渲染過程
2018-03-01
WebKit瀏覽器網頁
iOS高仿美團外賣店鋪主頁
2018-08-01
iOS
自定義瀏覽器滾動條樣式
2018-02-27
瀏覽器
win10瀏覽器如何儲存網頁_win10瀏覽器怎麼儲存網頁
2020-08-06
Win10瀏覽器網頁
windows10瀏覽器主頁設定方法_win10怎樣設定瀏覽器主頁
2020-07-01
Windows瀏覽器Win10
火狐瀏覽器(69版)修改起始頁，主頁和新標籤頁
2020-10-14
瀏覽器

自定義 behavior 完美仿 QQ 瀏覽器首頁，美團商家詳情頁

前言

使用說明

效果圖

分析說明：

使用說明

仿美圖商家詳情頁面

碰到的坑

題外話

相關文章