IT story

AppBarLayout으로 스크롤링보기 겹침

hot-time 2020. 9. 7. 21:28
반응형

AppBarLayout으로 스크롤링보기 겹침


이 비디오 에서와 같이 머티리얼 디자인 스크롤 기술 에서 '겹치는 콘텐츠가있는 유연한 공간'패턴을 구현하고 싶습니다 .콘텐츠가 겹치는 유연한 공간 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구축 해야합니까?


실제로 AppBarLayout으로 스크롤링 뷰를 오버레이하는 것은 Android 디자인 지원 라이브러리에 포함 된 기능입니다. (또는 ScrollingViewBehavior를 사용하는 모든 뷰) app:behavior_overlapTop속성을 NestedScrollView사용 하여 오버랩 양을 설정할 수 있습니다.

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

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.

Or set it programmatically via setOverlayTop():

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

In addition to the accepted answer, call setTitleEnabled(false) on your CollapsingToolbarLayout to make the title stay fixed at the top as in the example.

Like this:

CollapsingToolbarLayout.setTitleEnabled(false);

or by adding it in xml like this:

app:titleEnabled="false"

Otherwise the title could disappear behind the overlapping content, unless of course, that's the behaviour you want.

참고URL : https://stackoverflow.com/questions/31039074/overlap-scrolling-view-with-appbarlayout

반응형