Masquer AppBar lors du défilement vers le bas
J'ai un AppBar et une disposition linéaire horizontale (qui comprend un texte d'édition et deux boutons d'image) et d'autres choses dans ma mise en page. Lorsque l'utilisateur fait défiler vers le bas, je veux que AppBar (en fait, le Toolbar à cacher . C'est ce que j'ai essayé , la barre d'applications ne se cache pas, elle reste simplement là. J'ai suivi le Chris Banes Cheesesquare Sample .
Voici la capture d'écran de mon application:
Lorsque l'utilisateur fait défiler, je veux que AppBar/Toolbar pour disparaître, et cette disposition horizontale, qui inclut l'edittext, remplace la barre d'application et y reste.
Pouvez-vous me dire ce que je fais mal?
<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/drawer_layout"
Android:layout_height="match_parent"
Android:layout_width="match_parent"
Android:fitsSystemWindows="true">
<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.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.v7.widget.Toolbar
Android:id="@+id/my_toolbar"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
Android:background="?attr/colorPrimary"
Android:elevation="4dp"
Android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</Android.support.design.widget.AppBarLayout>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
xmlns:app="http://schemas.Android.com/apk/res-auto" Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_show" tools:context="com.example.bimpc1.sozluk.GosterActivity"
Android:background="@color/white"
Android:id="@+id/mylin">
<View
Android:layout_width="fill_parent"
Android:layout_height="30dp">
</View>
<LinearLayout
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:orientation="horizontal"
Android:id="@+id/topLayout"
Android:layout_alignParentTop="true"
Android:paddingLeft="10dp"
Android:paddingRight="10dp">
<ImageButton
Android:id="@+id/btn_sil"
Android:layout_width="45dp"
Android:layout_height="45dp"
Android:gravity="center"
Android:src="@drawable/delete"
Android:background="@color/white"
Android:paddingRight="10dp"
Android:paddingLeft="10dp"
Android:paddingTop="0dp"
Android:paddingBottom="15dp"
/>
<EditText
Android:gravity="center"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:id="@+id/et_Word"
Android:ems="12"
Android:background="@Android:color/transparent"/>
<ImageButton
Android:id="@+id/btn_getir"
Android:layout_width="45dp"
Android:layout_height="45dp"
Android:gravity="center"
Android:src="@drawable/search"
Android:background="@color/white"
Android:paddingRight="10dp"
Android:paddingLeft="10dp"
Android:paddingTop="0dp"
Android:paddingBottom="15dp"
/>
</LinearLayout>
<ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="fill_parent"
Android:fillViewport="true"
Android:layout_below="@+id/topLayout"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
</Android.support.design.widget.CoordinatorLayout>
</Android.support.v4.widget.DrawerLayout>
En fait, cette conception semble être fausse. Pourquoi? laissez-moi vous expliquer cela.
Sauf ceux xmlns:Android="http://schemas.Android.com/apk/res/Android" dont il n'était pas nécessaire ou utilisant: Android:layout_alignParentTop="true" dans le LinearLayout ou en utilisant ce ScrollView sous le contenu ou etc, il semble que vous n'ayez aucune idée de ce qui se passe (pas de problème).
Remarque: la chose la plus importante était d'ajouter:
app:layout_behavior="@string/appbar_scrolling_view_behavior" qui a également mentionné ici:
http://guides.codepath.com/Android/Handling-Scrolls-with-CoordinatorLayout
Et ce drapeau devrait cacher cette section: (exitUntilCollapsed)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
exitUntilCollapsed:Lorsque l'indicateur de défilement est défini, le défilement vers le bas entraînera normalement le déplacement de tout le contenu.
Alors enfin: http://i.stack.imgur.com/qf1So.gif
J'espère que c'est ce que vous cherchiez, si ce n'est pas le cas, veuillez modifier votre question et ajouter des captures d'écran.
N'hésitez pas à modifier les indicateurs ou à en ajouter un nouveau pour obtenir exactement ce dont vous avez besoin.
MISE À JOUR:
Si vous souhaitez masquer ce Toolbar (section rouge) après la réduction, utilisez simplement ceci dans le CollapsingToolbarLayout:
app:layout_scrollFlags="scroll|snap"
Enfin, vous obtiendrez le même résultat (quelque chose comme la conception googleplay).
Codes:
<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">
<Android.support.design.widget.CoordinatorLayout
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<Android.support.v4.widget.NestedScrollView
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="center"
Android:scrollbarSize="15sp"
Android:text="You Contents" />
</Android.support.v4.widget.NestedScrollView>
<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.CollapsingToolbarLayout
Android:id="@+id/collapsingtoolbarly"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap">
<Android.support.v7.widget.Toolbar
Android:id="@+id/my_toolbar"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
Android:elevation="4dp"
Android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<ImageView
Android:layout_width="match_parent"
Android:layout_height="190dp"
Android:minHeight="190dp"
Android:scaleType="fitXY"
Android:src="@drawable/header"
app:layout_collapseMode="parallax" />
</Android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
Android:id="@+id/mylin"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:orientation="vertical">
<View
Android:layout_width="fill_parent"
Android:layout_height="30dp" />
<LinearLayout
Android:id="@+id/topLayout"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:orientation="horizontal">
<ImageButton
Android:id="@+id/btn_sil"
Android:layout_width="45dp"
Android:layout_height="45dp"
Android:background="@drawable/ic_arrow_drop_up_black_24dp"
Android:gravity="center"
Android:paddingBottom="15dp"
Android:paddingLeft="10dp"
Android:paddingRight="10dp"
Android:paddingTop="0dp" />
<EditText
Android:id="@+id/et_Word"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:background="@Android:color/transparent"
Android:ems="12"
Android:gravity="center" />
<ImageButton
Android:id="@+id/btn_getir"
Android:layout_width="45dp"
Android:layout_height="45dp"
Android:background="@drawable/ic_arrow_drop_up_black_24dp"
Android:gravity="center"
Android:paddingBottom="15dp"
Android:paddingLeft="10dp"
Android:paddingRight="10dp"
Android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
</Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <Android.support.design.widget.NavigationView
Android:id="@+id/nav_view"
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:layout_gravity="start"
app:headerLayout="@layout/app_header"
app:insetForeground="@color/app_color_primary_dark"
app:menu="@menu/navigation_menu" /> -->
</Android.support.v4.widget.DrawerLayout>
Résultats: après l'effondrement, le texte recherché ne se cache pas:
MISE À JOUR: Nouvelle façon :)
<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">
<Android.support.design.widget.CoordinatorLayout
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<LinearLayout
Android:id="@+id/mylin"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<View
Android:layout_width="fill_parent"
Android:layout_height="30dp" />
<LinearLayout
Android:id="@+id/topLayout"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:orientation="horizontal">
<ImageButton
Android:id="@+id/btn_sil"
Android:layout_width="45dp"
Android:layout_height="45dp"
Android:background="@drawable/ic_arrow_drop_up_black_24dp"
Android:gravity="center"
Android:paddingBottom="15dp"
Android:paddingLeft="10dp"
Android:paddingRight="10dp"
Android:paddingTop="0dp" />
<EditText
Android:id="@+id/et_Word"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:background="@Android:color/transparent"
Android:ems="12"
Android:gravity="center" />
<ImageButton
Android:id="@+id/btn_getir"
Android:layout_width="45dp"
Android:layout_height="45dp"
Android:background="@drawable/ic_arrow_drop_up_black_24dp"
Android:gravity="center"
Android:paddingBottom="15dp"
Android:paddingLeft="10dp"
Android:paddingRight="10dp"
Android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
<Android.support.v4.widget.NestedScrollView
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="center"
Android:scrollbarSize="15sp"
Android:text="You Contents" />
</Android.support.v4.widget.NestedScrollView>
<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.v7.widget.Toolbar
Android:id="@+id/my_toolbar"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
Android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways"
Android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <Android.support.design.widget.NavigationView
Android:id="@+id/nav_view"
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:layout_gravity="start"
app:headerLayout="@layout/app_header"
app:insetForeground="@color/app_color_primary_dark"
app:menu="@menu/navigation_menu" /> -->
</Android.support.v4.widget.DrawerLayout>
Résultats:
J'espère que cet article vous aidera: https://guides.codepath.com/Android/Handling-Scrolls-with-CoordinatorLayout
Essayez d'utiliser CoordinatorLayout et CollapsingToolbar.
<Android.support.design.widget.CollapsingToolbarLayout
Android:id="@+id/collapsing_toolbar"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
</Android.support.v7.widget.Toolbar>
</Android.support.design.widget.CollapsingToolbarLayout>
vérifiez cela, vous devez définir un indicateur pour cela dans CoordinatorLayout et CollapsingToolbar,
<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<Android.support.v4.widget.NestedScrollView
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</Android.support.v4.widget.NestedScrollView>
<Android.support.design.widget.AppBarLayout
Android:layout_height="wrap_content"
Android:layout_width="match_parent">
<Android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways"/>
<Android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways"/>
</Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>
http://developer.Android.com/reference/Android/support/design/widget/AppBarLayout.html
Dans le Drawer.Layout ajouter à Android:fitsSystemWindows="true".
<Android.support.v4.widget.DrawerLayout Android:id="@+id/drawer_layout"
.../...
// add in
Android:fitsSystemWindows="true">
Il vaut mieux séparer vos préoccupations. En utilisant l'exemple fourni par chrisbanes/cheesesquare , votre mise en page serait mieux comme ceci:
<Android.support.v4.widget.DrawerLayout Android:id="@+id/drawer_layout"
.../...
// add in
Android:fitsSystemWindows="true">
<Android.support.design.widget.CoordinatorLayout .../...>
<Android.support.design.widget.AppBarLayout .../...>
<Android.support.v7.widget.Toolbar
// Why are you using two themes?
// Android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>
</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>
</Android.support.v4.widget.DrawerLayout>
Remplacez ceci:
<LinearLayout .../...>
<View .../...>
</View>
<LinearLayout .../...>
<ImageButton
.../...
/>
</LinearLayout>
<ScrollView .../...>
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
Avec
<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"/>
Et puis utilisez le ViewPager pour remplir votre liste.
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
if (viewPager != null) {
setupViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new CheeseListFragment(), "Category 1");
adapter.addFragment(new CheeseListFragment(), "Category 2");
adapter.addFragment(new CheeseListFragment(), "Category 3");
viewPager.setAdapter(adapter);
}
Ensuite, vous pouvez formater ce CheeseListFragment pour ajouter vos vues d'image individuellement.
Il est également inutile de continuer à déclarer votre schéma:
xmlns:app="http://schemas.Android.com/apk/res-auto"
Ceci indique que vous copiez et collez du code et que vous ne le comprenez pas.
Vous devez également utiliser un nestedScrollView sans la vue et une disposition linéaire au-dessus. Attention, ce n'est pas clair ce que vous essayez de réaliser avec ça.
Vous devez structurer votre mise en page comme ceci:
<Android.support.design.widget.CoordinatorLayout >
<Android.support.design.widget.AppBarLayout >
<Android.support.design.widget.CollapsingToolbarLayout >
<ImageView />
<Android.support.v7.widget.Toolbar />
</Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
<!-- Your scrollable content here -->
</Android.support.design.widget.CoordinatorLayout>
Tutoriel complet sur: http://blog.grafixartist.com/toolbar-animation-with-Android-design-support-library/
Pour masquer la barre d'outils, utilisez le code ci-dessous.
toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();
Essayez ce code: utilisez layout_scrollFlags comme ci-dessous:
app: layout_scrollFlags = "scroll | enterAlways"
et votre fichier XML change comme ci-dessous:
<?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"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context="MainActivity">
<Android.support.design.widget.AppBarLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:theme="@style/AppTheme.AppBarOverlay">
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
Android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
<Android.support.design.widget.TabLayout
Android:id="@+id/tabs"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</Android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
</Android.support.design.widget.CoordinatorLayout>
c'est le fichier XML content_main
<Android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">
</LinearLayout>
</Android.support.v4.widget.NestedScrollView>