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

eechen 发布于2019-06-25 10:42 / 2326人阅读

摘要：文章首发程序员日记作者贤榆的鱼测试阅读时间前言我先把昨天那篇仿掘金框架之全解一中提到的，我们可以通过这个项目练习到的知识点再列举一下的基本用法的复用优化添加实现一些布局和功能通过和滚动监听实现上拉加载更多通过触摸监听事件实现上下的布局隐藏功

文章首发：Android程序员日记

作者：贤榆的鱼

测试阅读时间：4min 30s

前言

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

listView的基本用法

listView的复用优化

listview添加headerView实现一些布局和功能

listview通过footerview和滚动监听实现上拉加载更多

listview通过触摸监听事件实现上下bar的布局隐藏功能

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

正文

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

[ 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地址：https://github.com/luorenyu/JuejinMoudel.git

后记

如果大家觉得还不错的可以把github上面的代码download下来看一下！如果是新手或初学者也可以自己敲一下！这个Demo中基本含盖了listview大多数常用内容的操作！另外这个Demo中还有别的一些东西是可以分享的。比如带波纹效果的button，比如关于SwipeRefreshLayout实现下拉刷新的使用等等！这些都会在接下来的时间一一和大家分享！另外，这个仿掘金app实现了这一个页面，其他的点击事件什么都还没有做！不过，我会持续更新它的！
现在，我越来越觉得实操是学习和探索一项技能最好的方式，书写是总结和梳理或者用我们的术语是“抽象”我们实操内容最好的方法！希望这两句话也能帮助到大家！

专线服务混合云超全解大数据技术全解掘金掘金社区

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/13135.html

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

摘要：当设为时，将不会在各个之间绘制默认为。当然这次仿掘金的用了实现了下拉刷新，后面会针对这个写一篇的大家也别急而这个中依然也用到了。 showImg(https://segmentfault.com/img/remote/1460000006788254); 文章首发：Android程序员日记作者：贤榆的鱼测试阅读时间：8min 前言有有很长一段时间没有更新了，这次给大家带来了一...

Acceml 2019-06-25 10:42 评论0 收藏0
界面工具 - 收藏集 - 掘金

摘要：上列表左右滑动开源组件掘金是一款用于为上的排布提供左滑右滑操作的库。这里我贴出最终的兼容方案教你用两层嵌套实现三级展示界面掘金最近项目中使用一个三级展示列表，要求第一级和第二季都可以折叠，并有不同的图标变换，第三层展示数据，可点击。八年 Android 开发，看我如何简化 Android 的 UI 开发！ - Android - 掘金作者 : Super Mary 校对者: Zhao...

wuaiqiu 2019-06-25 11:16 评论0 收藏0
第三方控件 - 收藏集 - 掘金

摘要：首先去掉的位置，指定主题输入法遮挡问题的解决思路掘金可分组的掘金今天给大家介绍的是一个可以实现数据分组显示的。该项目使用的是一款仿外卖订单进度的开源控件掘金一款仿外卖订单状态的开源控件，支持自定义文字，颜色，字体大小等功能显示效果 RecyclerView之ItemDecoration - 掘金本文已授权微信公众号：鸿洋（hongyangAndroid）原创首发。一、简述说到Rec...

zhkai 2019-06-25 11:14 评论0 收藏0
博客 - 收藏集 - 掘金

摘要：技术之类加载机制掘金类加载机制是语言的一大亮点，使得类可以被动态加载到虚拟机中。玩转仿探探卡片式滑动效果掘金讲起本篇博客的历史起源，估计有一段历史了。 Java 技术之类加载机制 - Android - 掘金类加载机制是 Java 语言的一大亮点，使得 Java 类可以被动态加载到 Java 虚拟机中。这次我们抛开术语和概念，从例子入手，由浅入深地讲解 Java 的类加载机制。本文...

Shimmer 2019-08-16 10:35 评论0 收藏0
博客 - 收藏集 - 掘金

摘要：技术之类加载机制掘金类加载机制是语言的一大亮点，使得类可以被动态加载到虚拟机中。玩转仿探探卡片式滑动效果掘金讲起本篇博客的历史起源，估计有一段历史了。 Java 技术之类加载机制 - Android - 掘金类加载机制是 Java 语言的一大亮点，使得 Java 类可以被动态加载到 Java 虚拟机中。这次我们抛开术语和概念，从例子入手，由浅入深地讲解 Java 的类加载机制。本文...

The question 2019-06-25 11:15 评论0 收藏0