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 這種方式如果寫這個效果 。

 

待續。。