Wie man eine Layout - Position oben beim Scrollen repariert

Question

Ich habe ein Layout (oder Tab - Layout) in der Mitte der Aktivität und ich möchte, wenn der Benutzer scrollt und dieses Layout die Spitze erreicht, bleibt es an der Spitze Symbolleiste) und der Rest des Inhalts scrollen weiter. Zum Beispiel sieht meine Seite wie folgt aus:

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

Und ich will es so sein nach dem Scrollen:

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

Art wie die App "Meine Apps & Spiele-Seite im Play Store .

Answer 1

1. Verwenden Sie CoordinatorLayout als Root-Layout.

2. hinzufügen AppBarLayout und NestedScrollView als direkter Nachkomme von CoordinatorLayout

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

3. Innen AppBarLaout, Kind CollapsingToolbarLayout und TabLayout hinzuzufügen. Behalte Toolbar und ImageView in CollapsingToolbarLayout.

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

     <TabLayout /> 
    </AppBarLaout> 

4. Attribut hinzufügen app:layout_scrollFlags="scroll|exitUntilCollapsed"-CollapsingToolbarLayout und app:layout_scrollFlags="scroll|enterAlways" zu Toolbar zum Zusammen Wirkung zuzuschreiben.

5. Attribut hinzufügen app:layout_behavior="@string/appbar_scrolling_view_behavior"-NestedScrollView für Ihre Inhalte scrolling Verhalten.

Ihre endgültige Layout-Struktur sollte wie folgt aussehen:

<CoordinatorLayout> 

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

     <TabLayout /> 
    </AppBarLaout> 

    <NestedScrollView> 

     <!-- Your content --> 

    </NestedScrollView> 

<CoordinatorLayout> 

Hier ein Arbeitscode lautet:

<?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> 

Hope this helfen ~