文章首发:Android程序员日记
作者:贤榆的鱼
测试阅读时间:4min 30s
前言
我先把昨天那篇“”中提到的,我们可以通过这个项目练习到的知识点再列举一下:
listView的基本用法
listView的复用优化
listview添加headerView实现一些布局和功能
listview通过footerview和滚动监听实现上拉加载更多
listview通过触摸监听事件实现上下bar的布局隐藏功能
在昨天的分享当中,我已经分享了前面四点!那么今天我接着分享第五点,不多说先看掘金app本身的动态效果图
正文
续“”
[ 5 ] 通过listview的触摸监听事件,实现头尾bar的布局隐藏
思路:在listView的触摸事件当中,我们判断手触摸滑动大于一定的正值或者小于一定的负值,我们分别对应进行头尾bar的隐藏和显示的属性动画!
Step 0:先展示一下整体的布局
处理技巧:为了能够在隐藏之后全屏都是listview那么我们需要用RelativeLayout作为根布局,让listview在底层,头尾bar在上层!同时为了不让headbar遮挡住headerView的内容,所以我们再做添加一块headbar高度的空白view!
Step 1:从xml中实例化头尾bar
mBottom_bar = (LinearLayout) findViewById(R.id.bottom_bar); mHead_bar = (LinearLayout) findViewById(R.id.head_bar);
Step 2:实现listview的触摸事件:
mlistView.setOnTouchListener(new View.OnTouchListener() { private float mEndY; private float mStartY; private int direction;//0表示向上,1表示向下 @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()){ case MotionEvent.ACTION_DOWN: mStartY = event.getY(); break; case MotionEvent.ACTION_MOVE: mEndY = event.getY(); float v1 = mEndY - mStartY; if (v1 > 3 && !isRunning&& direction == 1) { direction = 0; showBar(); mStartY = mEndY; return false; } else if (v1 < -3 && !isRunning && direction == 0) { direction = 1; hideBar(); mStartY = mEndY; return false; } mStartY = mEndY; break; case MotionEvent.ACTION_UP: break; } return false; } });//隐藏头尾bar的方法(这里我们用的是属性动画)public void hideBar() { mHeaderAnimator = ObjectAnimator.ofFloat(mHead_bar, "translationY", -mHead_bar.getHeight()); mBottomAnimator = ObjectAnimator.ofFloat(mBottom_bar, "translationY", mBottom_bar.getHeight()); mHeaderAnimator.setDuration(300).start(); mBottomAnimator.setDuration(300).start(); mHeaderAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationStart(Animator animation) { super.onAnimationStart(animation); isRunning = true; } @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); isRunning = false; } });}//显示头尾bar的方法public void showBar() { mHeaderAnimator = ObjectAnimator.ofFloat(mHead_bar, "translationY", 0); mBottomAnimator = ObjectAnimator.ofFloat(mBottom_bar, "translationY", 0); mHeaderAnimator.setDuration(300).start(); mBottomAnimator.setDuration(300).start();}
注:
这里我再一次使用了标识符的手法,
第一个是通过改变isRunning的状态来判断动画是结束!否则在快速滑动时,我们动画会有卡顿的现象!第二个是通过direction标识符,来判断滑动的方向,这样也是为了保证在向同一个方向上产生触摸滑动时,不会因为每一小段距离的滑动就调用一次动画从而导致动画不顺畅!大家如果想看一下这两个标志符是怎样影响效果的,那么可clone一下代码然后自己把值替换掉试试看!老规矩最后看一下我们仿掘金的效果图:
该项目的github地址:
后记
如果大家觉得还不错的可以把github上面的代码download下来看一下!如果是新手或初学者也可以自己敲一下!这个Demo中基本含盖了listview大多数常用内容的操作!另外这个Demo中还有别的一些东西是可以分享的。比如带波纹效果的button,比如关于SwipeRefreshLayout实现下拉刷新的使用等等!这些都会在接下来的时间一一和大家分享!另外,这个仿掘金app实现了这一个页面,其他的点击事件什么都还没有做!不过,我会持续更新它的!
现在,我越来越觉得实操是学习和探索一项技能最好的方式,书写是总结和梳理或者用我们的术语是“抽象”我们实操内容最好的方法!希望这两句话也能帮助到大家!