listview上拉隐藏标题与下拉显示标题

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上拉隐藏标题与下拉显示标题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。