Android实现App中导航Tab栏悬浮的功能
首先是“饿了么”导航tab栏悬浮的效果图。
大家可以看到上图中的“分类”、“排序”、“筛选”会悬浮在app的顶部,状态随着scrollview(也可能不是scrollview,在这里姑且把这滑动的ui控件当作scrollview吧)的滚动而变化。像这种导航tab栏悬浮的作用相信大家都能体会到,tab栏不会随着scrollview等的滚动而被滑出屏幕外,增加了与用户之间的交互性和方便性。
看到上面的效果,相信大家都跃跃欲试了,那就让我们开始吧。
首先大家要明白一点:tab栏的状态变化是要监听scrollview滑动距离的。至于如何得到scrollview的滑动距离?可以看看另一篇: 《android中scrollview实现滑动距离监听器的方法》 ,这里就不过多叙述了。
好了,根据上面的就得到了对scrollview滑动的监听了。接下来要思考的问题就是如何让tab栏实现悬浮的效果呢?这里给出的方法有两种,第一种就是使用windowmanager来动态地添加一个view悬浮在顶部;第二种就是随着scrollview的滑动不断重新设置tab栏的布局位置。
我们先来看看第一种实现方法,首先是xml布局了。
activity的布局,activity_main.xml:
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <relativelayout android:id="@+id/rl_title" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/colorprimary"> <imageview android:id="@+id/iv_back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginleft="10dp" android:src="@drawable/new_img_back" /> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:text="@string/app_name" android:textcolor="@android:color/white" android:textsize="18sp" /> </relativelayout> <com.yuqirong.tabsuspenddemo.view.myscrollview android:id="@+id/mscrollview" android:layout_width="match_parent" android:layout_height="match_parent"> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#cccccc" android:orientation="vertical"> <imageview android:id="@+id/iv_pic" android:layout_width="match_parent" android:layout_height="180dp" android:scaletype="centercrop" android:src="@drawable/ic_bg_personal_page" /> <include layout="@layout/tab_layout" /> <linearlayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginbottom="5dp" android:layout_marginleft="15dp" android:layout_marginright="15dp" android:layout_margintop="15dp" android:background="@android:color/white" android:orientation="horizontal"> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginbottom="5dp" android:layout_marginleft="15dp" android:layout_marginright="15dp" android:layout_margintop="15dp" android:background="@android:color/white" android:orientation="horizontal"> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginbottom="5dp" android:layout_marginleft="15dp" android:layout_marginright="15dp" android:layout_margintop="15dp" android:background="@android:color/white" android:orientation="horizontal"> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginbottom="5dp" android:layout_marginleft="15dp" android:layout_marginright="15dp" android:layout_margintop="15dp" android:background="@android:color/white" android:orientation="horizontal"> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginbottom="5dp" android:layout_marginleft="15dp" android:layout_marginright="15dp" android:layout_margintop="15dp" android:background="@android:color/white" android:orientation="horizontal"> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginbottom="5dp" android:layout_marginleft="15dp" android:layout_marginright="15dp" android:layout_margintop="15dp" android:background="@android:color/white" android:orientation="horizontal"> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginbottom="5dp" android:layout_marginleft="15dp" android:layout_marginright="15dp" android:layout_margintop="15dp" android:background="@android:color/white" android:orientation="horizontal"> </linearlayout> </linearlayout> </com.yuqirong.tabsuspenddemo.view.myscrollview> </linearlayout>
tab栏的布局,tab_layout.xml:
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_tab" android:layout_width="match_parent" android:layout_height="40dp" android:background="@color/colorprimary" android:orientation="horizontal"> <textview android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="分类" android:textcolor="@android:color/white" android:textsize="18sp" /> <textview android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="排序" android:textcolor="@android:color/white" android:textsize="18sp" /> <textview android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="筛选" android:textcolor="@android:color/white" android:textsize="18sp" /> </linearlayout>
上面布局中的很多空白linearlayout主要是拉长scrollview,效果图就是这样的:
然后我们来看看oncreate(bundle savedinstancestate):
@override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); getsupportactionbar().hide(); setcontentview(r.layout.activity_main); mscrollview = (myscrollview) findviewbyid(r.id.mscrollview); mscrollview.setonscrolllistener(this); ll_tab = (linearlayout) findviewbyid(r.id.ll_tab); windowmanager = (windowmanager) getsystemservice(context.window_service); }
我们先在oncreate(bundle savedinstancestate)
中给scrollview添加了滑动距离监听器以及得到了一个windowmanager的对象。还有一点需要注意的是:我们调用了getsupportactionbar().hide();
去掉了标题栏(mainactivity继承了appcompatactivity)。这是因为标题栏的存在导致了在计算悬浮窗y轴的值时要额外加上标题栏的高度(当然你也可以保留标题栏,然后计算时再加上标题栏的高度^_^!)。
然后在onwindowfocuschanged(boolean hasfocus)
得到tab栏的高度、gettop()
值等,以便下面备用。
@override public void onwindowfocuschanged(boolean hasfocus) { super.onwindowfocuschanged(hasfocus); if (hasfocus) { tabheight = ll_tab.getheight(); tabtop = ll_tab.gettop(); scrolltop = mscrollview.gettop(); } }
之后在滑动监听器的回调方法onscroll(int scrolly)
中来控制显示还是隐藏悬浮窗。
@override public void onscroll(int scrolly) { log.i(tag, "scrolly = " + scrolly + ", tabtop = " + tabtop); if (scrolly > tabtop) { // 如果没显示 if (!isshowwindow) { showwindow(); } } else { // 如果显示了 if (isshowwindow) { removewindow(); } } }
上面的代码比较简单,不用我过多叙述了。下面是removewindow()
、showwindow()
两个方法:
// 显示window private void removewindow() { if (ll_tab_temp != null) windowmanager.removeview(ll_tab_temp); isshowwindow = false; } // 移除window private void showwindow() { if (ll_tab_temp == null) { ll_tab_temp = layoutinflater.from(this).inflate(r.layout.tab_layout, null); } if (layoutparams == null) { layoutparams = new windowmanager.layoutparams(); layoutparams.type = windowmanager.layoutparams.type_phone; //悬浮窗的类型,一般设为2002,表示在所有应用程序之上,但在状态栏之下 layoutparams.format = pixelformat.rgba_8888; layoutparams.flags = windowmanager.layoutparams.flag_not_touch_modal | windowmanager.layoutparams.flag_not_focusable; //悬浮窗的行为,比如说不可聚焦,非模态对话框等等 layoutparams.gravity = gravity.top; //悬浮窗的对齐方式 layoutparams.width = windowmanager.layoutparams.match_parent; layoutparams.height = tabheight; layoutparams.x = 0; //悬浮窗x的位置 layoutparams.y = scrolltop; //悬浮窗y的位置 } windowmanager.addview(ll_tab_temp, layoutparams); isshowwindow = true; }
这两个方法也很简单,而且有注释,相信大家可以看懂。
最后,不要忘了在androidmanifest.xml里申请显示悬浮窗的权限:
<uses-permission android:name="android.permission.system_alert_window" />
到这里,整体的代码就这些了。一起来看看效果吧:
值得注意的是:如果用这种方法来实现tab栏悬浮功能有一个缺点,那就是如果该app没有被赋予显示悬浮窗的权限,那么该功能就变成鸡肋了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对各位android开发者们的学习或者工作能有所帮助,如果有疑问大家可以留言交流。
上一篇: 简介Java程序的Shell脚本包装
推荐阅读
-
Android实现App中导航Tab栏悬浮的功能
-
Android App中实现向右滑动销毁功能的要点解析
-
Android App中实现可以双击放大和缩小图片功能的实例
-
Android App中实现向右滑动销毁功能的要点解析
-
分析Android App中内置换肤功能的实现方式
-
Android App中实现可以双击放大和缩小图片功能的实例
-
分析Android App中内置换肤功能的实现方式
-
Android中TabLayout+ViewPager 简单实现app底部Tab导航栏
-
Android中TabLayout+ViewPager 简单实现app底部Tab导航栏
-
在vue中实现某一些路由页面隐藏导航栏的功能操作