CollapsingToolbarLayoutおよびスクロール中のツールバーの非表示

Question

CoordinatorLayoutとCollapsingToolbarLayoutを使用して、組み合わせたレイアウトを作成しようとしています。

最初の状態では、一番上のページで、まだスクロールしていなかったので、ツールバーを次のように使います（はい、できました）：

2番目の状態では、下にスクロールし始めると、以下に示すように画像とツールバーが消えます（タブのみが表示されます）。

そして、最後の状態では、リストのある時点（リストの最上部ではない）でスクロールアップを開始し、スクロールアップを開始したら、ツールバー（および画像を使用したものではなく）に次に示すように、whowingを開始します（リストの最上部に到達しなかった場合、画像は表示されず、ツールバーのみが表示されます）。

最初の状態を達成できましたが、他の2つの状態には問題があります。ツールバーがCollapsingToolbarLayout内に実装されると、CollapsingToolbarLayoutコンポーネントの外側でそれを使用して実行できる柔軟性は明確ではありません。ツールバーを非表示にすることはできません。非表示にすると、最上部に到達したときにのみ表示されます。

とにかく、現在のXML（下に表示）は、最初の画像が実装された状態ですが、下にスクロールし始めると、ツールバーは上部にとどまり、非表示になりません。注：ツールバーに「ピン」を維持するように指示する必要があります。そうしないと、ツールバー内の情報が消え、空のツールバーのみが表示されます（別の投稿の場合ですが、なぜこれが起こるのかを知るのは興味深いですか？） 。

ここに私の現在のxmlがあります：

    <Android.support.design.widget.CoordinatorLayout
    Android:id="@+id/benefit_coordinator_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/app_bar_material_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/main.collapsing"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <include
                Android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                Android:layout_height="192dp"
                Android:layout_width="match_parent"
                app:layout_collapseMode="parallax"

                />

            <include
                Android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"

                />

        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/benefit_tab_layout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@Android:color/white"
            app:tabTextColor="@Android:color/black"
            app:tabIndicatorHeight="4dp" />

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/benefit_pager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|right"
        Android:layout_margin="16dp"
        />
</Android.support.design.widget.CoordinatorLayou

Answer 1

問題を修正しました。わかりやすくするために、ツールバーが最上部に到達したらパラレックス画像で拡大できるようにしたかったのですが、下にスクロールするとツールバーが消えて、再び表示されるようになりました（パラレックス画像なしで） ）上にスクロールしたら。パラレックス画像効果は、一番上に到達した場合にのみ表示されます。

したがって、基本的に解決策は、次の属性を使用してコンポーネントCollapsingToolbarLayoutを変更します。

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

また、次の属性を持つツールバーコンポーネントを変更します

Android:minHeight="?attr/actionBarSize"

私のパラレックス効果画像（私のtoolbar_search_container）については、layout_scrollFlagsを追加しないでください。

それで、なぜそれは機能していますか？これを理解するには、enterAlwaysCollapsedとは何かを知る必要があります。enterAlwaysCollapsedは、minHeight属性を追加したビューに影響を与えます。これは、CollapsingToolbarLayoutを持つminHeightのすべての子がこの属性の影響を受けることを意味します。だから私のツールバーは影響を受けます。

簡単な言葉でのenterAlwaysCollapsed属性の定義：

enterAlwaysが宣言され、minHeightを指定している場合、enterAlwaysCollapsedを指定することもできます。この設定を使用すると、ビューはこの最小の高さでのみ表示されます。ビューは最大の高さまで拡大します... "

さて、これはまさに私たちが望むものではありませんか？ （この反論的な質問には答えないでください;））

もう1つ追加するのは、視差コンポーネント（toolbar_search_container）がツールバーの拡張に依存していることです。ツールバーは上部に到達したときにのみ拡張するため、すべてうまく機能しています。

新しいコードは次のとおりです。

<Android.support.design.widget.CoordinatorLayout
    Android:id="@+id/benefit_coordinator_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/app_bar_material_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/main.collapsing"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            >

            <include
                Android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                Android:layout_height="192dp"
                Android:layout_width="match_parent"
                app:layout_collapseMode="parallax"
                />

            <include
                Android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:minHeight="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                Android:fitsSystemWindows="true"
                />

        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/benefit_tab_layout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@Android:color/white"
            app:tabTextColor="@Android:color/black"
            app:tabIndicatorHeight="4dp" />

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/benefit_pager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|right"
        Android:layout_margin="16dp"
        />
</Android.support.design.widget.CoordinatorLayout>