Cố định TabLayout và chồng chéo nội dung AppBar

Question

Với thư viện Android Hỗ trợ thiết kế mới, có đến một số tính năng mát mẻ liên quan đến các AppBar.

Tôi đang xem triển khai hiệu ứng cuộn tương tự như được hiển thị trong gif ở trên. (Lấy từ Google Play Trò chơi -> Trò chơi của tôi)

Tôi đã xem xét thêm thuộc tính sau vào nestedscrollview, đặt nội dung phía trên thanh ứng dụng.

app:behavior_overlapTop 

Nó hoạt động như mong đợi khi tất cả các thành phần bên trong thanh ứng dụng được đặt để cuộn.

app:layout_scrollFlags="scroll" 

Nếu tôi muốn tabLayout được ghim ở trên cùng, không gian bên dưới nó cũng sẽ được ghim. Vì vậy, có vẻ kỳ lạ:

Nói tóm lại, có cách nào để tạo ra ở trên bằng cách sử dụng thư viện thiết kế mới, hay để tôi phải làm cho nó một số cách khác không?

XML được yêu cầu:

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/content" 
    android:layout_height="match_parent" 
    android:layout_width="match_parent"> 

    <android.support.design.widget.AppBar 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="164dp" 
     android:background="?attr/colorPrimary"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_scrollFlags="scroll"/> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways"/> 

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

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

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

Answer 1

Hãy thử điều này, Hy vọng công việc của mình

Đặt app:layout_scrollFlags="scroll|enterAlways" trong Thanh công cụ và android:scrollbars="horizontal" trong TabLayout

Theo đề nghị của tôi, bạn nên loại bỏ dòng này app:layout_scrollFlags="scroll|enterAlways" tại của bạn TabLayout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:app1="http://schemas.android.com/apk/res/com.samsung.ssc" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@color/white" 
tools:context="com.samsung.ssc.LMS.LMSListActivity"> 

<android.support.design.widget.AppBarLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/colorPrimary" 
     android:elevation="4dp" 
     android:minHeight="?attr/actionBarSize" 
     app:layout_scrollFlags="scroll|enterAlways"> 


    </android.support.v7.widget.Toolbar> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabLayoutLMSList" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     android:scrollbars="horizontal"> 


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

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


<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fabCreateNewLMS" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentEnd="true" 
    android:layout_alignParentRight="true" 
    android:layout_gravity="right|bottom" 
    android:layout_margin="@dimen/margin_15" 
    android:onClick="onNewLeaveCreateClick" 
    android:src="@drawable/ems_pencil" 
    app1:rippleColor="@color/ems_status_sky_blue_color" 
    app:backgroundTint="@color/ems_status_yellow_color" 
    app:borderWidth="@dimen/margin_0" 
    app:elevation="@dimen/margin_5" />