UI随笔第四期——仿QQ联系人tab吸顶效果

在这期给大家实现tablayout的吸顶效果，主要结合CoordinatorLayout+CollapsingToolbarLayout+tablayout+viewpager，这四个控件来实现

首先先看一下qq实现的效果图

QQ实现效果图.gif

主要是靠折叠布局将上面的布局折叠起来，从而让tablayout吸顶，下面是实现的主要代码

AppBarLayout的直接子控件设置这个属性:layout_scrollFlags ，这里他的子控件就是CollapsingToolbarLayout

1.scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局
2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩 
3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来  

CollapsingToolbarLayout的子布局则要设置layout_collapseMode

1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开 
2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果

这里还用到了NestedScrollview，记住要设置layout_behavior="@string/appbar_scrolling_view_behavior"才行
完成布局的折叠后，接下来我们来实现tablayout的样式，QQ的tab样式是一种选中带圆角的样式，这里我们通过android:background和app:tabBackground这两个来实现

background是实现tab外部背景的效果，这里我们设置圆角就行了

这里我们由于不需要圆角的外边宽度，则直接设置为0dp

tabbackground是设置tab选中后的内部背景

这里我们填充内部的选中颜色，同时也设置跟外部一样的圆角

至此我们就实现了QQ tab的样式效果，然后我们在代码中将tablayout与viewpager关联，实现左右的滑动即可

下面实现的效果图

效果图.gif

好了这期就到这了，下期再见！