滑动效果——ListView 滑动中标题固定&标题缩放效果
2015-03-27 11:12
686 查看
转载请注明出处,谢谢~~
这是向上滑动固定组标题的效果:
这是根据滑动缩放的效果:
首先看看固定标题的效果
这里的图片和测试条目是listview的两个head:
然后这个activity实现了OnScrollListener,在复写方法里,我们获取了第二个测试head的top:
根据这个head的top值和第一个显示的position,我们控制了RelativeLayout里面的隐藏head的显示与否。这样就简易的实现了这个固定标题的效果。注意点是,这里的getTop方法是获取的当前控件相对于它父控件的top,如果你在TextView外面包了一层LinearLayout,那么你就需要获取这个LinearLayout的getTop,否则获取TextView的getTop永远都是一个值。
下面再看下随手指缩放这个效果,首先我们需要知道一个原始的scale,这个scale*getTop()的值应该为1,然后当getTop()为0 的时候,他们的乘积也为0,这就实现了一个从0-1的缩放,而当getTop()小于0的时候,我们便不需要继续缩放了(或者根据需求做其他的效果)。
首先看下如何获取这个初始的scale:
这应该很熟悉吧,但是用的比较少吧,对,在界面未画完的时候如何获取控件的某些属性,就是可以用这个方法。在这里我们是在onResume方法里,获取了getTop的值,然后用1(scale的初始值设为1)除以我们获取的值,就是scale的初始值,这样就保证了初始值*getTop的值为1,即刚开始不缩放,然后随手指移动缩放。注意这里需要将scale定义为float,否则得到的结果将只有0。
然后再看在滑动监听里我们的设置:
这里我们需要随着手指滑动不断的获取top值,然后让tv根据这个top*scale的值进行缩放。这样就成功的完成了一个随手指移动而缩放的view。
Demo下载地址
概述
今天说一个比较简单的效果,很多应用都用到了这个效果,其实实现思路蛮简单的。就是Listview在滑动过程中,它的头上有一个往上滑能固定,往下滑能随listview移动的头,或者是根据滑动缩放大小。这篇文章的实现比较简单,但是很多复杂效果的实现思路也是这样,类似比较时髦的,pulltozoomlistview,也是根据滑动计算一个缩放的scale,不多说了,我们看下效果图。这是向上滑动固定组标题的效果:
这是根据滑动缩放的效果:
首先看看固定标题的效果
这里的图片和测试条目是listview的两个head:
View view = LayoutInflater.from(this).inflate(R.layout.lv_test, null); View view2 = LayoutInflater.from(this).inflate(R.layout.item, null); lv_test.addHeaderView(view); lv_test.addHeaderView(view2);
然后这个activity实现了OnScrollListener,在复写方法里,我们获取了第二个测试head的top:
@Override public void onScrollStateChanged(AbsListView view, int scrollState) { } @SuppressLint("NewApi") @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { int top2 = ll_tt.getTop(); if (top2 <= 0 || firstVisibleItem >= 1 ) { tv_shadow.setVisibility(View.VISIBLE); }else { tv_shadow.setVisibility(View.INVISIBLE); } }
根据这个head的top值和第一个显示的position,我们控制了RelativeLayout里面的隐藏head的显示与否。这样就简易的实现了这个固定标题的效果。注意点是,这里的getTop方法是获取的当前控件相对于它父控件的top,如果你在TextView外面包了一层LinearLayout,那么你就需要获取这个LinearLayout的getTop,否则获取TextView的getTop永远都是一个值。
下面再看下随手指缩放这个效果,首先我们需要知道一个原始的scale,这个scale*getTop()的值应该为1,然后当getTop()为0 的时候,他们的乘积也为0,这就实现了一个从0-1的缩放,而当getTop()小于0的时候,我们便不需要继续缩放了(或者根据需求做其他的效果)。
首先看下如何获取这个初始的scale:
@SuppressLint("NewApi") @Override protected void onResume() { super.onResume(); ViewTreeObserver vto = ll_tt.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { ll_tt.getViewTreeObserver().removeOnGlobalLayoutListener(this); top = ll_tt.getTop(); scale = (float) scale / (float) top; System.out.println("scale : " + scale); } }); }
这应该很熟悉吧,但是用的比较少吧,对,在界面未画完的时候如何获取控件的某些属性,就是可以用这个方法。在这里我们是在onResume方法里,获取了getTop的值,然后用1(scale的初始值设为1)除以我们获取的值,就是scale的初始值,这样就保证了初始值*getTop的值为1,即刚开始不缩放,然后随手指移动缩放。注意这里需要将scale定义为float,否则得到的结果将只有0。
然后再看在滑动监听里我们的设置:
@SuppressLint("NewApi") @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { int top2 = ll_tt.getTop(); if (top2 >= 0) { tv.setScaleX(top2 * scale); tv.setScaleY(top2 * scale); } }
这里我们需要随着手指滑动不断的获取top值,然后让tv根据这个top*scale的值进行缩放。这样就成功的完成了一个随手指移动而缩放的view。
Demo下载地址
相关文章推荐
- 分组的listView滑动中固定组标题
- Android: listview 分组上滑标题碰撞效果,固定标题效果,仿QQ微信
- Android 自定义listview滑到顶部标题固定 轻松实现360软件详情页效果
- Scrollview中嵌套ViewPager中嵌套ListView 滑动中tab固定顶部ScrollingTricks效果特效
- PinnedSectionListView:(固定部分的ListView)分组的listView滑动中固定组标题的实现
- listview 顶部添加tabhost,list滑动时tabhost可以悬浮、缩放的效果
- PinnedSectionListView:分组的listView滑动中固定组标题的实现
- PinnedSectionListView:分组的listView滑动中固定组标题的实现
- Android Listview分组特效:滑动分组标题当前固定,并随内容滑动(andrroid原生电话本实现方法)
- PinnedSectionListView:分组的listView滑动中固定组标题的实现
- Scrollview中嵌套ViewPager中嵌套ListView 滑动中tab固定顶部ScrollingTricks效果特效
- ListView定焦&滑动效果
- Android实战简易教程<十四>(介绍SwipeMenuListView-简单实现类似QQ的滑动删除效果)
- 通过重写ScrollView和Listview完成上下滑动选中不同位置标题的效果
- JQ实现效果:滑动隐藏&滑动显示
- android 中如何实现listview向左边滑动跟微信删除好友一样的效果?
- ScrollView+ListView滚动冲突,没有滑动效果 解决办法
- Anddroid ExpandableListView 实现父Item悬浮在顶部不动,子Item滑动显示,直到下一个父Item滑动到顶部的效果
- ListView 实现带有Filpper效果的左右滑动删除 Item
- Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果