2019独角兽企业重金招聘Python工程师标准>>>

这个功能非常普遍了,主要是用户在下拉列表的时候,隐藏标题来扩大用户浏览列表的范围

本方法的设计思路是在列表上覆盖标题栏,然后当列表滑到顶部的时候,在列表的顶部设置一个padding控件来占和标题一样的高度,防止列表顶部被标题覆盖,当列表往下滑动的时候,通过动画隐藏标题,只要列表的第一个item不可视,就把padding控件给隐藏掉,这样达到列表填充整个屏幕的效果

先看布局

<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:animateLayoutChanges="true"tools:context="com.example.showhidetitlelistview.MainActivity" ><Viewandroid:id="@+id/padding"android:layout_width="match_parent"android:layout_height="@dimen/title_height" /><ListViewandroid:id="@+id/listview"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/padding"android:background="#F4F1F1" ></ListView><LinearLayoutandroid:id="@+id/titleLayout"android:layout_width="match_parent"android:layout_height="@dimen/title_height"android:background="@android:color/white"android:orientation="horizontal" ><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:text="标题" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:text="标题" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:text="标题" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:text="标题" /></LinearLayout></RelativeLayout>

listview在padding下方,而标题是在屏幕上方,覆盖所有控件

值得注意的是在根布局中设置的动画属性

android:animateLayoutChanges="true"

原因是设置padding控件消失会出现的时候,产生动画的效果,但是padding本身是透明的,所以我不关心它的效果如何(实际上,系统会给它一个淡入淡出的效果),我关心的是这个动画是占用一定时间的,列表在调整自身位置的时候,也会产生向上滑动的效果。网上有一些方法是通过设置根布局paddingtop属性,这个方法在调用的时候,listview会瞬间调整好当前的位置,导致屏幕闪了一下,如果用户缓缓向下滑动不松手的话,滑动某个位置触发了setpadding方法,屏幕会一直闪啊坑爹!

接着看代码

/*** 由于标题是覆盖在列表上面的,需要设置一个padding来防止列表被标题被覆盖*/public void setPadding() {padding.setVisibility(View.VISIBLE);}/*** 当列表往下滑动的时候,标题隐藏了,为了调整列表的高度使其填充整个屏幕,只需要去除padding控件即可* 之前使用设置跟布局padding的方法,交互不友好,会闪屏,所以采取隐藏padding控件和根布局动画属性的方法*/public void reMovePadding() {padding.setVisibility(View.GONE);}
/*** 隐藏标题,通过属性动画实现,和补间动画相比,属性动画真实改变了控件的位置,补间动画只是障眼法* 个人比较嫌弃补间动画*/private boolean isTitleMenuOpen=true;private int titleMenuHeight;public void hideTitle() {if (isTitleMenuOpen) {ObjectAnimator.ofFloat(titleLayout, "translationY", 0.0F,-titleMenuHeight).setDuration(300).start();isTitleMenuOpen = false;}}/*** 显示标题*/public void showTitle() {if (!isTitleMenuOpen) {ObjectAnimator.ofFloat(titleLayout, "translationY", -titleMenuHeight,0.0F).setDuration(300).start();isTitleMenuOpen = true;}}

在这里,细心的人就会发现,为什么我不把设置padding控件和标题动画放在同一个方法里面呢?

这是因为他们的调用时机是有很大差别的,只有滑动的时候在执行标题动画,设置padding控件属性只能是列表第一个item可视的时候设置

不然每次滑动都调整padding,列表会莫名的滑动标题高度的距离,用户会崩溃的

下面是核心代码:

