神奇的listView实现自动显示隐藏布局Android代码

借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果。

1.自动显示隐藏Toolbar

首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡。

View header=new View(this);
 header.setLayoutParams(new AbsListView.LayoutParams(
  AbsListView.LayoutParams.MATCH_PARENT,
  (int)getResources().getDimension(R.dimen.abc_action_bar_default_height_material)));
 mListView.addHeaderView(header);

//R.dimen.abc_action_bar_default_height_material为系统ActionBar的高度

定义一个mTouchSlop变量,获取系统认为的最低滑动距离

代码如下:

mTouchSlop=ViewConfiguration.get(this).getScaledTouchSlop();//系统认为的最低滑动距离

判断滑动事件

bbsListView.setOnTouchListener(new OnTouchListener() {

   @Override
   public boolean onTouch(View v, MotionEvent event) {
     switch (event.getAction())
    {
    case MotionEvent.ACTION_DOWN:
     mFirstY=event.getY();
     break;
    case MotionEvent.ACTION_MOVE:
     mCurrentY=event.getY();
     if(mCurrentY-mFirstY>mTouchSlop)
      direction=0; //listView向下滑动
     else if(mFirstY-mCurrentY>mTouchSlop)
      direction=1; //listView向上滑动
     if(direction==1)
     {
      if(mShow)
      {
       toolbarAnim(1); //隐藏上方的view
       mShow=!mShow;
      }
     }
     else if(direction==0)
     {
      if(!mShow)
      {
       toolbarAnim(0); //展示上方的view
       mShow=!mShow;
      }
     }
    case MotionEvent.ACTION_UP:
     break;
    }
    return false;
   }
  });
 }

属性动画

protected void toolbarAnim(int flag)
 {

  if(set!=null && set.isRunning())
  {
   set.cancel();
  }
  if(flag==0)
  {

   mAnimator1=ObjectAnimator.ofFloat(mToolbar,
     "translationY", linearView.getTranslationY(),0);
   mAnimator2=ObjectAnimator.ofFloat(mToolbar, "alpha", 0f,1f);
  }
  else if(flag==1)
  {

   mAnimator1=ObjectAnimator.ofFloat(mToolbar,
     "translationY", linearView.getTranslationY(),-linearView.getHeight());
   mAnimator2=ObjectAnimator.ofFloat(mToolbar, "alpha", 1f,0f);

  }
  set=new AnimatorSet();
  set.playTogether(mAnimator1,mAnimator2);
  set.start();

}

//上面为位移还有透明度属性动画

使用的时候theme要用NoActionBar的,不然会引起冲突。同时引入编译

dependencies{
   compile fileTree(include:['*.jar'],dir:'libs')
   compile 'com.android.support:appcompat-v7:21.0.3'
 }

2.当要隐藏和显示的组件不是toolbar,而是我们自定义的布局myView时,需要注意一些点,
(1) 布局要用相对布局,让我们自定义的布局悬浮在listView上方。
(2)避免第一个Item被myView遮挡,给listView增加一个HeaderView,此时需要测量myView的高度,要用下面这种方法,把任务post到UI线程中,不然执行会出错。

final View header=new View(this); //给listView增加一个headView,避免第一个item被遮挡 header.post(new Runnable() {
 public void run() {
     header.setLayoutParams(new AbsListView.LayoutParams(            AbsListView.LayoutParams.MATCH_PARENT, myView.getHeight()));
   }
  });

