快捷導(dǎo)航

Android實(shí)現(xiàn)App中導(dǎo)航Tab欄懸浮的功能

更新時(shí)間：2016年10月10日 14:32:59 投稿：daisy

相信大家在玩手機(jī)的過(guò)程中應(yīng)該會(huì)注意到很多的app都有這種功能，比如說(shuō)外賣達(dá)人常用的“餓了么”。所以這篇文章給大家分享了Android如何實(shí)現(xiàn)app中的導(dǎo)航Tab欄懸浮的功能，有需要的朋友們可以參考借鑒。

首先是“餓了么”導(dǎo)航Tab欄懸浮的效果圖。

大家可以看到上圖中的“分類”、“排序”、“篩選”會(huì)懸浮在app的頂部，狀態(tài)隨著ScrollView(也可能不是ScrollView，在這里姑且把這滑動(dòng)的UI控件當(dāng)作ScrollView吧)的滾動(dòng)而變化。像這種導(dǎo)航Tab欄懸浮的作用相信大家都能體會(huì)到，Tab欄不會(huì)隨著ScrollView等的滾動(dòng)而被滑出屏幕外，增加了與用戶之間的交互性和方便性。

看到上面的效果，相信大家都躍躍欲試了，那就讓我們開始吧。

首先大家要明白一點(diǎn)：Tab欄的狀態(tài)變化是要監(jiān)聽ScrollView滑動(dòng)距離的。至于如何得到ScrollView的滑動(dòng)距離？可以看看另一篇：《Android中ScrollView實(shí)現(xiàn)滑動(dòng)距離監(jiān)聽器的方法》，這里就不過(guò)多敘述了。

好了，根據(jù)上面的就得到了對(duì)ScrollView滑動(dòng)的監(jiān)聽了。接下來(lái)要思考的問(wèn)題就是如何讓Tab欄實(shí)現(xiàn)懸浮的效果呢？這里給出的方法有兩種，第一種就是使用WindowManager來(lái)動(dòng)態(tài)地添加一個(gè)View懸浮在頂部；第二種就是隨著ScrollView的滑動(dòng)不斷重新設(shè)置Tab欄的布局位置。

我們先來(lái)看看第一種實(shí)現(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主要是拉長(zhǎng)ScrollView，效果圖就是這樣的：

然后我們來(lái)看看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添加了滑動(dòng)距離監(jiān)聽器以及得到了一個(gè)windowManager的對(duì)象。還有一點(diǎn)需要注意的是：我們調(diào)用了getSupportActionBar().hide();去掉了標(biāo)題欄(MainActivity繼承了AppCompatActivity)。這是因?yàn)闃?biāo)題欄的存在導(dǎo)致了在計(jì)算懸浮窗y軸的值時(shí)要額外加上標(biāo)題欄的高度(當(dāng)然你也可以保留標(biāo)題欄，然后計(jì)算時(shí)再加上標(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();
  }
}

之后在滑動(dòng)監(jiān)聽器的回調(diào)方法onScroll(int scrollY)中來(lái)控制顯示還是隱藏懸浮窗。

@Override
public void onScroll(int scrollY) {
  Log.i(TAG, "scrollY = " + scrollY + ", tabTop = " + tabTop);
  if (scrollY > tabTop) {
 // 如果沒(méi)顯示
    if (!isShowWindow) {
      showWindow();
    }
  } else {
 // 如果顯示了
    if (isShowWindow) {
      removeWindow();
    }
  }
}

上面的代碼比較簡(jiǎn)單，不用我過(guò)多敘述了。下面是removeWindow() 、showWindow()兩個(gè)方法：

// 顯示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; //懸浮窗的行為，比如說(shuō)不可聚焦，非模態(tài)對(duì)話框等等
    layoutParams.gravity = Gravity.TOP; //懸浮窗的對(duì)齊方式
    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;
}

這兩個(gè)方法也很簡(jiǎn)單，而且有注釋，相信大家可以看懂。

最后，不要忘了在AndroidManifest.xml里申請(qǐng)顯示懸浮窗的權(quán)限：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

到這里，整體的代碼就這些了。一起來(lái)看看效果吧：

值得注意的是：如果用這種方法來(lái)實(shí)現(xiàn)Tab欄懸浮功能有一個(gè)缺點(diǎn)，那就是如果該app沒(méi)有被賦予顯示懸浮窗的權(quán)限，那么該功能就變成雞肋了。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)各位Android開發(fā)者們的學(xué)習(xí)或者工作能有所幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Android實(shí)現(xiàn)App中導(dǎo)航Tab欄懸浮的功能

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具