在这期给大家实现tablayout的吸顶效果,主要结合CoordinatorLayout+CollapsingToolbarLayout+tablayout+viewpager,这四个控件来实现
首先先看一下qq实现的效果图
主要是靠折叠布局将上面的布局折叠起来,从而让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关联,实现左右的滑动即可
下面实现的效果图
好了这期就到这了,下期再见!