其他的与toolbar一样

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据

    大家先看第一个例子显示: 这个界面相信大家都看到过的,这次比上一个例子多的是ListView 的每一项绑定的是不再是单纯的一个字符串了,ListView 的每一个条目我们需要显示两个信息,编号和姓名.可以看到,我们绑定了十条数据,用了一个for 循环,每一条绑定的时候创建一个HashMap,然后往里面放数据,放的数据有相对应的key, 即id,name,到时候我们取数据的时候就根据这个key 找到我们放进去的数据,有点类似与键值对的意思,不知道这样解释大家明白不明白. 贴上源代码,然后接下来讲解

  • WPF的ListView控件自定义布局用法实例

    本文实例讲述了WPF的ListView控件自定义布局用法.分享给大家供大家参考,具体如下: 概要: 以源码的形式贴出,免得忘记后,再到网上查资料.在VS2008+SP1环境下调试通过 引用的GrayscaleEffect模块,可根据参考资料<Grayscale Effect...>中的位置下载. 正文: 如何布局是在App.xaml中定义源码如下 <Application x:Class="CWebsSynAssistant.App" xmlns="http

  • Android中ListView Item布局优化技巧

    本文实例讲述了Android中ListView Item布局优化技巧.分享给大家供大家参考,具体如下: 之前一直都不知道ListView有多种布局的优化方法,只能通过隐藏来实现,自己也知道效率肯定是很低的,但是也不知道有什么方法,这些天又查了一些资料,然后知道 其实google早就帮我们想好了优化方案了. 假设你的ListView Item有三种布局样式的可能:就比如很简单的显示一行字,要靠左,居中,靠右. 这时我们就可以在BaseAdapter里面重写两个方法: private static

  • Android App界面的ListView布局实战演练

    一.继承listActivity.使用arrayAdapter 使用ListView和arrayAdapter布局,是ListView布局中最为简单的一种,首先我们会建立一个组件用来显示数据,例如main.xml <?xml version="1.0" encoding="utf-8"?> <!-- 主界面本身就是一个显示组件 --> <TextView xmlns:android="http://schemas.androi

  • Android实现的ListView分组布局改进示例

    本文实例讲述了Android实现的ListView分组布局改进方法.分享给大家供大家参考,具体如下: 由于是在网上转载的一篇文章,在这里就不多说废话了,首先看一下最终的效果图: 然后是实现该ListView布局的主要代码: 1.程序主界面 SeparateListView.java package whu.iss.wuxianglong; import java.util.ArrayList; import java.util.List; import android.app.Activity;

  • Android ListView自动显示隐藏布局的实现方法

    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示隐藏Toolbar 首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡. View header=new View(this); header.setLayoutParams(new AbsListView.LayoutParams( AbsListView.

  • 神奇的listView实现自动显示隐藏布局Android代码

    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示隐藏Toolbar 首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡. View header=new View(this); header.setLayoutParams(new AbsListView.LayoutParams( AbsListView.

  • flex tree自动显示横向滚动条实现代码

    复制代码 代码如下: package com.anydata.consumer.components { import flash.events.Event; import mx.controls.Tree; import mx.core.ScrollPolicy; import mx.core.mx_internal; /** * 自动显示横向滚动条 */ public class AutoSizeTree extends Tree { public function AutoSizeTree

  • jQuery 网易相册鼠标移动显示隐藏效果实现代码

    其实主要是jquery 层选择器的应用,jquery 高手可以跳过... 网易相册效果图如下:当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏,此效果在web开发中经常会用到.故总结一下 直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • 用jQuery实现一些导航条切换,显示隐藏的实例代码

    代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>导航条在项目中的应用</title>    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2

  • Jquery中显示隐藏的实现代码分析

    $("#id").show()//表示display:block, $("#id").hide()//表示display:none; $("#id").toggle()//切换元素的可见状态.如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. $("#id").css('display','none'); $("#id").css('display','block'); //或 $("

  • Bootstrap显示与隐藏简单实现代码

    本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • JavaScript实现下拉菜单的显示隐藏

    本文实例为大家分享了JavaScript实现下拉菜单显示隐藏的具体代码,供大家参考,具体内容如下 有时需要这种页面效果: 鼠标移动到元素上面时,实现下拉菜单 鼠标移开元素后,下拉菜单不见了 实现思路 1.一个盒子里包含上下两部分,下面部分为子菜单,先设置为隐藏:display: none; 2.当鼠标移动到盒子上:触发事件- - -onmouseover ,js设置下面部分子菜单的display值为- - -block,使子菜单显示 3.鼠标移开盒子:触发事件- - -onmouseout ,j

  • vue实现动态控制表格列的显示隐藏

    本文实例为大家分享了vue实现动态控制表格列显示隐藏的具体代码,供大家参考,具体内容如下 一.效果 如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对应列显示和隐藏 二.代码 1.HTML部分 <template>   <div id="app">     <el-table :data="tableData" border style="width: 100%" ref="t

随机推荐