Cách ẩn thanh công cụ sau khi thu gọn trong khi recyclerView cuộn xuống

Question

Cách ẩn thanh công cụ sau khi thu gọn trong khi recyclerXem cuộn xuống, hiển thị thanh công cụ khi recyclerView cuộn lên và mở rộng CollapsingToolbarLayout ở cuối danh sách? Bây giờ CollapsingToolbarLayout chỉ thu gọn và thanh công cụ hiển thị mọi lúc khi cuộn.

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/coordinatorlayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".screens.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbarlayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      android:minHeight="@dimen/actionBarHeight" 
      app:contentScrim="@color/colorPrimary" 
      app:expandedTitleTextAppearance="@style/TransparentText" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <ImageView 
       android:id="@+id/toolbar_image" 
       android:layout_width="match_parent" 
       android:layout_height="180dp" 
       android:adjustViewBounds="true" 
       android:background="#229944" 
       android:contentDescription="@null" 
       android:scaleType="fitCenter"/> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="@dimen/actionBarHeight" 
       android:minHeight="@dimen/actionBarHeight" 
       app:layout_collapseMode="pin" 
       app:layout_scrollFlags="scroll|enterAlwaysCollapsed" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

     </android.support.design.widget.CollapsingToolbarLayout> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_gravity="bottom" 
      app:layout_scrollFlags="scroll" /> 

    </android.support.design.widget.AppBarLayout> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"/> 

</android.support.design.widget.CoordinatorLayout> 

Answer 1

Bạn có thể muốn thay đổi hành vi của Thanh công cụ. Bạn có thể cung cấp hành vi cuộn bằng cách thay đổi layout_scrollFlags.

app:layout_scrollFlags="scroll|enterAlways" 

Xóa pin và thực hiện thay đổi này trong Thanh công cụ của bạn và nó sẽ hoạt động!

Answer 2

• Thêm android:fitsSystemWindows="true" vào CoordinatorLayout.
• Xóa app:layout_scrollFlags="scroll|enterAlwaysCollapsed" từ Toolbar.

• Di chuyển TabLayout bên trong CollapsingToolbarLayout.

  <android.support.design.widget.AppBarLayout 
      android:id="@+id/appbarlayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 
  
      <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       android:minHeight="@dimen/actionBarHeight" 
       app:contentScrim="@color/colorPrimary" 
       app:expandedTitleTextAppearance="@style/TransparentText" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed"> 
  
       <ImageView 
        android:id="@+id/toolbar_image" 
        android:layout_width="match_parent" 
        android:layout_height="180dp" 
        android:adjustViewBounds="true" 
        android:background="#229944" 
        android:contentDescription="@null" 
        android:scaleType="fitCenter"/> 
  
       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/actionBarHeight" 
        android:minHeight="@dimen/actionBarHeight" 
        app:layout_collapseMode="pin" 
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 
  
       <android.support.design.widget.TabLayout 
        android:id="@+id/tabs" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        android:layout_gravity="bottom" 
        app:layout_scrollFlags="scroll" /> 
  
      </android.support.design.widget.CollapsingToolbarLayout> 
  
  </android.support.design.widget.AppBarLayout> 
  
  <android.support.v7.widget.RecyclerView 
      android:id="@+id/content" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior"/> 
  

Answer 3

này nên làm việc một cách hoàn hảo. Kiểm tra và làm việc tại API 17

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/careers_coordinator_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    tools:context=".activity.CareersActivity" 
    xmlns:tools="http://schemas.android.com/tools"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appBar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

      <ImageView 
       android:id="@+id/background" 
       android:layout_width="match_parent" 
       android:layout_height="256dp" 
       android:scaleType="centerCrop" 
       android:fitsSystemWindows="true" 
       app:layout_collapseMode="parallax" 
       android:src="@drawable/placeholder"/> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:contentScrim="?attr/colorPrimary" 
       android:fitsSystemWindows="true" 
       app:titleTextColor="@color/main_color_white" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:layout_collapseMode="pin"/> 

     </android.support.design.widget.CollapsingToolbarLayout> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="?attr/colorPrimary" 
      app:tabIndicatorColor="@color/colorAccent" 
      app:tabSelectedTextColor="@color/colorAccent" 
      app:tabTextColor="@android:color/white" 
      app:tabIndicatorHeight="4dp" 
      app:tabMode="fixed"/> 

    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

</android.support.design.widget.CoordinatorLayout> 

Answer 4

Đối CollapsingToolbarLayout sử dụng cờ cuộn:

app:layout_scrollFlags="scroll|enterAllwaysCollapsed" 

cờ này kết hợp sẽ biến mất thanh công cụ trong khi di chuyển xuống. Và CollapsingToolbarLayout sẽ mở rộng hoàn toàn khi bạn cuộn lên đầu danh sách.

Và không cần phải loại bỏ app:layout_collapseMode="pin" từ Toolbar, vì collapseMode cờ là để xác định hành vi và vị trí quan điểm bên trong CollapsingToolbarLayout và sẽ không ảnh hưởng đến sụp đổ thực tế và mở rộng CollapsingToolbarLayout.