Android框架之路——FloatingActionButton使用与ToolBar进阶

参考博客：

• 玩转AppBarLayout，更酷炫的顶部栏
• FloatingActionButton的滚动隐藏和弹出特效的实现
• Snackbar学习笔记

效果演示：

FAB的相关：

• app:fabSize设置FloatingActionButton的大小，有两种赋值分别是 “mini” 和 “normal”，默认是normal；
• app:backgroundTint：FloatingActionButton的背景颜色，默认的背景颜色是Theme主题中的。
• app:rippleColor设置FAB点击时的背景颜色；
• app:borderWidth，该属性尤为重要，如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果，所以设置为borderWidth=”0dp”；
• app:elevation设置默认状态下FAB的阴影大小；
• app:pressedTranslationZ设置点击时候FAB的阴影大小；

• src设置FAB的图标，Google建议符合Design设计的该图标大小为24dp。

  这是我的FloatingActionButton布局，基本属性都按照上述设置；

  点击事件弹出SnakeBar：

  mFloatingActionButton = (FloatingActionButton) findViewById(R.id.fab_button);
  mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          Snackbar.make(findViewById(R.id.fab_button), "fab is clicked", Snackbar.LENGTH_SHORT)
                  .setAction("undo", new View.OnClickListener() {
                      @Override
                      public void onClick(View v) {
  
                      }
                  })
                  .show();
      }
  });
  

  除了Google的FAB,这里不得不介绍一款第三方的FAB库，做出点击FAB可以弹出子FAB布局，链接==》

  想要在AndroidStudio中使用也非常简单，just：

  dependencies {
          compile 'com.getbase:floatingactionbutton:1.10.1'
  }
  

  OK，现在看一下布局：

  • fab:fab_size=”mini”是设置大小；
  • fab:fab_colorNormal是设置颜色；
  • fab:fab_icon=”@drawable/share1”是设置图标。

  更多的属性设置可以看一下参考博客二。点击事件和Google的也是十分相似，基本没有变动，就是这里的FAB是com.getbase.floatingactionbutton包下的，如下：

  mFloatingActionButton = (com.getbase.floatingactionbutton.FloatingActionButton) findViewById(R.id.fab_1);
  mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          Snackbar.make(findViewById(R.id.fab_1), "fab is clicked", Snackbar.LENGTH_SHORT)
                  .setAction("undo", new View.OnClickListener() {
                      @Override
                      public void onClick(View v) {
  
                      }
                  })
                  .show();
      }
  });
  

ToolBar进阶：

Toobar主要是用来替换ActionBar的，换句话说，ActionBar能做的，Toolbar都能做。但Toolbar远远不止这些，你可以好好的看看参考博客一，还是非常有必要阅读一下的。这里我就直接进入主题，Toolbar和AppBarLayout结合在一起可以实现更加绚丽的效果，当然这其中还要涉及到俩个玩意，一个是CoordinatorLayout，另一个是NestedScrollView。

不管别的，先看一下布局文件：

        

            

        

        

            

        

        ......

要说明以下几点：

• 要实现这个功能必须Toolbar被AppBarLayout包裹，可滑动类型的View（如recyclerview）被NestedScrollView包裹；
• Toolbar中app:layout_scrollFlags=”scroll”，用来设置recyclerview上滑时Toolbar的操作；
• 在NestedScrollView属性中加入app:layout_behavior=”@string/appbar_scrolling_view_behavior”即可关联起来Toolbar和recyclerview；

详细内容还是建议大家看看参考博客，毕竟这个功能实现现阶段个人差不多够用。这里实现的功能主要是，RecyclerView上滑时，ToolBar会向上隐藏。下拉时，又可以再加载出来。最后，贴一下整个布局文件，里面包含NavigationView、Toolbar、RecyclerView和FloatingActionButton。

个人公众号：每日推荐一篇技术博客，坚持每日进步一丢丢…欢迎关注，想建个微信群，主要讨论安卓和Java语言，一起打基础、用框架、学设计模式，菜鸡变菜鸟，菜鸟再起飞，愿意一起努力的话可以公众号留言，谢谢…