android - 标签页形式滑动效果
ringa_lee
ringa_lee 2017-04-17 17:10:55
0
4
689

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

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

求实现思路

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

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

ringa_lee
ringa_lee

ringa_lee

reply all(4)
黄舟

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

You can refer to the new Android control CoordinatorLayout

刘奇

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

黄舟

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template