顶部栏的收缩效果

顶部栏的收缩效果

Material Design发布之后,Google推出了两个控件:AppBarLayout和CollapsingToolBarLayout。它们都是用于修饰App顶部栏效果的控件。

AppBarLayout

简介

AppBarLayout继承LinearLayout,同时它的布局方向是垂直的。它存在的意义就是Content布局文件中某个可垂直滚动的View发生滚动事件时,其内部的子View也跟随发生相应变化。

其原理就是利用了Coordinatorlayout的Behavior来关联垂直滚动View和AppBarLayout,实现两者的交互,共同处理Touch事件。

Scroll Flags

可以通过layout_scrollFlags属性来指定内部子View应该执行哪些动作。属性值有五中:

  • scroll
  • snap
  • enterAlways
  • enterAlwaysCollapsed
  • exitUntilCollapsed

先设置好基本布局文件:


    
        
    
    

布局中,可以垂直滚动的View是RecyclerView,通过设置app:layout_behavior="@string/appbar_scrolling_view_behavior"关联AppBarLayout。

其实在AppBarLayout.java中两个Behavior,一个是AppBarLayout.Behavior(NestedScrolling机制),另一个是AppBarLayout.ScrollingViewBehavior(依赖机制)。前者通过注解声明,根据偏移量处理AppBarLayout内部View;后者供开发者自行声明,但是一定要给可以垂直滚动的View设置。

flag scroll

设置scroll之后AppBarLayout的子View会随着滚动事件一起滚动。效果如下:

顶部栏的收缩效果_第1张图片
scroll.gif

flag snap

当给AppBarLayout设置app:layout_scrollFlags="scroll|snap"时,增加一个滚动效果。当停止滚动,顶部栏的显示部分大于或等于一定的值后会自动复位,全部显示;如果小于该值,则自动移出屏幕。效果如下:

顶部栏的收缩效果_第2张图片
snap.gif

flag enterAlways

当给AppBarLayout设置app:layout_scrollFlags="scroll|enterAlways"时,AppBarLayout在下拉时直接显示,并不会考虑RecyclerView滚动的位置。效果如下:

enterAlways.gif

flag enterAlwaysCollapsed

当给AppBarLayout设置app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed",同时顶部栏的Toolbar设置minHeight属性时,下拉后会先显示最小高度,到顶部时显示完全。效果如下:

顶部栏的收缩效果_第3张图片
enterAlwaysCollapsed.gif

enterAlwaysCollapsed一般是配合enterAlways一起使用的,同时一定要给Toolbar设置最小高度(minheight),不过Toolbar默认最小高度就是ActionBar的高度...

flag exitUntilCollapsed

当给AppBarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed",同时顶部栏的Toolbar设置minHeight属性时。当RecyclerView向上滚动至顶部栏的最小高度后,AppBarLayout不在收缩。下拉时,RecyclerView没有到达最顶部时,只显示顶部栏最小高度。效果如下:

顶部栏的收缩效果_第4张图片
exitUntilCollapsed.gif

同理上一个flag,一定要设置minHeight属性

状态栏着色

当使用上面的布局想改变状态栏的颜色,给CoordinatorLayout设置fitsSystemWindow属性为true无效。一定要给AppBarLayout设置。(没有验证过,参考自CoordinatorLayout最佳实践)

但是本人比较喜欢在代码中设置该属性为true。

protected void setFitsSystemWindow() {
        ViewGroup content = (ViewGroup) findViewById(android.R.id.content);
        if(content.getChildCount() == 0)
            return;
        View rootView = content.getChildAt(0);
        rootView.setFitsSystemWindows(true);
    }

因为fitsSystemWindow必须设置给Content布局的根View才有效,所以就想到了这个办法,不用像网上那样在布局中给多个View设置fitsSystemWindow属性。

Toolbar样式设置

在将Toolbar设置为supportActionBar之前一定要设置好Title等除了NavigationIcon属性,否则在之后设置无效。而NavigationIcon以及NavigationListener可以后面设置。

CollapsingToolbarLayout

从上面的分析可以看到顶部栏不一定是ActionBar的高度,可以很大。但是直接给ToolBar的layout_height设置较大的值整个效果非常的难看。于是就有了CollapsingToolbarLayout,对Toolbar在一次包装。它继承FrameLayout,为AppBarLayout的scrollFlags添加折叠的效果。必须作为AppBarLayout的直接子View。

常用属性

  • Title,当布局内容全部显示出来时,title是最大的,但是随着View逐步移出屏幕顶部,title变得越来越小。在代码中可以通过调用setTitle函数来设置title。注意,Toolbar的title必须通过该属性来设置,通过自己的属性来设置无效
  • ExpandedTitleColor/CollapsedTitleTextColor,设置还没收缩时状态下字体颜色与收缩后Toolbar上字体的颜色。当设置这两个属性后,在动画过程中Android系统会自动配置好过渡效果。
  • expandedTitleTextAppearance/collapsedTitleTextAppearance,设置未折叠状态下字体样式和设置折叠后字体样式。
  • expendsTitleMargin,可以给未折叠时字体四周的margin值
  • contentScrim,这是ToolBar被折叠到顶部固定后的背景。
  • Status bar scrim,根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过setStatusBarScrim(Drawable)来设置纱布图片,但是只能在LOLLIPOP设备上面有作用。
  • 折叠模式(layout_collpaseMode)
    • pin模式:即固定模式,在折叠的时候最后固定在顶端
    • parallax模式:即视差模式,在折叠的时候会有个视差折叠的效果
  • layout_collapseParallaxMultiplier,CollapsingToolbarLayout滑动时,子视图的视觉差。这个值的范围为0.0-1.0之间。为0的时候,你可以感觉到视图完全随NestedScrollView滚动;为1的时候,似乎又是完全不滚动。

注意为了让顶部栏跟随RecyclerView有折叠效果,一定要把ScrollFlags设置给CollapsingToolbarLayout。

实践

布局代码



    

        

            

            
        
    

    

Java代码

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_layout);
        initDate();
        initView();
    }

    private void initView() {
        mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.id_coordinatorlayout_collapsing_layout);

        mToolbar = (Toolbar) findViewById(R.id.id_toolbar_collapse);
        mImg = (ImageView) findViewById(R.id.id_img_collapse);
        mImg.setImageResource(R.mipmap.jupiter);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        mCollapsingLayout = (CollapsingToolbarLayout) findViewById(R.id.id_collapselayout);
        mCollapsingLayout.setTitle("CollapsingToolbarLayout");
        mCollapsingLayout.setCollapsedTitleTextColor(Color.WHITE);
        mCollapsingLayout.setExpandedTitleColor(Color.YELLOW);


        mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview_collapse);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setAdapter(mAdapter);
    }

效果

CollapsingToolbarLayout.gif

当Toolbar配合CollapsingToolbarLayout一起使用时,不能设置layout_height为wrap_content,否则会出现意想不到的效果...有可能是Toolbar设置的title无法显示,或者AppbarLayout不会跟随RecyclerView一起滚动折叠(只能说很僵,研究了半天)...

参考

玩转AppBarLayout,更酷炫的顶部栏

CoordinatorLayout——小试牛刀

你可能感兴趣的:(顶部栏的收缩效果)