CoordinatorLayout、AppBarLayout、TableLayout、CollapsingToolbarLayout、NestedScrollView的使用

一、TableLayout：效果图如下所示：

1.使用：

1)：添加依赖库，该控件被谷歌官方纳入了desigh库中

2)：在xml布局文件中引用：

<android.support.design.widget.TabLayout
       android:id="@+id/tl_tablayout"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:layout_gravity="bottom"
       android:background="#ffffff"
       android:fillViewport="false"
       app:layout_scrollFlags="scroll"
       app:tabIndicatorHeight="2dp"
       app:tabIndicatorColor="#0835f8"
       app:tabTextColor="#ced0d3"
       app:tabSelectedTextColor="#0835f8"/>
           

常用的几个属性：

a、app:tabIndicatorColor：Tab指示器下标的颜色

b、app:tabTextColor：Tab指示器默认显示的字体颜色

c、app:tabSelectedTextColor：Tab指示器选中时显示的字体颜色（添加该属性后默认会执行点击后的动画效果）

TabLayout常用的方法：

a、setTabMode：Tab指示器显示的模式，Android官方提供了两种模式：一种是填充模式，也是默认模式，表示TabLayout不可滚动，其宽度有一个最大值，所有的Tab都挤在这个宽度中，如下图所示：

该模式的常量值为MODE_FIXED = 1，我们可以通过setTabMode方法设置其可滚动模式，mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 则系统会自动适配其宽度，并且可滚动，效果如下：

b、addTab()：添加Tab选项卡

c、newTab()：创建一个新的Tab，因为Tab是TabLayout的一个内部静态类，所以我们无法从外部直接创建对象，但是其构造方法在包内可访问，所以Tab类提供了一个newTab()方法获取Tab实例

d、getTabAt(int index) 得到指定位置的选项卡

Tab常用的方法：

a、setIcon()：设置图片标题

b、setText()：设置文本标题

c、setCustomView()：设置自定义View标题

2.TabLayout和ViewPager搭配使用：

a、当TabLayout中的Tab中的样式一样时（全部是Text ），可以在ViewPager的适配器中重写 getPageTitle(int position)方法去设置Tab选项卡的标题，在Activity中调用 mTabLayout.setupWithViewPager(mViewPager)方法与ViewPager进行相结合

b、当TabLayout中的Tab中的样式不一样时（有Icon、Text/CustomView），则调用newTab().setIcon/setText()/setCustomView()方法进行设置Tab选项卡标题，并且不能调用setupWithPager()方法与ViewPager进行结合，因为有图片时，调用该方法会覆盖图片的显示，通过如下方法：分别

mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
        mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
           

则图片会正常显示，不会被覆盖

二、CoordinatorLayout：是一个容器，继承自ViewGroup，这个控件的目的就是协调它里面View的行为；

三、AppBarLayout：继承自LinearLayout线性布局，默认的AppBarLayout是垂直方向的，作用是管理它里面的控件在内容滚动时的行为。

使用：首先定义AppBarLayout与滚动视图之间的联系：1)、在任意支持嵌套滚动的View(如：RecyclerView、scrollView、NestedScrollView等)中设置app:layout_behavior属性，且系统自带了@string/appbar_scrolling_view_behavior这个行为； 2)、在AppBarLayout里面的View中设置 app:layout_scrollFlags 属性，注意：app:layout_scrollFlags 至少使用 scroll 这个flag，这样这个view才会滚动出屏幕。在可滚动的View的滚动事件发生时，AppBarLayout中设置有这个属性的View就会被触发(如果都没有设置这个属性，则都不会被触发，也就是不会随着滚动)，如下代码所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/layout_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            />
        <android.support.design.widget.TabLayout
            android:id="@+id/tl_tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="#ffffff"
            android:fillViewport="false"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="#0835f8"
            app:tabTextColor="#ced0d3"
            app:tabSelectedTextColor="#0835f8"
            />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
           

当CoordinatorLayout发现 NestedScrollView 中定义了 app:layout_behavior 这个属性，它会搜索自己所包含的其他view，看看是否有view与这个behavior相关联。AppBarLayout.ScrollingViewBehavior描述了 NestedScrollView 与AppBarLayout之间的依赖关系。NestedScrollView 的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。

四、CollapsingToolbarLayout： FrameLayout帧布局的子类，实现ToolBar折叠效果。如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中；主要有以下属性：

app:collapsedTitleTextAppearance="@style/ToolBarTitleText"

：设置折叠后字体属性

app:expandedTitleTextAppearance="@style/transparentText"

：设置展开后字体属性

app:contentScrim

：当折叠完毕，ToolBar 固定在顶端时，设置ToolBar的背景颜色

app:layout_collapseMode="pin"

：子视图的折叠模式，且该属性必须在CoolpasingToolbarLayout里面的View中设置。有两种：1、“pin”：固定模式，

在折叠的时候最后固定在顶端； 2、“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。

mCollapsing.setTitle

：设置ToolBar的标题，使用该控件，则ToolBar的标题由该控件设置。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/layout_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/layout_collapse_tb"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginEnd="48dp"
            app:expandedTitleMarginStart="48dp"
            app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
            app:expandedTitleTextAppearance="@style/transparentText"
            app:contentScrim="#46a8ba"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
                <TextView
                    android:id="@+id/tv_setting"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/bg_setting"
                    android:textColor="#ffffff"
                    android:paddingBottom="3dp"
                    android:paddingTop="3dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:text="设置"
                    />
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tl_tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="#ffffff"
            android:fillViewport="false"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="#0835f8"
            app:tabTextColor="#ced0d3"
            app:tabSelectedTextColor="#0835f8"
            />
    </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>