Material Design系列风格控件之(一)----AppBarLayout实现上滑隐藏ToolBar

深藏阁楼爱情的钟 2022-06-17 13:00 151阅读 0赞

**一、简介**

Material Design是Google推出的一个全新的设计语言，它的特点就是拟物扁平化。谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和"其他平台"提供更一致、更广泛的"外观和感觉"。

Material Design包含了很多内容，大致分为四部分：

1.主题和布局  
2.视图和阴影  
3.UI控件  
4.动画

UI控件中常用的大概有这么14种:

1、AppBarLayout----是一个垂直的LinearLayout,实现了Material Design中app bar的scrolling gestures特性。

2、ToolBar----工具条。

3、DrawerLayout----抽屉菜单。

4、NavigationView----NavigationView就是左边抽屉拉出来后的布局。

5、RecyclerView----RecyclerView 是 ListView 的升级版本，更加先进和灵活。

6、CardView----这控件其实就是一个卡片。

7、AutoScrollViewPager----是一个Android ViewPager类库,实现页面间的自动滚动和循环轮播,也可以在ViewPager嵌套ViewPager。

8、CoordinatorLayout----只要使用CoordinatorLayout作为基本布局,将自动产生向上移动的动画。

9、CollapsingToolbarLayout----提供一个可以折叠的Toolbar。

10、TabLayout----TabLayout是MaterialDesign之后推出的自定义控件，可以用来完成tab切换 横向滑动 下标显示当前页等等以前很复杂实现的功能。

11、TextInputLayout----是一个用于在EditText上显示floating效果的辅助控件,其效果与扔物线的MaterialEditText效果相似。

12、FloatingActionButton----简称FAB,是浮动操作按钮，一般作为进阶操作的开关，在用户界面中通常是一个漂浮的小圆圈，它有自身独特的动态效果，比如变形、弹出、位移等等，代表着在当前页面上用户的特定的操作。

13、Snackbar----提供了一个介于Toast和AlertDialog之间轻量级控件,它可以很方便的提供消息的提示和动作反馈。

14、NestedScrollView----在MD中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他们两个都可以用来跟ToolBar交互，实现上拉下滑中ToolBar的变化。在NestedScrollView的名字中其实就可以看出他的作用了，Nested是嵌套的意思，而ToolBar基本需要嵌套使用。

如何在Android使用Material Design库?

只要之配置文件中加入Material Design依赖进行了。

**二、AppBarLayout **

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作，它的布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。

AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout\_scrollFlags属性或是setScrollFlags()方法来指定。  
  
AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作，为了让AppBarLayout能够知道何时滚动其子View，我们还应该在CoordinatorLayout布局中提供一个可滚动View，我们称之为scrolling view。scrolling view和AppBarLayout之间的关联，通过将scrolling view的Behavior设为AppBarLayout.ScrollingViewBehavior来建立。

请注意：上面提到的某个可滚动View，可以理解为某个ScrollView。怎么理解上面的话呢？就是说，当某个ScrollView发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一起滚动、保持不动等等）。那某个可移动的View到底是哪个可移动的View呢？这是由你自己指定的！如何指定，我们后面说。

AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用,所以我们先来看下Toolbar。

**(1)、Toolbar**

Toolbar是android L引入的一个新控件，可以理解为action bar的替换品：提供了action bar类似的功能，但是更灵活。不像actionbar那么固定，Toolbar更像是一般的View元素，可以被放置在view树体系的任意位置，可以应用动画，可以跟着scrollView滚动，可以与布局中的其他view交互。当然，你还可以用Toolbar替换掉actionbar，只需调用 Activity.setActionBar()。

所以我们在使用Toolbar之前要把ActionBar给隐藏掉。

隐藏ActionBar的方法有很多，可以通过代码的方式隐藏，也可以通过配置文件的方式，我们主要是通过配置文件的方式来隐藏。在我们的styles.xml文件中的AppTheme标签中加入如下两行：

<item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

然后修改布局文件:

<android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:fitsSystemWindows="true"
            >
    
    </android.support.v7.widget.Toolbar>

最后将Toobar作为“ActionBar”来用

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            toolbar.setTitle("这里是Title");
            toolbar.setSubtitle("这里是子标题");
            toolbar.setLogo(R.mipmap.ic_launcher);
            setSupportActionBar(toolbar);

效果如下:

![20170426215511421][]

示例:[http://download.csdn.net/detail/u011781521/9826953][http_download.csdn.net_detail_u011781521_9826953]

**(2)、AppBarLayout**  
  
  
功能：让子View（AppBar）可以选择他们自己的滚动行为。  
  
  
注意：需要依赖CoordinatorLayout作为父容器，同时也要求一个具有可以独立滚动的兄弟节点（或兄弟节点的子view可以滚动）才能发挥其功能。

**2.1将AppBarLayout与ScrollView关联起来**

前面说过只有当"ScrollView"滚动时才起效果,那么如何将AppBarLayout与ScrollView关联起来呢?

这个时候我们就可以用NestedScrollView这个来解决这个问题,然后上面还说到AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作,所以我们把NestedScrollView作为CoordinatorLayout的子类。

修改布局文件如下:

运行结果如下:

![20170428203405637][]

往上一划,toolbar就隐藏了。示例:[http://download.csdn.net/detail/u011781521/9826965][http_download.csdn.net_detail_u011781521_9826965]

三、CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。

主要功能大概有:

(1) 折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle函数来设置title。  
  
(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.  
  
(3)状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。  
  
(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。将布局参数app:layout\_collapseMode设为parallax  
  
(5)将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。 将app:layout\_collapseMode设为pin。

大概页面布局如下:

<?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:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                android:id="@+id/ctb"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="wrap_content"
                    android:layout_height="300dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fk_as"
                    app:layout_collapseMode="parallax" />
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?android:attr/actionBarSize"
                    app:layout_collapseMode="pin" />
    
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.widget.NestedScrollView
    
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
    
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/my_txt"
                android:textSize="20sp" />
    
        </android.support.v4.widget.NestedScrollView>
    
    </android.support.design.widget.CoordinatorLayout>

运行效果如下:

![20170429001418531][]

示例:[http://download.csdn.net/detail/u011781521/9828929][http_download.csdn.net_detail_u011781521_9828929]

[20170426215511421]: /images/20220617/a248692501fd481188bfe10de7c348a5.png
[http_download.csdn.net_detail_u011781521_9826953]: http://download.csdn.net/detail/u011781521/9826953
[20170428203405637]: /images/20220617/7e8b8afb75954e8f9e755bd4ecd747c9.png
[http_download.csdn.net_detail_u011781521_9826965]: http://download.csdn.net/detail/u011781521/9826965
[20170429001418531]: /images/20220617/b24f9afa242d4f90ac22dadbcd850ef4.png
[http_download.csdn.net_detail_u011781521_9828929]: http://download.csdn.net/detail/u011781521/9828929