实现导航Tab栏悬浮功能之改进版

博文出处：实现导航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：

tab_layout.xml：

我们发现在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时，ll_tab会跟随ScrollView的滑动而滑动；当scrollY>picBottom时，ll_tab布局的顶部的坐标始终是ScrollView的滑动距离，这样就造成了ll_tab悬浮在顶部的“假象”。

好了，一起来看看效果吧：

效果图gif

是不是和第一种方法的效果一样呢，相信大家都学会了。如果有问题可以在下面留言。

最后，放出源码：

TabSuspendDemo.rar

~have fun!~