天降之物01,石燕京,与舒淇齐名-她被富商包养了10年
首先是“饿了么”导航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 apk 项目一键打包并上传到蒲公英的实现方法
Android 自定义LineLayout实现满屏任意拖动功能的示例代码
android 限制某个操作每天只能操作指定的次数(示例代码详解)
Android 集成 google 登录并获取性别等隐私信息的实现代码
网友评论