AppBarLayoutによるオーバーラップスクロールビュー


102

このビデオのように、マテリアルデザインのスクロールテクニックから「コンテンツが重複しているフレキシブルスペース」パターンを実装したいと思います。 コンテンツ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を構築する必要がありますか?


私は反対を探しています、CollapsingToolbarLayout内の画像は、ツールバーの後で、NestedScrollViewの下に別の色で数dps表示するはずです!
David

私はFrameLayout、RelativeLayoutを使用していましたが、常にフラグメントはactionBarと重複していました。すべてのフラグメントの親としてNestedScrollViewを使用することが解決策でした。ありがとう!
JCarlosR 2018年

回答:


147

実際には、AppBarLayoutとスクロールビューを重ねることの含まれる特徴であるAndroidのデザインサポートライブラリ:あなたが使用することができapp:behavior_overlapTop、あなたの上の属性をNestedScrollView(または使用して、任意のビュー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"behavior_

または、setOverlayTop()使用してプログラムで設定します。

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

1
RecyclerView(layout_behaviorおよびを設定したbehavior_overlapTop)が兄弟のAppBarLayoutの後ろに配置されることを除いて、これはほとんど私にとっては機能しています。XMLで順序を切り替えてみましたが、効果がないようです。問題となる可能性のあるアイデアはありますか?
Vicky Chijwani

1
スクロールを無効にすると(app:layout_scrollFlags属性が削除されます)、behavior_overlapTopが機能しません-NestedScrollViewがAppBarLayoutの下に入ります。これを修正する方法を知っていますか?
Pavel Biryukov、2015

@PavelBiryukov API <21に対して何をしましたか?
Vicky Chijwani

1
こんにちは、私にはうまくいきません。受け取りますerror no resource identifier found for attribute behavior_overlayTop
Jack Lynx

1
@Lynx-紛らわしいことに、それはそうbehavior_overlapTopですsetOverlayTop()-オーバーラップとオーバーレイ。正しいものを使用していることを確認してください!
ianhanniballake 2016年

20

受け入れられた回答に加えて、CollapsingToolbarLayoutでsetTitleEnabled(false)を呼び出して、例のようにタイトルを上部に固定したままにします。

このような:

CollapsingToolbarLayout.setTitleEnabled(false);

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

app:titleEnabled="false"

それ以外の場合、タイトルが重複するコンテンツの背後に表示されなくなる可能性があります。


2
十分な大きさのexpandedTitleMarginBottomをCollapsingToolbarLayoutに配置して、展開されたときにタイトルが重複しないようにすることができます。
WindRider 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.