向下滚动时隐藏 AppBar [英] Hide AppBar when scrolling down
本文介绍了向下滚动时隐藏 AppBar的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的布局中有一个 AppBar 和一个水平线性布局(包括一个编辑文本和两个图像按钮)和其他东西.当用户向下滚动时，我想要 AppBar(实际上，Toolbar 隐藏.这是我尝试过的，应用栏没有隐藏它只是停留在那里.我遵循了
当用户滚动时，我希望 AppBar/Toolbar 消失，并且包含编辑文本的水平布局替换应用栏并留在那里.
你能告诉我我做错了什么吗?
<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.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.v7.widget.Toolbarandroid:id="@+id/my_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"机器人:海拔=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"机器人:方向=垂直"app:layout_behavior="@string/appbar_scrolling_view_behavior"工具:showIn="@layout/activity_show" 工具:context="com.example.bimpc1.sozluk.GosterActivity"机器人:背景=@颜色/白色"android:id="@+id/mylin"><查看android:layout_width="fill_parent"android:layout_height="30dp"></查看><线性布局android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:方向=水平"android:id="@+id/topLayout"android:layout_alignParentTop="true"机器人:paddingLeft =10dp"android:paddingRight="10dp"><图像按钮android:id="@+id/btn_sil"android:layout_width="45dp"android:layout_height="45dp"机器人:重力=中心"android:src="@drawable/删除"机器人:背景=@颜色/白色"机器人:paddingRight="10dp"机器人:paddingLeft =10dp"android:paddingTop="0dp"机器人:paddingBottom =15dp"/><编辑文本机器人:重力=中心"android:layout_width="fill_parent"android:layout_height="wrap_content"android:id="@+id/et_word"机器人:ems =12"android:background="@android:color/transparent"/><图像按钮android:id="@+id/btn_getir"android:layout_width="45dp"android:layout_height="45dp"机器人:重力=中心"android:src="@drawable/搜索"机器人:背景=@颜色/白色"机器人:paddingRight="10dp"机器人:paddingLeft =10dp"android:paddingTop="0dp"机器人:paddingBottom =15dp"/></LinearLayout><ScrollView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="fill_parent"机器人:fillViewport =真"android:layout_below="@+id/topLayout"xmlns:app="http://schemas.android.com/apk/res-auto"><!--scrollview 中的许多视图..... --></ScrollView></LinearLayout></android.support.design.widget.CoordinatorLayout></android.support.v4.widget.DrawerLayout> 解决方案
其实那个设计好像是错的.为什么?让我向你解释一下.
除了那些不需要或使用的 xmlns:android="http://schemas.android.com/apk/res/android":android:layout_alignParentTop="true" 在 LinearLayout 或在内容等下使用 ScrollView ，似乎你不知道发生了什么.(没问题).
注意:最重要的是，添加:
app:layout_behavior="@string/appbar_scrolling_view_behavior" 这里也提到了:
更新:新方法:)
<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.CoordinatorLayoutandroid:id="@+id/main_content"android:layout_width="match_parent"android:layout_height="match_parent"><线性布局android:id="@+id/mylin"android:layout_width="match_parent"android:layout_height="wrap_content"机器人:方向=垂直"app:layout_behavior="@string/appbar_scrolling_view_behavior"><查看android:layout_width="fill_parent"android:layout_height="30dp"/><线性布局android:id="@+id/topLayout"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:方向=水平"><图像按钮android:id="@+id/btn_sil"android:layout_width="45dp"android:layout_height="45dp"android:background="@drawable/ic_arrow_drop_up_black_24dp"机器人:重力=中心"机器人:paddingBottom =15dp"机器人:paddingLeft =10dp"机器人:paddingRight="10dp"android:paddingTop="0dp"/><编辑文本android:id="@+id/et_word"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="@android:color/transparent"机器人:ems =12"机器人:重力=中心"/><图像按钮android:id="@+id/btn_getir"android:layout_width="45dp"android:layout_height="45dp"android:background="@drawable/ic_arrow_drop_up_black_24dp"机器人:重力=中心"机器人:paddingBottom =15dp"机器人:paddingLeft =10dp"机器人:paddingRight="10dp"android:paddingTop="0dp"/></LinearLayout></LinearLayout><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><!-- 您的 Scrollable 内容应该在这里 - 例如，ViewPager 等 --><文本视图android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:scrollbarSize="15sp"android:text="你的内容"/></android.support.v4.widget.NestedScrollView><android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.v7.widget.Toolbarandroid:id="@+id/my_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"机器人:海拔=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><!-- 最后，NavigationView --><!-- <android.support.design.widget.NavigationViewandroid:id="@+id/nav_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="开始"app:headerLayout="@layout/app_header"应用程序:insetForeground="@color/app_color_primary_dark"app:menu="@menu/navigation_menu"/>--></android.support.v4.widget.DrawerLayout>结果:
I have an AppBar and a horizontal linearlayout (which includes an edit text and two imagebuttons) and other things in my layout. When user scrolls down, I want AppBar(actually, the Toolbar to hide. This is what I have tried, the appbar isn't hiding it just stays there. I followed the Chris Banes Cheesesquare Sample.
Here is the screenshot of my app:
When user scrolls, I want that AppBar/Toolbar to disappear, and that horizontal layout, which includes the edittext, replace the appbar and stayed there.
Can you tell me what I am doing wrong?
<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>
解决方案
Actually, that design seems to be wrong.Why? let me explain that to you.
Except those xmlns:android="http://schemas.android.com/apk/res/android" which it wasn't necessary or using: android:layout_alignParentTop="true" in the LinearLayout or using that ScrollView under the contents or etc, seems like you don't have any idea what's going on.(no problem).
Note: the most important thing was, adding:
app:layout_behavior="@string/appbar_scrolling_view_behavior" which also mentioned here:
http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
And this flag should hide that section:(exitUntilCollapsed)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
exitUntilCollapsed:When the scroll flag is set, scrolling down will normally cause the entire content to move.
So finally: http://i.stack.imgur.com/qf1So.gif
Hope this is what you were looking for, if it wasn't please edit your question and add some screenshots.
Feel free to change the flags or add a new to achieve what you exactly need.
UPDATE:
If you want to hide that Toolbar(red section) after collapsing, just use this in the CollapsingToolbarLayout:
app:layout_scrollFlags="scroll|snap"
Finally, you will get the same result(something like googleplay design).
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>
Results: after collapsing, the searchedittext won't hide:
UPDATE: New way :)
<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>
Results:
这篇关于向下滚动时隐藏 AppBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
