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

好了这期就到这了,下期再见!

你可能感兴趣的:(UI随笔第四期——仿QQ联系人tab吸顶效果)