android - 标签页形式滑动效果

Question

想要实现如下效果：
页面包含头部view、tab栏和底部viewPager

想要实现向上滑动时，头部view向上滑出屏幕，直到tab固定在屏幕顶部

求实现思路

====================before

====================after

Answer 1

The CoordinatorLayout+AppLayout+Toolbar+TabLayout provided by Android Design can be implemented.
It is available in the official Demos, and the latest version of the IDE project creation wizard has the project template in the above style.

Official API documentation: https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

<android.support.design.widget.CoordinatorLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

     <android.support.v4.widget.NestedScrollView
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <!-- Your scrolling content -->

     </android.support.v4.widget.NestedScrollView>

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

         <android.support.v7.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

         <android.support.design.widget.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

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

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

Answer 2

You can refer to the new Android control CoordinatorLayout

Answer 3

The principle should be to monitor the visual effect of sliding up to change the header

Answer 4

You can use the official CoordinatorLayout. If you don’t want to use the official one, you can try this DragTopLayout