仿掘金框架之listview全解（二）
2016-09-02 本文已影响592人
贤榆的榆
仿掘金框架之listview全解（二）.jpg
文章首发：Android程序员日记
作者：贤榆的鱼
测试阅读时间：4min 30s
前言
我先把昨天那篇“仿掘金框架之listview全解（一）”中提到的，我们可以通过这个项目练习到的知识点再列举一下：
- listView的基本用法
- listView的复用优化
- listview添加headerView实现一些布局和功能
- listview通过footerview和滚动监听实现上拉加载更多
- listview通过触摸监听事件实现上下bar的布局隐藏功能
在昨天的分享当中，我已经分享了前面四点！那么今天我接着分享第五点，不多说先看掘金app本身的动态效果图
正文
[ 5 ] 通过listview的触摸监听事件，实现头尾bar的布局隐藏
思路：在listView的触摸事件当中，我们判断手触摸滑动大于一定的正值或者小于一定的负值，我们分别对应进行头尾bar的隐藏和显示的属性动画！
Step 0：先展示一下整体的布局
处理技巧：为了能够在隐藏之后全屏都是listview那么我们需要用RelativeLayout作为根布局，让listview在底层，头尾bar在上层！同时为了不让headbar遮挡住headerView的内容，所以我们再做添加一块headbar高度的空白view！
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.timen4.ronnny.JueJinModel.MainActivity">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/sr_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ListView
android:scrollbars="vertical"
android:fadingEdge="vertical"
android:overScrollMode="never"
android:dividerHeight="0.5dp"
android:divider="#05999999"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_alignParentTop="true" />
<Button
android:clickable="true"
android:visibility="gone"
android:id="@+id/empty_fresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="暂无数据点击刷新"
android:textSize="40sp"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:visibility="visible"
android:clickable="true"
android:background="#0280FC"
android:gravity="center_vertical"
android:id="@+id/head_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<Button
android:drawableLeft="@drawable/tab_home_find_search"
android:paddingLeft="8dp"
android:drawablePadding="8dp"
android:layout_margin="7dp"
android:background="@drawable/search_button_selector"
android:textColor="#99ffffff"
android:text="@string/search"
android:gravity="left|center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:gravity="bottom"
android:background="@drawable/shadow_bottom"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="51dp">
<ImageButton
android:id="@+id/ib_home"
android:src="@drawable/tab_home_selector"
style="@style/BottomButtonTheme"
/>
<ImageButton
android:id="@+id/ib_explore"
android:src="@drawable/tab_explore_selector"
style="@style/BottomButtonTheme" />
<ImageButton
android:id="@+id/ib_notifications"
android:src="@drawable/tab_notificaions_selector"
style="@style/BottomButtonTheme"
/>
<ImageButton
android:id="@+id/ib_profile"
android:src="@drawable/tab_profile_selector"
style="@style/BottomButtonTheme"
/>
</LinearLayout>
</RelativeLayout>
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地址：https://github.com/luorenyu/JuejinMoudel.git
后记
如果大家觉得还不错的可以把github上面的代码download下来看一下！如果是新手或初学者也可以自己敲一下！这个Demo中基本含盖了listview大多数常用内容的操作！另外这个Demo中还有别的一些东西是可以分享的。比如带波纹效果的button，比如关于SwipeRefreshLayout实现下拉刷新的使用等等！这些都会在接下来的时间一一和大家分享！另外，这个仿掘金app实现了这一个页面，其他的点击事件什么都还没有做！不过，我会持续更新它的！
现在，我越来越觉得实操是学习和探索一项技能最好的方式，书写是总结和梳理或者用我们的术语是“抽象”我们实操内容最好的方法！希望这两句话也能帮助到大家！
