ListView+头部向上滑动标题栏渐显以及ScrollView向上滑动标题栏渐显
2016-08-24 15:41
295 查看
最近公司任务要求给app增加滑动屏幕,标题栏渐显得功能。结合网上查阅的资料,这种功能完成了,下面就来介绍一下是怎样完成的,欢迎各位提意见。
首先我们应该明确,要达到这种渐显效果,用到的是动画里面的透明度,通过动态设置透明度来达到这种需求。
类似于如上图这种用ScrollView布局来达到滑动的界面,首先需要自定义一个MyScrollView继承ScrollView
然后在代码里面mScrollView.setScrollViewListener(this);重写onScrollChanged()方法,关键代码如下:
像上图这种效果的ListView+头部向上滑动的布局,你很容易就会想到在onScroll方法里来处理
但是你又会发现在这个方法里,用那些参数不能直接获取到listview滑动的垂直距离,怎么办呢?就采用了一篇博客里介绍的,可以获取到listview滑动的垂直距离。关键代码如下:
参考资料:
ActionBar 背景渐变动画效果http://blog.chengyunfeng.com/?p=497#ixzz3aCZS3I3h,英文版地址:http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level/
Android 开源之StickyHeaderListView 标题渐变、吸附悬停、筛选分类、动态头部:http://www.jianshu.com/p/3bf26722c489#
Android开发:Translucent System Bar 的最佳实践:http://www.jianshu.com/p/0acc12c29c1b/comments/1393558
LISTVIEW 获取精确的垂直滚动距离:http://www.2cto.com/kf/201507/416142.html
SparseArray浅析:http://blog.csdn.net/u013493809/article/details/21699121
首先我们应该明确,要达到这种渐显效果,用到的是动画里面的透明度,通过动态设置透明度来达到这种需求。
采用ScrollView的布局向上滑动如何达到标题栏渐显
类似于如上图这种用ScrollView布局来达到滑动的界面,首先需要自定义一个MyScrollView继承ScrollView
/** * Created by YK on 2016/8/22. * 带滚动监听的ScrollView */ public class<span style="color:#ff0000;"> MyScrollView</span> extends ScrollView { public interface ScrollViewListener { void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy); } private ScrollViewListener scrollViewListener = null; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public void setScrollViewListener(ScrollViewListener scrollViewListener) { this.scrollViewListener = scrollViewListener; } @Override protected void onScrollChanged(int x, int y, int oldx, int oldy) { super.onScrollChanged(x, y, oldx, oldy); if (scrollViewListener != null) { scrollViewListener.onScrollChanged(this, x, y, oldx, oldy); } } }
然后在代码里面mScrollView.setScrollViewListener(this);重写onScrollChanged()方法,关键代码如下:
/** *在这里处理标题栏颜色渐变逻辑 * @param scrollView * @param x * @param y * @param oldx * @param oldy */ @Override public void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy) { if (y <= 0) { <span style="color:#ff0000;">mTitleBarView.setBackgroundColor(Color.argb(0, 255, 255, 255)); </span> } else if (y > 0 && y <=mIsShowTitleHeight) { float scale = (float) y / mIsShowTitleHeight; float alpha = (255 * scale); mTitleBarView.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255)); } else { mTitleBarView.setBackgroundColor(Color.argb(255, 255, 255, 255)); } }
采用ListView+头部向上滑动如何达到标题栏渐显
像上图这种效果的ListView+头部向上滑动的布局,你很容易就会想到在onScroll方法里来处理
@Override public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {}
但是你又会发现在这个方法里,用那些参数不能直接获取到listview滑动的垂直距离,怎么办呢?就采用了一篇博客里介绍的,可以获取到listview滑动的垂直距离。关键代码如下:
private SparseArray recordSp = new SparseArray(0);//设置容器大小,默认是10 /** * 处理标题栏背景颜色渐变 * @param view * @param firstVisibleItem 处于顶部的Item标记 * @param visibleItemCount 当前可见item数当前可见item数 * @param totalItemCount 总item数 */ @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { super.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount); mCurrentfirstVisibleItem = firstVisibleItem; View firstView = view.getChildAt(0);//获取当前最顶部的item if (firstView != null) { ItemRecod itemRecord = (ItemRecod) recordSp.get(firstVisibleItem); if (itemRecord == null) { itemRecord = new ItemRecod(); } itemRecord.height = firstView.getHeight();//获取当前最顶部Item的高度 itemRecord.top = firstView.getTop();//获取对应item距离顶部的距离 recordSp.append(firstVisibleItem, itemRecord);//添加键值对设置值 int ScrollY = getScrollY(); if(ScrollY <= 0){ mTitleView.setBackgroundColor(Color.argb(0, 255, 255, 255)); }else if (ScrollY > 0 && ScrollY <= mIsShowTitleHeight) { float scale = (float) ScrollY / mIsShowTitleHeight; float alpha = (255 * scale); mTitleView.setBackgroundColor(Color.argb((int)alpha, 255, 255, 255)); } else{ //滑动距离大于mIsShowTitleHeight就设置为不透明 mTitleView.setBackgroundColor(Color.argb(255, 255, 255, 255)); } } }
private int getScrollY() { int height = 0; for (int i = 0; i < mCurrentfirstVisibleItem; i++) { ItemRecod itemRecod = (ItemRecod) recordSp.get(i); if (itemRecod != null) { height += itemRecod.height; } } ItemRecod itemRecod = (ItemRecod) recordSp.get(mCurrentfirstVisibleItem); if (null == itemRecod) { itemRecod = new ItemRecod(); } return height - itemRecod.top; } private class ItemRecod { int height = 0; int top = 0; }经测试,两种情况下的滑动使标题栏渐变没问题。
参考资料:
ActionBar 背景渐变动画效果http://blog.chengyunfeng.com/?p=497#ixzz3aCZS3I3h,英文版地址:http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level/
Android 开源之StickyHeaderListView 标题渐变、吸附悬停、筛选分类、动态头部:http://www.jianshu.com/p/3bf26722c489#
Android开发:Translucent System Bar 的最佳实践:http://www.jianshu.com/p/0acc12c29c1b/comments/1393558
LISTVIEW 获取精确的垂直滚动距离:http://www.2cto.com/kf/201507/416142.html
SparseArray浅析:http://blog.csdn.net/u013493809/article/details/21699121
相关文章推荐
- Android中ScrollView与listView冲突以及ScrollView与listView无法滑动(拖动)解决办法
- android ListView向上滑动隐藏标题,下拉显示标题栏
- android ListView向上滑动隐藏标题,下拉显示标题栏
- android ListView向上滑动隐藏标题,下拉显示标题栏
- 上滑动改变头部,仿支付宝头部变化,解决ScrollView与listView冲突问题
- Android 去掉ScrollView、GridView、ListView向上 滑动时顶部的投影/阴影
- android ListView向上滑动隐藏标题,下拉显示标题栏
- 【Android界面实现】解决ScrollView中嵌套Listview,Listview中嵌套Listview显示不完整和滑动冲突的问题
- 可滑动控件(ListView,WebView,ScrollView)实现弹性滑动或者取消弹性滑动(上下或左右滑动)
- 【Android 动画】随ScrollView滑动头部缩放动画(附demo)
- 解决 ScrollView 嵌套 ListView 时,高度不正常和滑动冲突的问题
- ScrollView和ListView滑动冲突问题
- scrollView和listView的滑动冲突和listView显示不全
- Android ScrollView向上滑动控件顶部悬浮效果实现
- ScrollView中若嵌套有滑动的控件(如:WebView,ListView或GridView)时的焦点问题
- Scrollview中嵌套ViewPager中嵌套ListView 滑动中tab固定顶部ScrollingTricks效果特效
- 解决ScrollView中嵌套Listview,Listview中嵌套Listview显示不完整和滑动冲突的问题
- ScrollView中嵌套ListView与GridView时滑动冲突解决方案
- iOS scrollView设置约束以及不能滑动问题
- 解决ScrollView嵌套viewPager中嵌套listView滑动事件冲突问题(水平方向)