博文出處：實現導航Tab欄懸浮功能之改進版，歡迎大家關注我的博客，謝謝！
在上一篇博文中，我們用WindowManager的方法實現了Tab欄的懸浮功能。如果你沒有看過上篇博文，請點擊[《輕松實現app中的導航Tab欄懸浮功能》][url]。
[url]: /2016/01/12/%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0app%E4%B8%AD%E7%9A%84%E5%AF%BC%E8%88%AATab%E6%A0%8F%E6%82%AC%E6%B5%AE%E5%8A%9F%E8%83%BD/
當然，用WindowManager來實現由一個缺點就是當沒有顯示懸浮窗的權限時，該功能就無法體現出來。而在本篇博文中，我們用第二種方法，也就是不斷地重新設置Tab欄的布局位置來實現懸浮功能，彌補了第一種方法的缺點。效果圖這里就不放了，相信大家都看過啦。
不廢話了，直接上代碼。
activity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_main"
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" />
<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="55dp"
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
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>
<include layout="@layout/tab_layout" />
</LinearLayout>
</com.yuqirong.tabsuspenddemo.view.MyScrollView>
</LinearLayout>
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>
我們發現在activity_main.xml里Tab欄懸浮窗的布局放在了最后，這是因為當懸浮窗懸浮在頂部時，應該在所有的UI控件上方，所以在xml里放在了最后。
接下來看看MainActivity：
public class MainActivity extends AppCompatActivity implements MyScrollView.OnScrollListener {
private static final String TAG = "MainActivity";
private MyScrollView mScrollView;
private LinearLayout ll_tab;
private ImageView iv_pic;
private int picBottom;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();
mScrollView = (MyScrollView) findViewById(R.id.mScrollView);
mScrollView.setOnScrollListener(this);
ll_tab = (LinearLayout) findViewById(R.id.ll_tab);
iv_pic = (ImageView) findViewById(R.id.iv_pic);
findViewById(R.id.ll_main).getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
onScroll(mScrollView.getScrollY());
}
});
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
picBottom = iv_pic.getBottom();
}
}
@Override
public void onScroll(int scrollY) {
int top = Math.max(scrollY, picBottom);
ll_tab.layout(0, top, ll_tab.getWidth(), top + ll_tab.getHeight());
}
}
我們驚奇地發現在Activity里的代碼竟然這么短！但是這是這么短，實現了一模一樣的功能。
首先在父布局中添加了OnGlobalLayoutListener，以便當布局的狀態或者控件的可見性改變時去重新設置Tab欄的布局。之后在onWindowFocusChanged(boolean hasFocus)里得到iv_pic.getBottom()的值，也就是iv_pic的高度。也就是說你一開始想把ll_tab布局在iv_pic的下面。因此可以當作Tab欄距離ScrollView頂部的距離。
最后在onScroll(int scrollY)中比較scrollY，picBottom的最大值。當scrollY<picBottom時，ll_tab會跟隨ScrollView的滑動而滑動；當scrollY>picBottom時，ll_tab布局的頂部的坐標始終是ScrollView的滑動距離，這樣就造成了ll_tab懸浮在頂部的“假象”。
好了，一起來看看效果吧：
效果圖gif
是不是和第一種方法的效果一樣呢，相信大家都學會了。如果有問題可以在下面留言。
最后，放出源碼：
~have fun!~
