实现掘金导航栏+float按钮其实可以很简单

   

相信经常使用掘金APP的用户来说应该会很熟悉掘金客户端的滑动效果，滑动时适时的隐藏掉Title和底部导航栏，使得更多的内容显示在用户的界面上，从而增加用户的阅读体验。

在本文中将带你使用第三方库来简单的实现掘金的导航栏+悬浮按钮效果

先贴下 ByeBurger库的github地址 :https://github.com/githubwing/ByeBurger 

   

以及实现的最终效果图：

  

 看着还挺不错的样子，进入正题。

1.首先理所当然的是引入编译库

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

dependencies {
   compile 'com.github.githubwing:ByeBurger:1.2.3'
  compile 'com.android.support:design:25.0.0'
  }

2. 在你的页面布局中使用CoordinatorLayout 作为页面布局的根节点，将需要控制隐藏与显示的View作为CoordinatorLayout 的直接子View，并添加 app:layout_behavior属性，布局格式如下：

<android.support.design.widget.CoordinatorLayout>
        
        <！--这里放置你的Viewpager -->

        <!--你的TitleView--> 
        <TitleView
            app:layout_behavior="@string/bye_burger_title_behavior"  />
        
        <!--底部导航栏  --> 
        <BottomView
            android:layout_gravity="bottom"
            app:layout_behavior="@string/bye_burger_bottom_behavior" />
      
        <!-- floating 悬浮按钮  -->
        <FloatingActionButton
            app:layout_behavior="@string/bye_burger_float_behavior" />
        
    </android.support.design.widget.CoordinatorLayout>

这里的布局，你的TitleView可以是一个RelativeLayout，ToolBar，也可以是 TabLayout，BottomView同理。

在以上的效果图中，博主使用的是TabLayout，有小伙伴说Tab中的英文字母会变成大写，但没关系，可以使用以下方式来设置

<style name="MyTabStyle" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
    </style>
    <style name="MyTabLayoutStyle" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyTabStyle</item></style>

然后在 TabLayout 中使用该样式。

3. 控制TitleView和底部导航栏以及悬浮按钮的显示与隐藏

ByeBurgerBehavior.from(mTitleView).hide()

ByeBurgerBehavior.show(mBottomView).show()

 需要注意的是： 

   1). 如果TitleView使用的是ToolBar的控件，别忘了将Theme改为NoActionBar

  android:theme="@style/Theme.AppCompat.Light.NoActionBar"

   2). 注意布局的层级问题，需要控制显隐的控件，一定是CoordinatorLayout 的 直接子View 

 

基本上到这里就完成使用ByeBurger库所具备的东西，剩下工作就只是实现你的Fragmen逻辑，在本文中由于TabLayout切换碎片的功能跟底部的导航栏类似，所以并未去实现切换逻辑。

最后是该demo的github地址：https://github.com/shanerou/WingAPP