Android仿微網誌、人人Feed詳情頁吸附導航欄

轉載請标明出處：http://blog.csdn.net/qizhenghao/article/details/66975485

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

一、實作效果

上圖：

Github: https://github.com/qizhenghao/StickyNavigationBar

歡迎拍磚，拍拍更進步。

沒有對比，怎麼會有傷害，下面是 微網誌、人人的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[] > headLocation[]) {
                rootView.setVisibility(View.VISIBLE);
            } else {
                rootView.setVisibility(View.INVISIBLE);
            }

            //記錄目前listView的滑動位置
            nav.setFirstVisibleItem(firstVisibleItem);
            nav.setTopDistance((view.getChildAt() == null) ?  : view.getChildAt().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[] = mNavs.get(NavBean.TYPE_REPOST);
        sortedNavs[] = mNavs.get(NavBean.TYPE_COMMENT);
        sortedNavs[] = 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(, "我是轉發", this)));
        mNavs.put(NavBean.TYPE_COMMENT, new NavBean(NavBean.TYPE_COMMENT, new TestAdapter(, "我是評論", this)));
        mNavs.put(NavBean.TYPE_LIKE, new NavBean(NavBean.TYPE_LIKE, new TestAdapter(, "我是贊", 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() - );
            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);
    }