/*** 列表的滑动监听,关键在于监听列表是否滑动到顶部,如果是,就把padding控件显示出来,防止标题覆盖列表* 其他情况下,隐藏padding,达到列表填充整个屏幕的效果* 千万要记住,padding的出现和隐藏都会让列表的位置发生调整,这样给用户的体验很差,所以不要频繁调用setpadding和removepadding方法*/private boolean isFirstVisiable=true;private OnScrollListener myOnScrollListener=new OnScrollListener() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {// TODO Auto-generated method stub}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {// TODO Auto-generated method stubif (firstVisibleItem == 0) {setPadding();showTitle();isFirstVisiable=true;} else {reMovePadding();isFirstVisiable=false;}}};
/*** 判断滑动方向,如果方向向上并且第一个item不可视,就隐藏标题* 为什么要判断第一个标题不可视呢,因为第一个标题可视是设置padding控件显示的关键,*/private float y_tmp1, y_tmp2;@Overridepublic boolean onTouch(View v, MotionEvent event) {// 获取当前坐标float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:y_tmp1 = y;break;case MotionEvent.ACTION_MOVE:y_tmp2 = y;if (y_tmp1 != 0 && y_tmp2 != 0) {if (y_tmp1 - y_tmp2 > 8&&! isFirstVisiable ) {// 向上滑动隐藏标题和导航栏hideTitle();Log.i("scolling", "向上滑动");}if (y_tmp2 - y_tmp1 > 8) {// 向下滑动显示标题和导航栏showTitle();Log.i("scolling", "向下滑动");}}break;}return false;}

在onCreate方法里面的一些初始化操作

@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mContext = this;initData();padding=findViewById(R.id.padding);titleLayout=findViewById(R.id.titleLayout);titleMenuHeight=getResources().getDimensionPixelSize(R.dimen.title_height);listview = (ListView) findViewById(R.id.listview);listview.addHeaderView(View.inflate(mContext, R.layout.item_blank, null));listview.setAdapter(new Myadapter());listview.setOnTouchListener(this);listview.setOnScrollListener(myOnScrollListener);}

以上操作基本实现了本博文题目的功能,但是有个问题,实际项目中,listview的item可能会很大,高度超过100dp的,当第一个item可视的时候,向上滑动,标题隐藏了,padding却不隐藏起来,因为它只有第一个item不可视的时候才隐藏啊,这就尴尬了。之前的东西就白看了呢!不用灰心!既然只要第一个可视的item不可视,padding就能隐藏起来对吧,那我来个瞒天过海,通过插入一个空白的头部就好了,并且这个头部很窄,只有1dp,只要手一滑动,基本就能把这个头部给划走,列表自然会填充整个屏幕;同理,当列表向下滑动的时候,只要这个很窄的头部出现,padding控件就会出现,列表的位置也调整过来了。这是比较取巧的地方!!!

源码:

http://pan.baidu.com/s/1c2Ntkas

转载于:https://my.oschina.net/carbenson/blog/725972

listview上拉隐藏标题与下拉显示标题相关推荐

  1. ListView上拉加载和下拉刷新多种实现方式

    ListView上拉加载和下拉刷新多种实现方式 该篇为ListView下拉刷新和上拉加载实现的各种方法大合集.可能在具体的细节逻辑上处理不太到位,但基本上完成逻辑的实现.细节方面,个人可以根据自己的需 ...

  2. 微信小程序/网页/app/android等各种bar图标导航图标文章图标标题图标下拉/检索收藏上传客服等图标整理

    在做微信小程序的时候,需要给底部放置图标.但是找了好久都没有找到自己想要的,适合的.后来我就把所有的小程序的图标都看了下.后来想想还是整理出来,方便自己以后用,也方便大家一下.我敢保证有你想要的,适合 ...

  3. android listview下拉动画效果,Android开发中利用ListView实现一个渐变式的下拉刷新动画...

    Android开发中利用ListView实现一个渐变式的下拉刷新动画 发布时间:2020-11-23 16:50:31 来源:亿速云 阅读:80 作者:Leah 本篇文章给大家分享的是有关Androi ...

  4. 让你的微信小程序对用户更加友好:上拉加载和下拉刷新就是关键

    前言 上拉加载和下拉刷新是小程序开发的常见需求.本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能,为用户带来更加流畅.便捷的使用体验. 实现效果如下: 实现思路: 1. 首先需要在使用到的 j ...

  5. html5上拉下拉刷新,APP 上拉加载,下拉刷新 介绍

    开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种. 一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新. 1.原生APP 的 上拉加载, ...

  6. 隐藏原生select下拉框的向下箭头▼

    select {appearance: none;/*隐藏原生select下拉框的向下箭头▼*/ }

  7. better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)

    一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...

  8. 小程序上拉加载,下拉刷新

    小程序上拉加载,下拉刷新 data: {collectinformation: null,number: 1,size: 10,isOpenLoading: true,isEmpty: true,is ...

  9. 基于iSroll 5.0实现的上拉加载和下拉刷新插件

    Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...

最新文章

  1. 资深程序员感叹:表妹成绩好却无奈辍学开理发店,月入6万,上大学没用!网友:那是你没用!...
  2. .NET 面试题总结 (附有参考答案) 第2部分
  3. how tomcat works(第17章: 启动Tomcat)
  4. 【跨平台网络抓包神器のtcpdump】ubuntu下编译tcpdump开源抓包工具
  5. 国内经济学硕士 申国外计算机硕士,一个经济硕士留学美国的视角
  6. c语言更新数据,sqlite学习笔记10:C语言中使用sqlite之查询和更新数据
  7. 動態語句的使用方法(exec/sp_executesql)
  8. python 修改array_python 基础_ 数组的 增删改查3
  9. JavaScript 需要清楚的10件事
  10. Redis简介及配置文件介绍
  11. 火星浏览器_Facebook Libra 测试网区块浏览器上线,测试网已被重置2次
  12. wps电脑版_用好WPS这5个远程协同功能,“宅”家办公啥都不耽误,工作全搞定...
  13. Java多线程学习十一:你知道哪几种锁?各有什么特点
  14. Qt-连续容器及迭代器
  15. [转]Java实现定时任务的三种方法
  16. linux系统组成以及运行模式
  17. 基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder
  18. 默纳克系统服务器怎么查故障,默纳克查历史故障
  19. 具有舆论属性或社会动员能力的互联网信息服务安全评估报告指南
  20. 在图片上的文字背景,颜色是黑色?

热门文章

  1. 【驱动笔记9】初探IRP
  2. 小时和分钟的正则表达式
  3. php命名空间 动态 new,PHP命名空间(namespace)的动态访问及使用技巧_php实例
  4. POJ 3461 KMP
  5. hdu4662 简单搜索打表
  6. 【Android 进程保活】提升进程优先级 ( 使用前台 Service 提高应用进程优先级 | 效果展示 | 源码资源 )
  7. 【计算理论】计算复杂性 ( 多项式时间规约 | NP 完全 ★ | 布尔可满足性问题 ) ★
  8. 【集合论】二元关系 ( A 上二元关系 | A 上二元关系示例 )
  9. 【Android FFMPEG 开发】FFMPEG ANativeWindow 原生绘制 ( 设置 ANativeWindow 缓冲区属性 | 获取绘制缓冲区 | 填充数据到缓冲区 | 启动绘制 )
  10. CPU调度(CPU Scheduling)