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开发者们的学习或者工作能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:android 添加随意拖动的桌面悬浮窗口Android开发悬浮按钮 Floating ActionButton的实现方法Android实现桌面悬浮窗、蒙板效果实例代码Android实现类似360,QQ管家那样的悬浮窗android编程实现悬浮窗体的方法不依赖于Activity的Android全局悬浮窗的实现Android滑动组件悬浮固定在顶部效果Android中悬浮窗口的实现原理实例分析Android仿360悬浮小球自定义view实现示例Android实现顶部悬浮效果

文章详情

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

软考中级精品资料免费领

相关文章

猜你喜欢

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

Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

纯CSS实现菜单导航栏的悬浮效果的实现步骤

Vue实现tab导航栏并支持左右滑动功能

纯CSS实现响应式导航栏的悬浮效果的实现步骤

Android实现底部导航栏功能（选项卡）

Android 中使用RadioGroup和Fragment实现底部导航栏的功能

Android中如何使用RadioGroup和Fragment实现底部导航栏的功能

如何实现Android导航栏功能项的显示与屏蔽

怎么在Android应用中利用ActionBar实现一个导航栏功能

Android悬浮球及全局返回功能的实现示例

微信小程序使用uni-app实现首页搜索框导航栏功能详解

微信小程序中如何实现导航栏滑动定位功能

Python轮播图与导航栏功能的实现流程全讲解

Android编程实现的简易路径导航条功能示例

android开发中如何实现一个定位与目的地导航功能

vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

Android中集成高德地图SDK实现地图定位和导航功能（二）

分析Android App中内置换肤功能的实现方式