如今许多app都会应用到的一种UI交互形式,列表滑动到顶部,固定顶部栏效果,我们也可以称作其为吸顶效果。比如微博 、各大浏览器的首页信息流模块、我的页面的设计等。
微博评论的吸顶效果
本文将循序渐进的通过多种方式实现吸顶效果。大家择优选取适合自己的实现方式。 实现效果如图:
demo实现
一、两个相同的顶部栏
写两个一模一样的固定悬浮栏,在一开始把外层固定栏先隐藏,当内层固定栏滑动到外层固定位置时,把内层固定栏隐藏,外层固定栏显示。
头部+内层悬浮栏+list 组成了scrollview
主要代码 监听scrollview的滑动,隐藏显示内外悬浮窗
scrollView.setScrollChangeListener(new MyScrollView.ScrollChangedListener() {
@Override
public void onScrollChangedListener(int x, int y, int oldX, int oldY) {
if (y >= topHeight) {
//重点 通过距离变化隐藏内外固定栏实现
llOutsideFixed.setVisibility(View.VISIBLE);
insideFixedBar.setVisibility(View.GONE);
recyclerView.setNestedScrollingEnabled(true);
} else {
llOutsideFixed.setVisibility(View.GONE);
insideFixedBar.setVisibility(View.VISIBLE);
recyclerView.setNestedScrollingEnabled(false);
}
}
});
二、通过ListView
通过listview添加头部,当listview滑动到顶部将原本隐藏的头部布局显示出来。
listView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
/* 判断ListView头部(mHeaderView)当前是否可见
* 来决定隐藏或显示浮动栏(mFloatBar)*/
if (firstVisibleItem >= 1) {
flOutSideBar.setVisibility(View.VISIBLE);
} else {
flOutSideBar.setVisibility(View.GONE);
}
}
});
这种方式需要写重复布局,事件监听,当固定布局带有状态时,还要将两个状态同这种方式实现的根本其实也是很方式一相同,也需要引入两个相同的顶部固定栏,相比方式一不同的是:
方式二滑动监听通过listview自带的setOnScrollListener即可,方式一需要暴露接口提供滑动位移变化值。
当存在滑动的view时,方式二不需要处理冲突,方式一需要冲突处理。
布局的引入:外部悬浮窗和头部布局,listview通过addHeaderView引入即可。管理起来方便。
方式一和方式二的缺点就是:<