仿今日头条下拉出现SearchBar,再下拉刷新效果,SearchListView实现以及原理讲解

本文主要是介绍仿今日头条下拉出现SearchBar,再下拉刷新效果,SearchListView实现以及原理讲解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先看效果

分别是我的效果和今日头条的效果:
这里写图片描述这里写图片描述

以上效果包括:
1.如果下拉的高度超过search view的高度的3/4,但是小于head view高度,则松开手时search view自动出现
2.如果下拉的高度小于search view的高度的1/4,则松开手时search view自动回弹消失
3.如果下拉的高度超过head view的总高度,则松手进行刷新
4.刷新完成自动隐藏search view

实现原理讲解

参考了 github开源项目:[https://github.com/vivian8725118/SearchListView ] 但是这个开源调用listview.setOnItemClickListener的时候,下拉出现search view,下拉刷新都响应了onItemClick,这显然是不对的,我在onTouchEvent的Action_Up中进行了修改,以保证能正确响应点击事件。
提示: 这个效果是基于PullToRefreshListView实现的,如果对下拉刷新listview实现不明白的,可以先看这篇博客[http://blog.csdn.net/u010335298/article/details/51098755]
原理讲解
这里写图片描述
如图,将搜索部分的view放进ListView的头view中,在触摸事件中处理search view 的显示和隐藏。

1.我给listview定义了五种状态

    public static final int STATE_NONE  = 0;public static final int STATE_PULL_TO_SHOW_SEARCH_VIEW  = 1; // 下拉去展示search_viewpublic static final int STATE_PULL_TO_REFRESH = 2; //下拉去刷新public static final int STATE_RELEASE_TO_REFRESH = 3; // 释放进行刷新public static final int STATE_REFRESHING = 4; // 正在刷新

稍微讲解以下这几种状态:
STATE_PULL_TO_SHOW_SEARCH_VIEW 指的是search view出现了一部分但是没有完全出现的时候
STATE_PULL_TO_REFRESH 指的是search view完全出现,但是head view没有完全出现的时候
STATE_RELEASE_TO_REFRESH 指的是head view完全出现的时候

2.添加search view

 private void initHeaderView() {headerView =  View.inflate(getContext(), R.layout.search_header_listview, null);searchContainer = (RelativeLayout) headerView.findViewById(R.id.search_container);headerTv = (TextView) headerView.findViewById(R.id.tvHead);headerView.measure(0, 0); // 系统会帮我们测量出headerView的高度headerHeight = refreshHeight = headerView.getMeasuredHeight();Log.d("zyr", "--------------------headerHeight :" + headerHeight);headerView.setPadding(0, -headerHeight, 0, 0);invalidate();Log.d("zyr", "----------------------headerPaddingTop :" + headerView.getPaddingTop());super.addHeaderView(headerView, null, false);}private void addSearchView() {searchView = LayoutInflater.from(getContext()).inflate(R.layout.search_view, null);RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);searchContainer.addView(searchView , layoutParams);searchContainer.measure(0, 0);searchContainerHeight = searchContainer.getMeasuredHeight();Log.d("zyr", "--------------------searchContainerHeight :" + searchContainerHeight);headerHeight = searchContainerHeight + headerHeight ;headerView.setPadding(0, - headerHeight, 0, 0);invalidate();Log.d("zyr", "--------------------headerHeight :" + headerHeight);Log.d("zyr", "----------------------headerPaddingTop :" + headerView.getPaddingTop());}

3.触摸事件的处理:我详细的写了注释

/***************************    Touch***************************************/@Overridepublic boolean onTouchEvent(MotionEvent ev) {switch (ev.getAction()) {case MotionEvent.ACTION_DOWN :downY = lastMoveY = (int) ev.getY();downX = (int) ev.getX();break;case MotionEvent.ACTION_MOVE :moveY = (int) ev.getY();moveDiff = (moveY - lastMoveY)/2 ;lastMoveY = moveY ;diff = moveY - downY;//计算移动后的paddingTopint paddingTop =   headerView.getPaddingTop() + moveDiff ;// 如果: 第一个可见if(getFirstVisiblePosition() == 0 && Math.abs(diff) > 50){switch (state){case STATE_NONE ://当状态是none的时候,向下拉才做处理if(diff > 0){state = STATE_PULL_TO_SHOW_SEARCH_VIEW;headerView.setPadding(0, paddingTop, 0, 0);Log.d("zyr", "--------------paddingTop:" + paddingTop);return true;}break;case STATE_PULL_TO_SHOW_SEARCH_VIEW:case STATE_PULL_TO_REFRESH:case STATE_RELEASE_TO_REFRESH:if (paddingTop >= 0 ) { // 完全显示了.Log.i("zyr", "ACTION_MOVE 松开刷新");state = STATE_RELEASE_TO_REFRESH;refreshHeaderView();} else if (

这篇关于仿今日头条下拉出现SearchBar,再下拉刷新效果,SearchListView实现以及原理讲解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/980910

相关文章

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu