J'essaie de créer une mise en page avec une variable CollapsingToolbarLayout
avec l'indicateur scroll|exitUntilCollapsed
et une variable TabLayout
avec la propriété scroll|enterAlways
scrollFlag. En gros, je veux que ma barre d’outils soit épinglée et affiche et cache les onglets lors du défilement. J'ai modifié l'application cheesesquare de https://github.com/chrisbanes/cheesesquare . Voici ma mise en page xml;
<?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/main_content"
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="@dimen/detail_backdrop_height"
Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
Android:fitsSystemWindows="true">
<Android.support.design.widget.CollapsingToolbarLayout
Android:id="@+id/collapsing_toolbar"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
Android:id="@+id/backdrop"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:scaleType="centerCrop"
Android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<Android.support.design.widget.TabLayout
Android:id="@+id/tabs"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
<Android.support.v4.view.ViewPager
Android:id="@+id/viewpager"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<Android.support.design.widget.FloatingActionButton
Android:layout_height="wrap_content"
Android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
Android:src="@drawable/ic_discuss"
Android:layout_margin="@dimen/fab_margin"
Android:clickable="true"/>
</Android.support.design.widget.CoordinatorLayout>
Et voici le résultat;
Les onglets ne sont pas correctement positionnés. Et ils ne se soucient pas de la propriété enterAlways.
Hé ça peut résoudre ton problème.
ajoutez simplement Android: layout_gravity = "bottom" à tablayout et Android: gravité = "top" à tollbar.
Supprimez l'attribut app:layout_behavior="@string/appbar_scrolling_view_behavior"
& app:layout_scrollFlags="scroll|enterAlways"
de Android.support.design.widget.TabLayout
et ajoutez l'attribut Android:layout_gravity="bottom"
.
Définissez également Android.support.v7.widget.Toolbar
height sur 104(Toolbar+TabLayout height)
pour afficher Toolbar
et TabLayout
au cours de collapsed
.
Voici un exemple de travail:
<?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="256dp"
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="104dp"
Android:minHeight="?attr/actionBarSize"
Android:gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp" />
<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"
style="@style/MyCustomTabLayout"/>
</Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
<Android.support.v4.view.ViewPager
Android:id="@+id/view_pager"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_map"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentRight="true"
Android:layout_alignParentBottom="true"
Android:layout_gravity="bottom|end"
Android:layout_margin="@dimen/fab_margin"
app:backgroundTint="#f44336"
Android:src="@drawable/ic_maps_my_location" />
</Android.support.design.widget.CoordinatorLayout>
J'espère que cela aidera ~
Je ne sais pas trop ce qui doit être accompli ici.
TabLayout
en dehors de la CollapsingToolbarLayout
. Parce que tout ce que vous mettez dans la variable CollapsingToolbarLayout
continuera à défiler.A partir du commentaire que vous avez mis, j'ai modifié votre xml pour imiter celui de l'écran YouTube. La barre d'outils est placée en dehors de la présentation du coordinateur, car elle est épinglée de manière permanente et n'est pas affectée par le défilement. Ce qui mérite d'être mentionné est "One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind."
. Il est tiré de l'article de blog Android http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html . C'est pourquoi j'ai déplacé la barre d'outils hors de AppBarLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
Android:layout_height="match_parent"
Android:layout_width="match_parent"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"/>
<Android.support.design.widget.CoordinatorLayout
Android:id="@+id/main_content"
Android:layout_below="@id/toolbar"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<Android.support.design.widget.AppBarLayout
Android:id="@+id/appbar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<Android.support.design.widget.TabLayout
Android:id="@+id/tabs"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</Android.support.design.widget.AppBarLayout>
<Android.support.v4.view.ViewPager
Android:id="@+id/viewpager"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</Android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
J'ai mis le TabLayout statique, mais vous pouvez le faire défiler. Si ce n’est pas ce que vous recherchez, veuillez expliquer de façon imagée ce qui doit être réalisé ici. Je serai heureux d'aider.
ajoutez Android: layout_gravity = "bottom" à Android.support.design.widget.TabLayout