Android新特性之TabLayout+ViewPager悬停

栗子惯例，先上GIF

栗子.gif

用到的控件

使用以下控件1，2，3需要在Gradle加入Support Design Library：

    compile 'com.android.support:design:25.0.1'

CoordinatorLayout
CoordinatorLayout通过协调子布局的形式，产生联动效果。通过设置子View的Behaviors来协调子View。
AppBarLayout
AppBarLayout中的一个属性android:fitsSystemWindows="true"，是为了调整系统窗口布局以适应布局。
AppBarLayout里面的View，是通过app:layout_scrollFlags属性来控制，其中有4种Flag的类型：
Scroll：向下滚动时,被指定了这个属性的View会被滚出屏幕范围直到完全不可见的位置。
enterAlways：向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置。
enterAlwaysCollapsed：当视图已经设置minHeight属性又使用此标志时，视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed：滚动退出屏幕，最后折叠在顶端。
CollapsingToolbarLayout
用来协调AppBarLayout来实现滚动隐藏ToolBar的效果。
Toolbar
Toolbar在v7包中，设置layout_collapseMode协调CollapsingToolbarLayout达到滑动视图的视觉差效果:
pin：固定模式，在折叠的时候最后固定在顶端。
parallax：视差模式，在折叠的时候会有个视差折叠的效果。

核心代码xml

<?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"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:theme="@style/ToolbarTheme"        android:fitsSystemWindows="true">                <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsingToolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:contentScrim="?attr/colorPrimary"            app:navigationIcon="@mipmap/back"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:scaleType="centerInside"                app:layout_collapseMode="parallax"                android:fitsSystemWindows="true"                android:orientation="vertical">                <ImageView                    android:background="@mipmap/image"                    android:layout_width="match_parent"                    android:layout_height="200dp" />            LinearLayout>        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            app:titleTextColor="#ffffff"            app:theme="@style/ToolbarTheme"            android:gravity="center_vertical"            android:background="#00ffffff"            app:navigationIcon="@mipmap/back"            app:layout_collapseMode="pin"            app:popupTheme="@style/AppTheme.PopupOverlay" />    android.support.design.widget.CollapsingToolbarLayout>    <android.support.design.widget.TabLayout        android:id="@+id/tabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/selector_list_item"        app:tabIndicatorColor="#666666"        app:tabSelectedTextColor="#4D4D4D"        app:tabTextColor="#A7A7A7" />    android.support.design.widget.AppBarLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior" />android.support.design.widget.CoordinatorLayout>

这里有几个注意的地方
AppBarLayout加入android:fitsSystemWindows="true"
CollapsingToolbarLayout加入app:layout_scrollFlags="scroll|exitUntilCollapsed
Toolbar加入app:layout_collapseMode="pin"
ViewPager加入app:layout_behavior="@string/appbar_scrolling_view_behavior"
ViewPager中需要用RecyclerView做为列表

总结：这是Android的新特提供的一种炫酷组合控件~顶部的图片可以换成任意的View，比如Banner图等。

GitHub地址

栗子惯例，先上GIF

用到的控件

核心代码xml

更多相关文章

随机推荐