下にスクロールするときにAppBarを非表示にする

Question

レイアウトにはAppBarと水平linearlayout（編集テキストと2つの画像ボタンを含む）などがあります。ユーザーが下にスクロールすると、AppBar（実際には、Toolbarを非表示にしたい。これが私が試したことです、アプリバーが隠れているだけではなく、そこにとどまります Chris Banes Cheesesquare Sample に従いました。

これが私のアプリのスクリーンショットです：

ユーザーがスクロールするときに、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.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>

Answer 1

実際、そのデザインは間違っているようです。それをあなたに説明させてください。

それらを除くxmlns:Android="http://schemas.Android.com/apk/res/Android"必要なかった、または使用していなかったもの：Android:layout_alignParentTop="true"でLinearLayoutを使用するか、そのScrollViewをコンテンツなどで使用すると、何が起こっているのかわからないようです（問題ありません）。

注：最も重要なことは、次を追加することでした：

app:layout_behavior="@string/appbar_scrolling_view_behavior"ここでも言及しました：

http://guides.codepath.com/Android/Handling-Scrolls-with-CoordinatorLayout

そして、このフラグはそのセクションを非表示にする必要があります：（exitUntilCollapsed）

app:layout_scrollFlags="scroll|exitUntilCollapsed"

exitUntilCollapsed:スクロールフラグが設定されている場合、通常、下にスクロールするとコンテンツ全体が移動します。

最後に： http://i.stack.imgur.com/qf1So.gif

質問を編集してスクリーンショットを追加してください。

フラグを変更したり、新しいものを追加して、必要なものを実現してください。

---

UPDATE：

折りたたみ後にToolbar（赤いセクション）を非表示にするには、CollapsingToolbarLayoutでこれを使用します。

app:layout_scrollFlags="scroll|snap"

最後に、同じ結果（googleplayデザインのようなもの）が得られます。

コード：

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

結果：折りたたみ後、searchedittextは非表示になりません：

UPDATE：新しい方法:)

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

結果：

Answer 2

この記事がお役に立てば幸いです。 https://guides.codepath.com/Android/Handling-Scrolls-with-CoordinatorLayout

CoordinatorLayoutと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>

Answer 3

これを確認するには、CoordinatorLayoutおよび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

Answer 4

の中に Drawer.Layout 加える Android:fitsSystemWindows="true"。

<Android.support.v4.widget.DrawerLayout Android:id="@+id/drawer_layout"
    .../...
    // add in
    Android:fitsSystemWindows="true">

あなたの懸念を分離する方が良いです。 chrisbanes/cheesesquare で提供されるサンプルを使用すると、レイアウトは次のようになります。

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

これを置き換えます：

    <LinearLayout .../...>
    <View .../...>
    </View>
    <LinearLayout .../...>
        <ImageButton
            .../...
            />
    </LinearLayout>
    <ScrollView .../...>
    <!--many views inside scrollview..... -->
    </ScrollView>
    </LinearLayout>

と

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

次に、ViewPagerを使用してリストを作成します。

 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);
}

次に、このCheeseListFragmentをフォーマットして、画像ビューを個別に追加できます。

スキーマを宣言し続ける必要もありません。

xmlns:app="http://schemas.Android.com/apk/res-auto"

これは、コードをコピーして貼り付けているだけで、理解していないことを示しています。

また、ビューなしでnestedScrollViewを使用し、その上に線形レイアウトを使用する必要があります。気をつけて、あなたがそれで達成しようとしていることは明らかではありません。

Answer 5

次のようにレイアウトを構成する必要があります。

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

完全なチュートリアル： http://blog.grafixartist.com/toolbar-animation-with-Android-design-support-library/

Answer 6

ツールバーを非表示にするには、以下のコードを使用します。

toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();

Answer 7

このコードを試してください：以下のようにlayout_scrollFlagsを使用してください：

app：layout_scrollFlags = "scroll | enterAlways"

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

これは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:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">


</LinearLayout>

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