web-dev-qa-db-ja.com

AppBarの折りたたみ/展開時にツールバーを上部に固定する方法は？

概要

Scrolling Techniques 、Material Designで説明されている、コンテンツが重複する柔軟なスペースのいずれかを実装しようとしています。

コンテンツが重複する柔軟なスペース

コンテンツはアプリバーに重ねることができます。

動作：

アプリバーの開始位置は、コンテンツの背後に配置する必要があります。上方向にスクロールすると、コンテンツがオーバーラップしなくなるまで、アプリバーはコンテンツよりも速くスクロールするはずです。所定の位置に固定されると、アプリバーが持ち上がり、コンテンツが下にスクロールできるようになります。

https://www.google.co.in/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling

問題

ただし、問題は、AppBarのタイトルが展開されると下にスクロールし、重複するコンテンツの下に隠れることです。

ここで、ツールバーは重複するCardViewの下に隠れています。 When appbar expanded

アプリバーが折りたたまれると、ツールバー、したがってタイトルが下から上にスライドします。 When collapsed

コード

これが私のコードです：

activity-main.xml

<Android.support.design.widget.CoordinatorLayout 
    ...
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <Android.support.design.widget.CollapsingToolbarLayout
            ...
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:layout_gravity="top"
                Android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        ...

MainActivityのonCreate関数にもこれらを追加しました

    setSupportActionBar(toolbar);

    collapsingToolbarLayout.setTitle("App Name");

ツールバー（タイルと他のコンテンツ、後で追加します）を、アプリバーが展開または折りたたまれているかどうかに関係なく、一番上に留まるようにします。

私はドキュメントを読み、多くの投稿やチュートリアルを読み、多くのビデオを見ましたが、実用的なソリューションまたは関連するソリューションを見つけることができませんでした。

誰かがこれを修正する方法について何らかのアイデアを持っているなら、提案してください。手伝ってくれてありがとう。

androidmaterial-designandroid-appbarlayout
24
Abhishek

同様の問題レポートのコメントで答えを見つけたとき、自分で解決策を探していました。

基本的に、CollapsingToolbarLayoutでsetTitleEnabled()を次のように呼び出します。

CollapsingToolbarLayout.setTitleEnabled(false);

これをCollapsingToolbarLayoutに追加することにより、xmlでも同様に行うことができます。

app:titleEnabled="false"

falseに設定することにより、希望する動作が得られます。タイトルは画面の上部に固定されたままです。

Toolbar自体は実際には既に最上位にありましたが、これにより、CollapsingToolbarLayoutの最下部とToolbarの間を変換するのではなく、タイトルがそこに留まります。

62
G.deWit

Toolbarタグ内に以下のコードを追加することでこれを達成しました。

app:layout_collapseMode="pin"
4
SriMaharshi Manchem

私の場合、app:titleEnabled="false"をCollapsingToolbarLayoutに追加する必要がありました[〜＃〜] and [〜＃〜]app:layout_collapseMode="pin"をAndroid.support.v7.widget.Toolbarに追加しました

これで、ユーザーが上下にスクロールするかどうかに関係なく、ツールバーは画面上部に固定されたままになります。

3
CHarris

タイトルを一番上に保つため、この属性をCollapsingToolbarLayoutに追加するだけです：

app:expandedTitleGravity="top"
0
Francis