Làm thế nào để tạo một chế độ xem con của nestedscrollview thành tiêu đề dính?

Question

Dưới đây là mã snipet của tôi.

<?xml version="1.0" encoding="utf-8"?> 
<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/coordinate" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@android:color/background_light" 
    tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity"> <ProgressBar 
     android:id="@+id/progressBar" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:visibility="gone" /> 

    <include 
     android:id="@+id/retryLayoutNoInternet" 
     layout="@layout/no_internet_retry_layout" 
     android:visibility="gone" /> 
    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="400dp" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsingToolbarLayout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginEnd="64dp" 
      app:expandedTitleMarginStart="48dp" 
      app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

      <ImageView 
       android:id="@+id/poster" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:contentDescription="@string/poster_of_movie" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

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

    </android.support.design.widget.AppBarLayout> 
<include 
     android:id="@+id/content" 
     layout="@layout/content_movie" /> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="112dp" 
     android:background="@color/colorPrimary" 
     android:elevation="4dp" 
     app:layout_anchor="@id/appbar" 
     app:layout_anchorGravity="bottom" 
     app:layout_collapseMode="pin" 
     app:theme="@style/ThemeOverlay.AppCompat.Light"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:layout_marginBottom="8dp" 
      android:minHeight="?android:attr/actionBarSize" 
      android:orientation="vertical"> 

      <TextView 
       android:id="@+id/movieTitle" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:text="Title" 
       android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" /> 

      <TextView 
       android:id="@+id/movieOrignalTitle" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="4dp" 
       android:text="subtitle" 
       android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" /> 
     </LinearLayout> 
    </android.support.v7.widget.Toolbar> 

Và dưới đây là content_movie.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.NestedScrollView 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/content_movie" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity" 
    tools:showIn="@layout/activity_movie"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 

     <include layout="@layout/overview" /> 

     <include layout="@layout/cast" /> 

     <include layout="@layout/facts" /> 


<!-- Below tablayout I want to work as a sticky header --> 
     <!--<android.support.design.widget.TabLayout--> 
     <!--android:layout_width="match_parent"--> 
     <!--android:layout_height="100dp"--> 
     <!--android:background="@color/colorPrimary" />--> </LinearLayout> 
</android.support.v4.widget.NestedScrollView> 

Các tablayout nhận xét nên làm việc như một tiêu đề dính (có nghĩa là nó không nên di chuyển khi nó đạt đến đầu khi di chuyển) .Làm thế nào để đạt được hiệu ứng này bằng cách sử dụng phối hợp bố trí? HOẶC Trong bất kỳ cách nào khác. Chúng ta có thể sử dụng hành vi tùy chỉnh hoặc một cái gì đó?

Answer 1

Bạn có thể sử dụng thư viện sau đây để đạt được hiệu ứng này.

https://github.com/emilsjolander/StickyScrollViewItems

này về cơ bản là một cái nhìn tùy chỉnh cuộn và trong phạm vi xem di chuyển này, bạn có thể thực hiện bất kỳ xem hoặc bố trí như dính con bằng cách thêm thẻ:

android:tag="sticky"

Hy vọng nó sẽ giúp!

Answer 2

Tất cả những gì bạn phải làm là di chuyển TabLayout đến AppBarLayout.

Vì TabLayout không có cờ cuộn được xác định, nó sẽ dính vào đầu bố cục khi bạn cuộn.

Khi bạn thực hiện việc này, chiều cao thanh ứng dụng cần phải được thay đổi thành wrap_content và chiều cao 400dp cần phải chuyển đến CollapsingToolbarLayout.

Tôi chỉ cần lấy đoạn AppBarLayout từ toàn bộ XML của bạn để chứng minh:

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

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsingToolbarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="400dp" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginEnd="64dp" 
     app:expandedTitleMarginStart="48dp" 
     app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

     <ImageView 
      android:id="@+id/poster" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:contentDescription="@string/poster_of_movie" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

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

    <android.support.design.widget.TabLayout 
     android:layout_width="match_parent" 
     android:layout_height="100dp" 
     android:background="@color/colorPrimary" /> 

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

Answer 3

Bạn phải đặt bạn Toolbar bên CollapsingToolbarLayout

<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/coordinate" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@android:color/background_light" 
      tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity">  

<ProgressBar 
    android:id="@+id/progressBar" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:visibility="gone" /> 

<include 
    android:id="@+id/retryLayoutNoInternet" 
    layout="@layout/no_internet_retry_layout" 
    android:visibility="gone" /> 
<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="400dp" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsingToolbarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginEnd="64dp" 
     app:expandedTitleMarginStart="48dp" 
     app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

     <ImageView 
      android:id="@+id/poster" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:contentDescription="@string/poster_of_movie" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="112dp" 
    android:background="@color/colorPrimary" 
    android:elevation="4dp" 
    app:layout_anchor="@id/appbar" 
    app:layout_anchorGravity="bottom" 
    app:layout_collapseMode="pin" 
    app:theme="@style/ThemeOverlay.AppCompat.Light"> 

     <TextView 
      android:id="@+id/movieTitle" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Title"    android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" /> 

     <TextView 
      android:id="@+id/movieOrignalTitle" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="4dp" 
      android:text="subtitle" 
        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Su  btitle.Inverse" /> 
    </LinearLayout> 
</android.support.v7.widget.Toolbar> 


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

</android.support.design.widget.AppBarLayout> 
<include 
    android:id="@+id/content" 
    layout="@layout/content_movie" />