Android 仿照淘宝首页 Tab 切换效果（滑动到底部变化图片 ，点击图标滑动到顶部）

序、首页要仿淘宝一个效果 ，IOS 网上拿一个 Demo 就直接用了 。我是很讨厌拿来主义的（其实是在网上没找到demo 哈哈哈哈） ，我就自己写了 。

 

淘宝效果

Demo 效果图 （不想再去写 demo ，所以直接上项目效果图  ）

 

梳理一下逻辑

最初我准备使用 动画 ，然后发现我可能对动画有什么误解 。

最后选择了放一个垂直滑动的 View  。（看到这的小伙伴脑子里应该已经有实现思路了吧） ，没错 ，就是判断整体滑动到底部还是顶部 ，然后再去触发 tab 滑动按钮的索引 。

 

监听滑动到底部和顶部

 scrolView.setOnScollChangedListener(new ESNoHScrollView.OnScollChangedListener() {
            @Override
            public void onScrollChanged(ESNoHScrollView scrollView, int x, int y, int oldx, int oldy) {
                if (y == 0) {// 滚动到顶
                    Log.i("SSSSSSS", "TOP SCROLL");
                    EventBus.getDefault().post(new MessageEvent(MessageEvent.SCROLLVIEW_TOP_EVENT));
                }

                // 滚动到底
                if (y == (scrollView.getChildAt(0).getMeasuredHeight() - scrollView.getMeasuredHeight())) {
                    Log.i("SSSSSSS", "BOTTOM SCROLL");
                    EventBus.getDefault().post(new MessageEvent(MessageEvent.SCROLLVIEW_BOTTOM_EVENT));
                }

            }
        });

事件之后 ，就是 Tab 垂直滑动 View 的

esNoHScrollView.fullScroll(ScrollView.FOCUS_DOWN);
esNoHScrollView.fullScroll(ScrollView.FOCUS_UP);

我这边 Tab + Fragment ，使用的是最原始的方式 （看下面代码就可以懂 ，我用的是布局事件 + Fragment的隐藏显示）并没有使用 流行的 TabLayout + Fragment 实现方式 。

  /**
     * 切换tab
     */
    private void tabSelected(int type) {
        switch (type) {
            case 0:
                rl_tab_home.setSelected(true);
                rl_tab_learn.setSelected(false);
                rl_tab_mine.setSelected(false);
                break;
            case 1:
                rl_tab_home.setSelected(false);
                rl_tab_learn.setSelected(true);
                rl_tab_mine.setSelected(false);
                break;
            case 2:
                rl_tab_home.setSelected(false);
                rl_tab_learn.setSelected(false);
                rl_tab_mine.setSelected(true);
                break;
            default:
                break;
        }
    }

。。。。。

上述太简单了 ，没有写 demo 。我考虑一下使用 MagicIndicator + Fragment 这种方式如果写这个效果 。

 

待续。。