Android實現(xiàn)App中導(dǎo)航Tab欄懸浮的功能
更新時間：2016年10月10日 14:32:59 投稿：daisy
相信大家在玩手機的過程中應(yīng)該會注意到很多的app都有這種功能，比如說外賣達人常用的“餓了么”。所以這篇文章給大家分享了Android如何實現(xiàn)app中的導(dǎo)航Tab欄懸浮的功能，有需要的朋友們可以參考借鑒。
首先是“餓了么”導(dǎo)航Tab欄懸浮的效果圖。
大家可以看到上圖中的“分類”、“排序”、“篩選”會懸浮在app的頂部，狀態(tài)隨著ScrollView(也可能不是ScrollView，在這里姑且把這滑動的UI控件當(dāng)作ScrollView吧)的滾動而變化。像這種導(dǎo)航Tab欄懸浮的作用相信大家都能體會到，Tab欄不會隨著ScrollView等的滾動而被滑出屏幕外，增加了與用戶之間的交互性和方便性。
看到上面的效果，相信大家都躍躍欲試了，那就讓我們開始吧。
首先大家要明白一點：Tab欄的狀態(tài)變化是要監(jiān)聽ScrollView滑動距離的。至于如何得到ScrollView的滑動距離？可以看看另一篇： 《Android中ScrollView實現(xiàn)滑動距離監(jiān)聽器的方法》 ，這里就不過多敘述了。
好了，根據(jù)上面的就得到了對ScrollView滑動的監(jiān)聽了。接下來要思考的問題就是如何讓Tab欄實現(xiàn)懸浮的效果呢？這里給出的方法有兩種，第一種就是使用WindowManager來動態(tài)地添加一個View懸浮在頂部；第二種就是隨著ScrollView的滑動不斷重新設(shè)置Tab欄的布局位置。
我們先來看看第一種實現(xiàn)方法，首先是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添加了滑動距離監(jiān)聽器以及得到了一個windowManager的對象。還有一點需要注意的是：我們調(diào)用了getSupportActionBar().hide();去掉了標(biāo)題欄(MainActivity繼承了AppCompatActivity)。這是因為標(biāo)題欄的存在導(dǎo)致了在計算懸浮窗y軸的值時要額外加上標(biāo)題欄的高度(當(dāng)然你也可以保留標(biāo)題欄，然后計算時再加上標(biāo)題欄的高度^_^!)。
然后在onWindowFocusChanged(boolean hasFocus)得到Tab欄的高度、getTop()值等，以便下面?zhèn)溆谩?/p>
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
tabHeight = ll_tab.getHeight();
tabTop = ll_tab.getTop();
scrollTop = mScrollView.getTop();
}
}
之后在滑動監(jiān)聽器的回調(diào)方法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; //懸浮窗的類型，一般設(shè)為2002，表示在所有應(yīng)用程序之上，但在狀態(tài)欄之下
layoutParams.format = PixelFormat.RGBA_8888;
layoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
| WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE; //懸浮窗的行為，比如說不可聚焦，非模態(tài)對話框等等
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里申請顯示懸浮窗的權(quán)限：
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
到這里，整體的代碼就這些了。一起來看看效果吧：
值得注意的是：如果用這種方法來實現(xiàn)Tab欄懸浮功能有一個缺點，那就是如果該app沒有被賦予顯示懸浮窗的權(quán)限，那么該功能就變成雞肋了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對各位Android開發(fā)者們的學(xué)習(xí)或者工作能有所幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要為大家詳細介紹了android實現(xiàn)簡單的矩形裁剪框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Fragment的出現(xiàn)，如微信的額主界面包含多個Fragment，使得微信功能更加簡潔明了。這篇文章給大家講解Android Fragment用法，感興趣的朋友一起看看吧2018-08-08
android camera yuv幀水平翻轉(zhuǎn)實例
今天小編就為大家分享一篇android camera yuv幀水平翻轉(zhuǎn)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在今年的Google/IO大會上，亮相了一個全新的 Android 原生 UI 開發(fā)框架-Jetpack Compose, 與蘋果的SwiftIUI一樣，Jetpack Compose是一個聲明式的UI框架，它可簡化并加快Android上的界面開發(fā)，使用更少的代碼、強大的工具和直觀的 Kotlin API，快速讓應(yīng)用生動而精彩2022-10-10
Android發(fā)送xml數(shù)據(jù)給服務(wù)器的方法
這篇文章主要介紹了Android發(fā)送xml數(shù)據(jù)給服務(wù)器的方法,以實例形式較為詳細的分析了Android發(fā)送XML數(shù)據(jù)及接收XML數(shù)據(jù)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Android開發(fā)設(shè)計nowinandroid構(gòu)建腳本學(xué)習(xí)
這篇文章主要為大家介紹了Android開發(fā)設(shè)計nowinandroid構(gòu)建腳本學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了獲取Android界面性能數(shù)據(jù)的快捷方法，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下2021-04-04
android檢測網(wǎng)絡(luò)連接狀態(tài)示例講解
網(wǎng)絡(luò)的時候，并不是每次都能連接到網(wǎng)絡(luò)，因此在程序啟動中需要對網(wǎng)絡(luò)的狀態(tài)進行判斷，如果沒有網(wǎng)絡(luò)則提醒用戶進行設(shè)置2014-02-02
Android的2D變形（包括縮放，扭曲，平移，旋轉(zhuǎn)等）可以通過Matrix來實現(xiàn),本文研究了一下;接下來就將我這倆天研究的東西和大家分享下，先來看看Matrix的用法感興趣的你可不要錯過了哈2013-02-02
Android自定義View實現(xiàn)抖音飄動紅心效果
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)抖音飄動紅心效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05