如何在滾動時修復頂部的佈局位置

我在活動中間有一個佈局（或選項卡布局），我希望當用戶滾動並且此佈局達到頂部時，它會停留在頂部（替換工具欄），其餘內容保持滾動。例如，我的網頁看起來是這樣的：如何在滾動時修復頂部的佈局位置

________________________________ 
|  custom toolbar  | 
|------------------------------| 
|        | 
|   some content   | 
|        | 
|------------------------------| 
| layout (or tab layout) | 
|------------------------------| 
|        | 
|  rest of the contents  | 
|        | 
|        | 
|        | 
|        | 
|______________________________|

而且我希望它是這樣的滾動後：喜歡「我的應用程序&遊戲頁面的

________________________________ 
|  layout (or tab layout) | 
|------------------------------| 
|        | 
|  rest of the contents  | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|______________________________|

類中的Play商店應用。

來源

2017-04-20 Hadi290

你想使用一些圖書館?????我建議這一個：https：//github.com/florent37/MaterialViewPager或者你可以找到另一個庫來做到這一點 –

@ArashHatami很好的圖書館..感謝分享鏈接... – deejay

@ArashHatami不，目前我不使用任何庫，但我一定會研究那個。同時，任何其他建議將不勝感激。 – Hadi290

1.使用CoordinatorLayout作爲根佈局。

2.添加AppBarLayout和NestedScrollView直接孩子的CoordinatorLayout

AppBarLayout  -> Toolbar + Some content + TabLayout 
    NestedScrollView -> Rest of the contents

內AppBarLaout，添加子CollapsingToolbarLayout和TabLayout。將Toolbar和ImageView分成CollapsingToolbarLayout。

<AppBarLaout> 
     <CollapsingToolbarLayout> 
      <ImageView /> 
      <Toolbar /> 
     </CollapsingToolbarLayout> 

     <TabLayout /> 
    </AppBarLaout>

4.添加屬性app:layout_scrollFlags="scroll|exitUntilCollapsed"到CollapsingToolbarLayout和屬性app:layout_scrollFlags="scroll|enterAlways"到Toolbar的崩潰效果。

5.添加屬性app:layout_behavior="@string/appbar_scrolling_view_behavior"到NestedScrollView爲您的內容scrolling行爲。

你的最終佈局結構應該像這樣：

<CoordinatorLayout> 

    <AppBarLaout> 
     <CollapsingToolbarLayout> 
      <ImageView /> 
      <Toolbar /> 
     </CollapsingToolbarLayout> 

     <TabLayout /> 
    </AppBarLaout> 

    <NestedScrollView> 

     <!-- Your content --> 

    </NestedScrollView> 

<CoordinatorLayout>

這裏是一個工作代碼：

<?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:id="@+id/container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="206dp" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:titleEnabled="false"> 

      <ImageView 
       android:id="@+id/image_header" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/anim_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:minHeight="?attr/actionBarSize" 
       app:layout_scrollFlags="scroll|enterAlways" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

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

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" 
      app:tabGravity="fill" 
      app:tabMode="scrollable" /> 

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

    <android.support.v4.widget.NestedScrollView 
     android:id="@+id/content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <!-- Your content --> 

    </android.support.v4.widget.NestedScrollView> 

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

希望這將有助於〜

來源

2017-04-20 21:34:57 FAT

如何在滾動時修復頂部的佈局位置

回答

相關問題