Android实现App中导航Tab栏悬浮的功能

概述首先是“饿了么”导航Tab栏悬浮的效果图。大家可以看到上图中的“分类”、“排序”、“筛选”会悬浮在app的顶部，状态随着ScrollView(也可能不是ScrollView，在这里姑且把这滑动的UI控件当作ScrollView吧)的滚动而

首先是“饿了么”导航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)：

@OverrIDeprotected 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()值等，以便下面备用。

@OverrIDepublic voID onWindowFocusChanged(boolean hasFocus) {  super.onWindowFocusChanged(hasFocus);  if (hasFocus) {    tabHeight = ll_tab.getHeight();    tabtop = ll_tab.gettop();    scrolltop = mScrollVIEw.gettop();  }}

之后在滑动监听器的回调方法onScroll(int scrollY)中来控制显示还是隐藏悬浮窗。

@OverrIDepublic voID onScroll(int scrollY) {  Log.i(TAG,"scrollY = " + scrollY + ",tabtop = " + tabtop);  if (scrollY > tabtop) { // 如果没显示    if (!isShowWindow) {      showWindow();    }  } else { // 如果显示了    if (isShowWindow) {      removeWindow();    }  }}

上面的代码比较简单，不用我过多叙述了。下面是removeWindow() 、showWindow()两个方法：

// 显示windowprivate voID removeWindow() {  if (ll_tab_temp != null)    windowManager.removeVIEw(ll_tab_temp);  isShowWindow = false;}// 移除windowprivate 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开发者们的学习或者工作能有所帮助，如果有疑问大家可以留言交流。

总结

以上是内存溢出为你收集整理的Android实现App中导航Tab栏悬浮的功能全部内容，希望文章能够帮你解决Android实现App中导航Tab栏悬浮的功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。