android 仿淘宝详情页面,悬浮tab 选项卡实现方式

其实有很多方式实现,我列举了其中比较典型的3种方式:

方法一:

用一个ScrollView 作为滚动容器,搞一个tab 选项卡覆盖在上面,首先隐藏。通过ScrollView 的滚动事件监听滚动的位置来实现显示隐藏。核心代码如下:

//初始化的选项卡,和需要隐藏显示的隐藏选项卡
	View tabView, tabView2;
	int heightOffset;
	/**计算选项卡在ScrollView的位置**/
	tabView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
			public void onGlobalLayout() {
				heightOffset = tabView.getTop();
				tabView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
			}
		});

        scrollview.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {
			public void onScrollChanged() {
				int y = scrollview.getScrollY();
				System.out.println("x" + y);
				if (y >= heightOffset) {
					tabView2.setVisibility(View.VISIBLE);
				} else {
					tabView2.setVisibility(View.GONE);
				}
			}
		});

这样就可以实现悬浮tab 的简单效果实现了。

方法二:

 用ListView 实现同样的简单效果,核心方法也是通过ListView 的滚动监听器实现

listView.setOnScrollListener(new OnScrollListener() {
			
			@Override
			public void onScrollStateChanged(AbsListView view, int scrollState) {}
			
			@Override
			public void onScroll(AbsListView view, int firstVisibleItem,
					int visibleItemCount, int totalItemCount) {

				//处理悬浮显示
				if (firstVisibleItem>=2) { //这里根据自己的listView的实际postion来定义,我这儿是2 因为我有两个header
					bodyNav.setVisibility(View.VISIBLE);
				} else {
					bodyNav.setVisibility(View.INVISIBLE);
				}
					
			}
		});

看了上面代码是不是觉得很简单呢,O(∩_∩)O~

方法三:

可以采用开源的组件来达到更复杂的效果,开源组件代码就不贴出来了。自己去github.com 上看吧!

1、PinnedHeaderExpandableListView 首先它是一个ExpandableListView,但是它的头部可以固定,其次,在它的上面还有一个头部可以来回伸缩 项目地址:https://github.com/singwhatiwanna/PinnedHeaderExpandableListView APP示例:百度手机卫

2、StickyListHeaders
GroupName滑动到顶端时会固定不动直到另外一个GroupName到达顶端的ExpandListView,支持快速滑动,支持Android2.3及以上
项目地址:https://github.com/emilsjolander/StickyListHeaders
APP示例:Android 4.0联系人

android 仿淘宝详情页面,悬浮tab 选项卡实现方式_第1张图片

3、pinned-section-listview
GroupName滑动到顶端时会固定不动直到另外一个GroupName到达顶端的ExpandListView
项目地址:https://github.com/beworker/pinned-section-listview
效果图:android 仿淘宝详情页面,悬浮tab 选项卡实现方式_第2张图片

更多开源组件参看地址 https://github.com/wavefar/android-open-project


转载于:https://my.oschina.net/u/1041902/blog/352664

你可能感兴趣的:(android 仿淘宝详情页面,悬浮tab 选项卡实现方式)