向上滚动内容时如何隐藏工具栏？

Question

当我滚动带有内容的文本和图像时，我试图隐藏我的工具栏。这里我使用 scrollView 来获取滚动内容。当我向上滚动内容时，如何隐藏工具栏？

这是我的 XMl 代码：

content_main.XML:

<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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<LinearLayout
    android:paddingTop="?android:attr/actionBarSize"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:id="@+id/textone"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="23dp"
        android:textStyle="bold"
        android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "/>

    <ImageView
        android:id="@+id/imge"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:src="@drawable/imag_bg"/>


    <TextView
        android:id="@+id/texttwo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="Pretty good, the Toolbar is moving along with the list and getting back just as we expect it to. This is thanks to the restrictions that we put on the mToolbarOffset variable.
        If we would omit checking if it’s bigger than 0 and lower than mToolbarHeight then when
        we would scroll
         up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing.



          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing
        It works pretty well, but this is not what we want. It feels weird that you can
        stop it in the middle of
        the

         scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
         Games app
        which I consider as a bug

        It works pretty well, but this is not what we want. It feels weird that you can
        stop it in the middle of
        the
         scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
         Games app
        which I consider as a bug
        It works pretty well, but this is not what we want. It feels weird that you can
        stop it in the middle of
        the
         scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
         Games app
        which I consider as a bug."/>




</LinearLayout>

<View
    android:layout_width="wrap_content"
    android:layout_height="30dp" />
<LinearLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
         android:text="hai"
         android:layout_width="160dp"
         android:layout_height="match_parent" />
    <Button
         android:text="hello"
         android:layout_width="160dp"
         android:layout_height="match_parent" />


</LinearLayout>

activity_main.XML

<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent" 
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar"
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" 
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

Answer 1

这是在您的应用中使用 CoordinatorLayout 的最佳方案。 CoordinatorLayout 是一个功能强大的 FrameLayout，它的袖子上有很多漂亮的动画技巧。

The Design library introduces CoordinatorLayout, a layout which provides an additional level of control over touch events between child views, something which many of the components in the Design library take advantage of.

您可以从 this and this 教程开始。

Answer 2

将 activity_main.xml 包裹在协调器布局中，使其成为其父布局。

<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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent" 
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar"
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary" 
    app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />



</android.support.design.widget.CoordinatorLayout>

Answer 3

您必须在两个布局中做很多更改。首先在 activity_main.XML 中使用 CoordinatorLayout，如下所示（根据您的要求更改主题）。

<?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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

在 content_main.XML 中使用 android.support.v4.widget.NestedScrollView 而不是 ScrollView。

也可以在 android.support.v4.widget.NestedScrollView 中使用 app:layout_behavior="@string/appbar_scrolling_view_behavior"，如下所示。

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

            <TextView
                android:id="@+id/textone"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "
                android:textSize="25dp"
                android:textStyle="bold" />

            /// Add your other code here

            </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

Answer 4

您可以从这里找到我对您的问题的解决方案： Android Toolbar + Tab Layout + Drawer, Hide toolbar when scrolling and take TabLayout to the top

这是一个有效的解决方案，但它不是实现此动画的最佳方式。使用 CoordiantorLayout 您可以关联您的视图及其滚动行为。

您可以从这里找到更多信息：https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

当我有时间时，我会尝试 post 为您编写一个代码示例。

Answer 5

只需将标志设置为喜欢 app:layout_scrollFlags="scroll|enterAlways"

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:titleTextColor="#FFFFFF"
    app:layout_scrollFlags="scroll|enterAlways"   
    />

向上滚动内容时如何隐藏工具栏？

How to hide ToolBar when I scrolling content up?

android

android-support-library

android-toolbar

android-support-design