一種巢狀滑動衝突的解決方案

YvesCheung發表於2018-05-03

非巢狀滑動 | 巢狀滑動

相比起非巢狀滑動的自定義分發事件的方案,巢狀滑動衝突有比較成熟的 Google 解決方案:NestedScrolling

三層巢狀的滑動衝突

巢狀滑動

UI 層級如下:

  • 最外層(底層)是一個具有下拉重新整理功能的佈局
  • 中層是本庫提供的控制元件 StickNestedLayout ,解決導航欄吸頂,以及內外層的滑動衝突
  • 最內層(上層)依次是 headView / navView / contentView ,對應上部的內容區域,中部的吸頂導航欄區域,下部的 ViewPager 區域
  • ViewPager 裡面有 RecyclerView 列表

StickNestedLayout

使用

你可以通過 StickNestedLayout 輕鬆地完成這種頁面。

<RefreshLayout
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <mobile.yy.com.nestedtouch.StickyNestedLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
            android:id="@id/stickyHeadView"
            layout="@layout/moment_head_view" />

        <NavView
            android:id="@id/stickyNavView"
            android:layout_width="match_parent"
            android:layout_height="40dp" />

        <android.support.v4.view.ViewPager
            android:id="@id/stickyContentView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </mobile.yy.com.nestedtouch.StickyNestedLayout>
</RefreshLayout>
複製程式碼

其中 headView / navView / contentView 的id必須為 stickyHeadView / stickyNavView / stickyContentView

可以通過執行工程 nestedtouchsample 檢視具體程式碼。例子中涉及的其他第三方庫有下拉重新整理控制元件 SmartRefreshLayout 和導航欄 PagerSlidingTabStrip ,部分參考 StickNavLayout

配置

  1. 專案build.gradle新增

    allprojects {
    	repositories {
    		...
    		maven { url 'https://jitpack.io' }
    	}
    }
    複製程式碼
  2. 對應模組新增依賴

    dependencies {
        compile 'com.github.YvesCheung.TouchEventBus:nestedtouch:1.4.3'
    }
    複製程式碼

專案地址

github.com/YvesCheung/…

相關文章