仿微博叶眉、人人的feed詳情頁面：Listview上下滑動衅疙，導(dǎo)航欄view可吸附在頂部的效果。
一喧伞、實(shí)現(xiàn)效果
上圖：
效果圖.gif
Github: https://github.com/qizhenghao/StickyNavigationBar
歡迎拍磚絮识，拍拍更進(jìn)步次舌。
沒有對比兽愤，怎么會有傷害浅萧，下面是 微博、人人的Feed詳情頁：
微博吩案、人人Feed詳情頁.jpeg
二徘郭、實(shí)現(xiàn)原理
1、
實(shí)例化兩個(gè)一樣的導(dǎo)航欄view胧后，一個(gè)放在頁面根布局頂部的view1抱环，另一個(gè)放在ListView的headerView中的view2，在OnScrollListener的onScroll方法中眶痰，檢測view2在屏幕中的位置是不是滑動到了頂部凛驮，決定頂部view1的顯示與隱藏条辟，以達(dá)到看起來只有一個(gè)導(dǎo)航欄view顯示的效果羽嫡；
2、
為了保持兩個(gè)導(dǎo)航欄view的狀態(tài)同步婚惫，使用了觀察者模式先舷；
3滓侍、
導(dǎo)航欄中的Tab切換，即切換ListView的adapter捺球，并且記錄滑動的位置信息氮兵。
三歹鱼、UML圖
UML圖.png
StickyNavHostSubject：它把所有的自定義導(dǎo)航欄view的引用保存到一個(gè)list里。AbstractSubject提供了接口篙悯，可以增加和刪除觀察者對象。
StickyNavHost：自定義的導(dǎo)航欄view螺捐，繼承自ViewGroup，可以根據(jù)具體需求自行更改顯示的布局赔癌、樣式等澜沟。
NavListViewScollListener：需要為ListView設(shè)置的滑動事件，封裝了對吸附導(dǎo)航欄顯示刊苍、隱藏的邏輯正什。
MainActivity：用于演示demo婴氮，包含了對導(dǎo)航欄view的初始化主经，以及切換tab的操作等罩驻。
三蜈块、具體細(xì)節(jié)
1百揭、
NavListViewScollListener的onScroll()方法：
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//處理了root導(dǎo)航欄的顯示與隱藏, 本質(zhì)上只是控制root導(dǎo)航欄的顯示
//而在listView的headerView中的導(dǎo)航欄不做處理，因?yàn)樗鼤S著listView的滑動自行滑出頁面
if (NavBean.IS_NEED_ATTACH && rootView != null && nav != null) {
rootView.getLocationOnScreen(rootLocation);
headView.getLocationOnScreen(headLocation);
//根據(jù)兩者在屏幕中的location位置信息课锌，決定root導(dǎo)航欄的顯示與隱藏
if (rootLocation[1] > headLocation[1]) {
rootView.setVisibility(View.VISIBLE);
} else {
rootView.setVisibility(View.INVISIBLE);
}
//記錄當(dāng)前l(fā)istView的滑動位置
nav.setFirstVisibleItem(firstVisibleItem);
nav.setTopDistance((view.getChildAt(0) == null) ? 0 : view.getChildAt(0).getTop());
}
}
2雏胃、
MainActivity中初始化操作：
private void initNavsView() {
initNavsData();
stickyNavHostRoot.setTabItemClickListener(this);//設(shè)置點(diǎn)擊回調(diào)
stickyNavHostHead.setTabItemClickListener(this);//設(shè)置點(diǎn)擊回調(diào)
stickyNavHostRoot.setShowTopLine(false);
stickNavHostSubject = new StickNavHostSubject();
stickNavHostSubject.attachObserver(stickyNavHostRoot);//觀察者模式
stickNavHostSubject.attachObserver(stickyNavHostHead);
NavBean[] sortedNavs = new NavBean[mNavs.size()];//指定導(dǎo)航欄的排列順序
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設(shè)置滑動監(jiān)聽瞭亮，內(nèi)部處理了吸附view的顯示與隱藏
}
protected void initNavsData() {
mNavs = new SparseArray<>(NAV_LENGTH);
mNavs.put(NavBean.TYPE_REPOST, new NavBean(NavBean.TYPE_REPOST, new TestAdapter(20, "我是轉(zhuǎn)發(fā)", 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中點(diǎn)擊切換導(dǎo)航欄Tab的回調(diào)：
@Override
public void onTabItemSelected(@NavBean.TYPE int type) {
NavBean currNav = mNavs.get(type);
stickNavHostSubject.setSelectedType(type);//事件分發(fā)給注冊者厂汗，注冊者進(jìn)行相應(yīng)的變化
if (currNav.type == NavBean.TYPE_CURRENT)//等于當(dāng)前選中的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沒有展示衷畦，說明在切換導(dǎo)航欄的時(shí)候是不需要進(jìn)行滑動的碰酝，保持上次的位置即可
mListView.setSelectionFromTop(NavBean.firstVisibleItemUniversal, NavBean.topDistanceUniversal);
}
}
4、
StickyNavHostSubject做的事情就很簡單了铛嘱，和常見的觀察者模式?jīng)]區(qū)別：
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);
}
