web-dev-qa-db-fra.com

Défilement avec réduction de la barre d’outils et des onglets

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.

 enter image description here

androidandroid-layoutandroid-toolbarandroid-coordinatorlayout
9
syloc

Hé ça peut résoudre ton problème.

ajoutez simplement Android: layout_gravity = "bottom" à tablayout et Android: gravité = "top" à tollbar.

 enter image description here

17
Tirupati Rao

  1. 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".

  2. 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 ~

2
Ferdous Ahamed

Je ne sais pas trop ce qui doit être accompli ici.

  1. Ne voulez-vous pas que la tabulation se déplace de haut en bas lors du défilement? Si tel est le cas, vous voulez placer la 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.

2
Henry

ajoutez Android: layout_gravity = "bottom" à Android.support.design.widget.TabLayout

0
Mohammad Hossein Gerami