又到了更博的时间了,今天给大家带来的就是“导航Tab栏悬浮功能”了。通常大家在玩手机的过程中应该会注意到很多的app都有这种功能,比如说外卖达人常用的“饿了么”。下面就给出了“饿了么”导航Tab栏悬浮的效果图。
可以看到上图中的“分类”、“排序”、“筛选”会悬浮在app的顶部,状态随着ScrollView(也可能不是ScrollView,在这里姑且把这滑动的UI控件当作ScrollView吧)的滚动而变化。像这种导航Tab栏悬浮的作用相信大家都能体会到,Tab栏不会随着ScrollView等的滚动而被滑出屏幕外,增加了与用户之间的交互性和方便性。
看到上面的效果,相信大家都跃跃欲试了,那就让我们开始吧。
首先大家要明白一点:Tab栏的状态变化是要监听ScrollView滑动距离的。至于如何得到ScrollView的滑动距离?可以看看我的一篇Tip:《给你的ScrollView设置滑动距离监听器》,这里就不过多叙述了。
好了,根据上面的就得到了对ScrollView滑动的监听了。接下来要思考的问题就是如何让Tab栏实现悬浮的效果呢?这里给出的方法有两种,第一种就是使用WindowManager来动态地添加一个View悬浮在顶部;第二种就是随着ScrollView的滑动不断重新设置Tab栏的布局位置。
我们先来看看第一种实现方法,首先是xml布局了。
Activity的布局,activity_main.xml:
1 | <?xml version="1.0" encoding="utf-8"?> |
Tab栏的布局,tab_layout.xml:
1 | <?xml version="1.0" encoding="utf-8"?> |
上面布局中的很多空白LinearLayout主要是拉长ScrollView,效果图就是这样的:
然后我们来看看onCreate(Bundle savedInstanceState)
:
1 | @Override |
我们先在onCreate(Bundle savedInstanceState)
中给ScrollView添加了滑动距离监听器以及得到了一个windowManager的对象。还有一点需要注意的是:我们调用了getSupportActionBar().hide();
去掉了标题栏(MainActivity继承了AppCompatActivity)。这是因为标题栏的存在导致了在计算悬浮窗y轴的值时要额外加上标题栏的高度(当然你也可以保留标题栏,然后计算时再加上标题栏的高度^_^!)。
然后在onWindowFocusChanged(boolean hasFocus)得到Tab栏的高度、getTop()值等,以便下面备用。如果你对getLeft()、getTop()、getRight()和getBottom()还不了解的话,可以看看我的另一篇Tip: 《对view的getLeft()、getTop()等的笔记》。
1 | @Override |
之后在滑动监听器的回调方法onScroll(int scrollY)
中来控制显示还是隐藏悬浮窗。
1 | @Override |
上面的代码比较简单,不用我过多叙述了。下面是removeWindow()、showWindow()两个方法:
1 | // 显示window |
这两个方法也很简单,而且有注释,相信大家可以看懂。
最后,不要忘了在AndroidManifest.xml里申请显示悬浮窗的权限:
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
到这里,整体的代码就这些了。一起来看看效果吧:
但是用这种方法来实现Tab栏悬浮功能有一个缺点,那就是如果该app没有被赋予显示悬浮窗的权限,那么该功能就变成鸡肋了。当然还有第二种方法来实现,不过只能等到下一篇博文再讲了。
本Demo源码下载:
have a nice day~