web-dev-qa-db-ja.com

AppBarLayoutでスクロールビューを重ねる

this video のような Material design scrolling technique からの「重複するコンテンツを持つフレキシブルスペース」パターンを実装したい Flexible Space with overlapping content GIF

私の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="192dp"
      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:layout_height="?attr/actionBarSize"
          Android:layout_width="match_parent"
          app:layout_collapseMode="pin"/>
    </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"
      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>
</Android.support.design.widget.CoordinatorLayout>

デザインライブラリを使用してこれを達成する簡単な方法はありますか？または、これを行うためにカスタム CoordinatorLayout.Behavior を構築する必要がありますか？

androidandroid-design-libraryandroid-collapsingtoolbarlayout
88
ianhanniballake

実際、スクロールビューをAppBarLayoutでオーバーレイすることは、 Android Design Support Library に含まれる機能です：NestedScrollView（または使用する任意のビューでapp:behavior_overlapTop属性を使用できます ScrollingViewBehavior ）オーバーラップ量を設定するには：

<Android.support.v4.widget.NestedScrollView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:behavior_overlapTop="64dp">

app:behavior_overlapTopは、属性を使用している動作であるため、app:layout_behavior="@string/appbar_scrolling_view_behavior"を持つビューでのみ機能することに注意してください（通常、属性が適用されるビューまたは親ViewGroupではありません）。したがって、behavior_プレフィックス。

または、プログラムで setOverlayTop（） を使用して設定します。

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels
127
ianhanniballake

承認された回答 に加えて、CollapsingToolbarLayoutでsetTitleEnabled（false）を呼び出して、例のようにタイトルを上部に固定したままにします。

このような：

CollapsingToolbarLayout.setTitleEnabled(false);

または、次のようにxmlに追加します。

app:titleEnabled="false"

そうしないと、当然のことながら、タイトルが必要な動作でない限り、タイトルが重複するコンテンツの後ろに消えることがあります。

19
G.deWit