android design库的使用（二）

我一篇我们介绍了DrawerLayout的使用，通过它我们实现一个侧滑的菜单，也说明了一些菜单中的操作及开源的侧滑菜单库，今天我们讲解伸缩的ViewPage，现实生活中有许多的app比如新闻资讯、阅读、影视等都采用ViewPage作为分页的导航，如哔哩哔哩动画Android端

看效果是不是有点感觉很惊艳，其实实现起来很容易的。

首先我们要修改布局app_bar_main.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:id="@+id/main_content"
    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"
        android:orientation="vertical"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ADBE107E"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="10dp"
        android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

这里我们使用TabLayout+ViewPager来实现滑动导航，具体使用可移步TabLayout+ViewPager
然后是Activity中添加viewpage的适配器和tab绑定

mTabLayout = (TabLayout) view.findViewById(R.id.tabs);
mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
TabFragmentAdapter adapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments, titles);
mViewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(mViewPager);

这个伸缩的ViewPage就完成了，是不是相当的简单呢？
其实实现起来只有2步

• 将Toolbar、TabLayout写在AppBarLayout中并且Toolbar添加app:layout_scrollFlags="scroll|enterAlways"
• 将ViewPager写在CoordinatorLayout中并且添加app:layout_behavior="@string/appbar_scrolling_view_behavior"

这样就实现了滑动时隐藏、显示Toolbar的功能。
这里我们就需要介绍一下app:layout_scrollFlags与app:layout_behavior

app:layout_scrollFlags

ScrollFlags共有五种常量值供AppBarLayout的Children View使用，分别为scroll、enterAlways、enterAlwaysCollapsed、snap、exitUntilCollapsed，下面我们描述一下

1. scroll
   Child View 伴随着滚动事件而滚出或滚进屏幕。
   注意： 如果使用了其他值，必定要使用这个值才能起作用。 如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用。
2. enterAlways
   快速返回模式，其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题，优先滚动Child View然后滚动Scrolling View。
3. enterAlwaysCollapsed
   enterAlways的附加值。这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。
4. snap
   简单理解，就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动。
5. exitUntilCollapsed
   发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。

app:layout_behavior

Behavior是一系列回调。让你有机会以非侵入的为View添加动态的依赖布局，和处理父布局(CoordinatorLayout)滑动手势的机会。详细见自定义Behavior
@string/appbar_scrolling_view_behavior
(android.support.design.widget.AppBarLayout$ScrollingViewBehavior)作用是自己放到AppBarLayout的下面。

现在再看这些效果是不是so easy呢？上面介绍的一些layout_scrollFlags与layout_behavior没有详细的介绍，以后会填上这些坑的。

赏

谢谢你请我吃糖果

支付宝

微信