重叠滚动视图AppBarLayout视图、AppBarLayout

2023-09-13 02:24:22 作者:柠檬味少女

我要实现的灵活空间重叠的内容从材质设计,滚动技术的,这样的模式在this影片:

I want to implement the 'Flexible Space with overlapping content' pattern from the Material design scrolling techniques, such as in this video:

我的XML布局,现在看起来像:

My XML layout right now looks like:

<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要做到这一点?

推荐答案

其实,覆盖在滚动视图与AppBarLayout是的 Android的设计支持库:您可以使用应用程序:在你的 NestedScrollView (或使用任何浏览ScrollingViewBehavior)设定重叠量:

In fact, overlaying the scrolling view with the AppBarLayout is an included feature of the Android Design Support Library: you can use the app:behavior_overlapTop attribute on your NestedScrollView (or any View using ScrollingViewBehavior) to set the overlap amount:

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

注意应用:behavior_overlapTop 只适用于具有应用程序的观点:layout_behavior =@字符串/ appbar_scrolling_view_behavior,因为它是使用属性(不是视图或父ViewGroup中,作为属性通常适用)的行为,因此,行为_ preFIX。

Note that app:behavior_overlapTop only works on views that have the app:layout_behavior="@string/appbar_scrolling_view_behavior" as it is the Behavior that is using the attribute (not the View or the Parent ViewGroup, as attributes usually apply to), hence the behavior_ prefix.

,或通过setOverlayTop():

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