Material Design : 带动画的标题栏

原博客地址:blog.grafixartist.com/toolbar-ani…

废话不多说,先看效果图:

《Material Design : 带动画的标题栏》

直接上代码,首先是app/build.gradle依赖:

compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:recyclerview-v7:25.1.0'
compile 'com.android.support:cardview-v7:25.1.0'
compile 'com.android.support:palette-v7:25.1.0'

依赖有个小技巧,可以看我的前面的文章。然后是layout文件,该效果主要部分还是布局,代码部分很少,打开activity的xml文件,大致框架如下:


   
    
     
      
       
      
     
     
    
    
  

CoordinatorLayout

就是一个超级FrameLayout,定义了一系列的行为(behavior),与包裹着的子视图互动。允许悬浮的view以此为基准,固定。

AppBarLayout

本质上就是一个垂直的线性LinearLayout,根据子视图的滚动和CoordinatorLayout的联动。一般作为CoordinatorLayout的直接子视图。

CollapsingToolbarLayout

用来包裹Toolbar的,使图片收缩的时候让Toolbar适应标题的字体大小。鬼知道他们经历了什么!

好了,来看下具体的xml代码,警告!下面的代码有点长,建议上个厕所再回来看。


   
    
     
      
       
      
     
     
    
    
     
    
   
  

下面来解释下,CollapsingToolbarLayout的layout_scrollFlags属性:

  • scroll:用了这个属性表示可以滚动。我觉得就是废话。。。
  • exitUntilCollapsed:滚动退出屏幕直到它收缩起来的高度,就是最小高度,就是一般的Toolbar的高度,就不给滚了。

ImageView的layout_collapseMode属性值parallax我也说不清,看开头那个效果大概脑补下,然后自己百度去。

我们并没有给Toolbar设置背景颜色,这件任务我们交给CollapsingToolbarLayout动态的去选择图片上的一个颜色设置。

我们也没有给FAB(FloatingActionButton)设置大小,有默认值,不用设置,默认就是图中那么大,你可以用app:fabSize="mini"指定最小的尺寸。anchor属性就是固定在appbar的底部,右边,尾部。

下面就是一些代码部分:

toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
        setSupportActionBar(toolbar);
        collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("Material Design");
        ImageView imageView = (ImageView) findViewById(R.id.header);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.header);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                mutedColor = palette.getMutedColor(getResources().getColor(R.color.colorPrimary));
                collapsingToolbar.setContentScrimColor(mutedColor);
            }
        });
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(new SimpleRecyclerViewAdapter(this));

CollapsingToolbarLayout的标题就是Toolbar的标题,然后我们使用Palette API获取图片的mutedColor,查阅api还可以获取几个其他的颜色,没事可以试试。还要注意下,你的app主题必须是’NoActionBar’,不然setSupportActionBar(toolbar)会报错。

大功告成,跑一下看看吧。附上 Github源代码。该代码比原作者的代码少了好多东西,尽量简单。不懂的可以问,反正我不一定会。嗯,骗个star。

    原文作者:Android
    原文地址: https://juejin.im/entry/586f012861ff4b006d29c14c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