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

一、實現效果

上圖：

效果圖.gif

歡迎拍磚，拍拍更進步。

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

微博、人人Feed詳情頁.jpeg

二、實現原理

1、

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

2、

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

3、

導航欄中的Tab切換，即切換ListView的adapter，并且記錄滑動的位置信息。

三、UML圖

UML圖.png

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 {

private List 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);

}

總結

以上是生活随笔為你收集整理的android吸附菜单,Android仿微博、人人Feed详情页吸附导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。