仿掘金框架之listview全解（二）

时间 2020-04-04

标签框架 listview 繁體版

原文原文链接

文章首发：Android程序员日记javascript

做者：贤榆的鱼java

测试阅读时间：4min 30sandroid

前言

我先把昨天那篇“仿掘金框架之listview全解（一）”中提到的，咱们能够经过这个项目练习到的知识点再列举一下：git

listView的基本用法程序员
listView的复用优化github
listview添加headerView实现一些布局和功能segmentfault
listview经过footerview和滚动监听实现上拉加载更多app
listview经过触摸监听事件实现上下bar的布局隐藏功能框架

在昨天的分享当中，我已经分享了前面四点！那么今天我接着分享第五点，很少说先看掘金app自己的动态效果图ide

正文

续“仿掘金框架之listview全解（一）”

[ 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实现了这一个页面，其余的点击事件什么都尚未作！不过，我会持续更新它的！如今，我愈来愈以为实操是学习和探索一项技能最好的方式，书写是总结和梳理或者用咱们的术语是“抽象”咱们实操内容最好的方法！但愿这两句话也能帮助到你们！