仿微博、人人的feed詳情頁面：Listview上下滑動，導航欄view可吸附在頂部的效果。

一、實現效果

上圖：

歡迎拍磚，拍拍更進步。

沒有對比，怎麼會有傷害，下面是 微博、人人的Feed詳情頁：

二、實現原理

1、

例項化兩個一樣的導航欄view，一個放在頁面根佈局頂部的view1，另一個放在ListView的headerView中的view2，在OnScrollListener的onScroll方法中，檢測view2在螢幕中的位置是不是滑動到了頂部，決定頂部view1的顯示與隱藏，以達到看起來只有一個導航欄view顯示的效果；

2、

為了保持兩個導航欄view的狀態同步，使用了觀察者模式；

3、

導航欄中的Tab切換，即切換ListView的adapter，並且記錄滑動的位置資訊。

三、UML圖

StickyNavHostSubject：它把所有的自定義導航欄view的引用儲存到一個list裡。AbstractSubject提供了介面，可以增加和刪除觀察者物件。

StickyNavHost：自定義的導航欄view，繼承自ViewGroup，可以根據具體需求自行更改顯示的佈局、樣式等。

NavListViewScollListener：需要為ListView設定的滑動事件，封裝了對吸附導航欄顯示、隱藏的邏輯。

MainActivity：用於演示demo，包含了對導航欄view的初始化，以及切換tab的操作等。

三、具體細節

1、

NavListViewScollListener的onScroll()方法：

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        //處理了root導航欄的顯示與隱藏, 本質上只是控制root導航欄的顯示
        //而在listView的headerView中的導航欄不做處理，因為它會隨著listView的滑動自行滑出頁面
        if
 
 (NavBean.IS_NEED_ATTACH && rootView != null && nav != null) {
            rootView.getLocationOnScreen(rootLocation);
            headView.getLocationOnScreen(headLocation);
            //根據兩者在螢幕中的location位置資訊，決定root導航欄的顯示與隱藏
            if (rootLocation[1] > headLocation[1]) {
                rootView.setVisibility(View.VISIBLE);
            } else {
                rootView.setVisibility(View.INVISIBLE);
            }

            //記錄當前listView的滑動位置
            nav.setFirstVisibleItem(firstVisibleItem);
            nav.setTopDistance((view.getChildAt(0) == null) ? 0 : view.getChildAt(0).getTop());
        }
    }

2、

MainActivity中初始化操作：

    private void initNavsView() {
        initNavsData();
        stickyNavHostRoot.setTabItemClickListener(this);//設定點選回撥
        stickyNavHostHead.setTabItemClickListener(this);//設定點選回撥
        stickyNavHostRoot.setShowTopLine(false);

        stickNavHostSubject = new StickNavHostSubject();
        stickNavHostSubject.attachObserver(stickyNavHostRoot);//觀察者模式
        stickNavHostSubject.attachObserver(stickyNavHostHead);

        NavBean[] sortedNavs = new NavBean[mNavs.size()];//指定導航欄的排列順序
        sortedNavs[0] = mNavs.get(NavBean.TYPE_REPOST);
        sortedNavs[1] = mNavs.get(NavBean.TYPE_COMMENT);
        sortedNavs[2] = mNavs.get(NavBean.TYPE_LIKE);
        stickNavHostSubject.initTabData(sortedNavs);

        scrollListener = new NavListViewScrollListener(stickyNavHostRoot, stickyNavHostHead);
        mListView.setOnScrollListener(scrollListener);//為listView設定滑動監聽，內部處理了吸附view的顯示與隱藏
    }

    protected void initNavsData() {
        mNavs = new SparseArray<>(NAV_LENGTH);
        mNavs.put(NavBean.TYPE_REPOST, new NavBean(NavBean.TYPE_REPOST, new TestAdapter(20, "我是轉發", this)));
        mNavs.put(NavBean.TYPE_COMMENT, new NavBean(NavBean.TYPE_COMMENT, new TestAdapter(20, "我是評論", this)));
        mNavs.put(NavBean.TYPE_LIKE, new NavBean(NavBean.TYPE_LIKE, new TestAdapter(20, "我是贊", this)));
    }

    private void initView() {
        mListView = (ListView) findViewById(R.id.list_view);
        stickyNavHostRoot = (StickyNavHost) findViewById(R.id.sticky_nav_layout);
        stickyNavHostRoot.setVisibility(View.INVISIBLE);

        View testHeaderView = LayoutInflater.from(this).inflate(R.layout.listview_head_view_test_layout, null);
        mListView.addHeaderView(testHeaderView);

        View inflateView = LayoutInflater.from(this).inflate(R.layout.sticky_nav_host_layout, null);
        stickyNavHostHead = (StickyNavHost) inflateView.findViewById(R.id.sticky_nav_layout);
        stickyNavHostHead.setVisibility(View.VISIBLE);
        mListView.addHeaderView(stickyNavHostHead);
        STICKY_POSITION_IN_HEADER = mListView.getHeaderViewsCount();
    }

3、

MainActivity中點選切換導航欄Tab的回撥：

    @Override
    public void onTabItemSelected(@NavBean.TYPE int type) {
        NavBean currNav = mNavs.get(type);
        stickNavHostSubject.setSelectedType(type);//事件分發給註冊者，註冊者進行相應的變化
        if (currNav.type == NavBean.TYPE_CURRENT)//等於當前選中的tab，可以遮蔽掉
            return;
        NavBean.TYPE_CURRENT = currNav.type;
        scrollListener.setNav(currNav);
        mListView.setAdapter(currNav.adapter);
        if (stickyNavHostRoot.getVisibility() == View.VISIBLE) {//吸附在頂部的rootView正在展示
            if (currNav.getFirstVisibleItem() < STICKY_POSITION_IN_HEADER)
                mListView.setSelectionFromTop(STICKY_POSITION_IN_HEADER, stickyNavHostRoot.getHeight() - 2);
            else
                mListView.setSelectionFromTop(currNav.getFirstVisibleItem(), currNav.getTopDistance());
        } else {//吸附在頂部的rootView沒有展示，說明在切換導航欄的時候是不需要進行滑動的，保持上次的位置即可
            mListView.setSelectionFromTop(NavBean.firstVisibleItemUniversal, NavBean.topDistanceUniversal);
        }
    }

4、

StickyNavHostSubject做的事情就很簡單了，和常見的觀察者模式沒區別：

public class StickNavHostSubject extends AbstractSubject<IStickyNavHostObserver> {

    private List<IStickyNavHostObserver> observers;

    public StickNavHostSubject() {
        observers = new ArrayList<>();
    }

    public void attachObserver(IStickyNavHostObserver observer) {
        observers.add(observer);
    }

    public void detachObserver(IStickyNavHostObserver observer) {
        observers.remove(observer);
    }

    @Override
    public void initTabData(NavBean[] navs) {
        for (IStickyNavHostObserver observer : observers)
            observer.initTabData(navs);
    }

    @Override
    public void refreshTabData(NavBean nav) {
        for (IStickyNavHostObserver observer : observers)
            observer.refreshTabData(nav);
    }

    @Override
    public void setSelectedType(@NavBean.TYPE int type) {
        for (IStickyNavHostObserver observer : observers)
            observer.setSelectedType(type);
    }

    @Override
    public void setSelectedPosition(int position) {
        for (IStickyNavHostObserver observer : observers)
            observer.setSelectedPosition(position);
    }