浅谈ListView滑动隐藏显示ToolBar

引言

在App日益追求体验的时代,优秀的用户体验往往会使产品脱颖而出。今天我们就来介绍一种简单的滑动ListView来显示或者隐藏ToolBar的功能。

布局文件

下面我们来看一下这个主界面的布局文件。在这个布局文件中,主要是一个ListView控件和一个ToolBar控件。布局如下:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6
 7     <ListView
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent"
10         android:background="#f2f2f2"
11         android:divider="#abcdee"
12         android:dividerHeight="1px"
13         android:id="@+id/listView">
14
15     </ListView>
16
17     <!--ToolBar-->
18     <android.support.v7.widget.Toolbar
19         android:layout_width="match_parent"
20         android:layout_height="wrap_content"
21         android:background="#4097e6"
22         android:id="@+id/toolBar">
23
24     </android.support.v7.widget.Toolbar>
25
26 </RelativeLayout>

主界面代码

  实现思路:

  让一个布局显示或者隐藏并且带有动画效果,我们可以通过属性动画来实现。实现这个效果的关键就是监听ListView的各种滑动事件,我们肯定需要借助View的OnTouchListener接口来监听各种状态。注意点:

由于增加了一个ToolBar,我们需要为ListView添加一个HeadView,防止ToolBar挡住ListView的第一个Item。

  下面看代码实现:

  1 package com.research.gong.android_view_research;
  2
  3 import android.animation.ObjectAnimator;
  4 import android.app.Activity;
  5 import android.os.Bundle;
  6 import android.support.v7.widget.Toolbar;
  7 import android.view.MotionEvent;
  8 import android.view.View;
  9 import android.view.ViewConfiguration;
 10 import android.widget.AbsListView;
 11 import android.widget.ArrayAdapter;
 12 import android.widget.ListView;
 13
 14 public class MainActivity extends Activity {
 15
 16     private ListView listView;
 17     String[] datas = {"A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "A10",
 18             "A11", "A12", "A13", "A14", "A15", "A16", "A17", "A18", "A19", "A20"};
 19     private float scaledTouchSlop;
 20     private float firstY = 0;
 21     private Toolbar toolbar;
 22     private ObjectAnimator animtor;
 23
 24     @Override
 25     protected void onCreate(Bundle savedInstanceState) {
 26         super.onCreate(savedInstanceState);
 27         setContentView(R.layout.activity_main);
 28         toolbar = (Toolbar) findViewById(R.id.toolBar);
 29         listView = (ListView) findViewById(R.id.listView);
 30         /**
 31          * 添加一个HeadView避免第一个Item被ToolBar遮挡
 32          * 必须在setAdapter之前进行设置
 33          */
 34         initHeadView();
 35         listView.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, datas));
 36         //判断认为是滑动的最小距离(乘以系数调整滑动灵敏度)
 37         scaledTouchSlop = ViewConfiguration.get(this).getScaledTouchSlop()*3.0f;
 38         /**
 39          * 设置触摸事件
 40          */
 41         listView.setOnTouchListener(new View.OnTouchListener() {
 42             private float currentY;
 43             private int direction=-1;
 44             private boolean mShow = true;
 45
 46             @Override
 47             public boolean onTouch(View v, MotionEvent event) {
 48                 switch (event.getAction()) {
 49                     case MotionEvent.ACTION_DOWN:
 50                         firstY = event.getY();
 51                         break;
 52                     case MotionEvent.ACTION_MOVE:
 53                         currentY = event.getY();
 54                         //向下滑动
 55                         if (currentY - firstY > scaledTouchSlop) {
 56                             direction = 0;
 57                         }
 58                         //向上滑动
 59                         else if (firstY - currentY > scaledTouchSlop) {
 60                             direction = 1;
 61                         }
 62                         //如果是向上滑动,并且ToolBar是显示的,就隐藏ToolBar
 63                         if (direction == 1) {
 64                             if (mShow) {
 65                                 toobarAnim(1);
 66                                 mShow = !mShow;
 67                             }
 68                         } else if (direction == 0) {
 69                             if (!mShow) {
 70                                 toobarAnim(0);
 71                                 mShow = !mShow;
 72                             }
 73                         }
 74                         break;
 75                     case MotionEvent.ACTION_UP:
 76                         break;
 77                 }
 78                 return false;//注意此处不能返回true,因为如果返回true,onTouchEvent就无法执行,导致的后果是ListView无法滑动
 79             }
 80         });
 81     }
 82
 83
 84     /**
 85      * 设置头布局,注意:这个头布局的高度要和ToolBar的高度一致
 86      */
 87     public void initHeadView() {
 88         View view = new View(this);
 89         //abc_action_bar_default_height_material获取系统ActionBar的高度
 90         AbsListView.LayoutParams params = new AbsListView.LayoutParams
 91                 (AbsListView.LayoutParams.MATCH_PARENT,
 92                         (int) getResources().getDimension(R.dimen.abc_action_bar_default_height_material));
 93         view.setLayoutParams(params);
 94         listView.addHeaderView(view);
 95     }
 96
 97     /**
 98      * ToolBar显示隐藏动画
 99      * @param direction
100      */
101     public void toobarAnim(int direction) {
102         //开始新的动画之前要先取消以前的动画
103         if (animtor != null && animtor.isRunning()) {
104             animtor.cancel();
105         }
106         //toolbar.getTranslationY()获取的是Toolbar距离自己顶部的距离
107         float translationY=toolbar.getTranslationY();
108         if (direction == 0) {
109             animtor = ObjectAnimator.ofFloat(toolbar, "translationY", translationY, 0);
110         } else if (direction == 1) {
111             animtor = ObjectAnimator.ofFloat(toolbar, "translationY", translationY, -toolbar.getHeight());
112         }
113         animtor.start();
114     }
115 }

  相信代码中注释已经解释的很详细了。唯一需要注意的是:scaledTouchSlop值默认获取的是Android系统能识别的最小滑动距离。我们通过乘以相关系数,可以适当的调整滑动的灵敏度。

时间: 2024-10-10 16:06:16

浅谈ListView滑动隐藏显示ToolBar的相关文章

安卓开发_浅谈ListView(自定义适配器)

ListView作为一个实际开发中使用率非常高的视图,一般的系统自带的适配器都无法满足开发中的需求,这时候就需要开发人员来自定义适配器使得ListView能够有一个不错的显示效果 有这样一个Demo ,实现图片文字混合列表 1 package com.example.work; 2 3 import java.util.ArrayList; 4 import java.util.HashMap; 5 import java.util.List; 6 7 8 import android.R.in

Android 仿QQ浏览器WebView,滑动隐藏显示ActionBar效果

Android 仿QQ浏览器,滑动隐藏显示ActionBar效果. 往上推,是一个ScrollView会将,actionbar以及内容往上推,当actionbar消失后,将滚动Webview的内容. 此效果是基于QuickReturnHeader源码,修改而来的,代码也不多,实现方法比较简单. 直接上demo:http://download.csdn.net/detail/xufeifandj/8388493 直接看效果图:

Android Toolbar跟随ListView滑动隐藏和现实

使用过Google Play Store应用或者Google+应用的人都知道,其ActionBar能随着ListView的滑动而相应的隐藏或者显示.效果看起来很不错,为此,我笨拙的模仿了一个类似的效果,不知道有没有更好的办法. 先上主布局activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

Android -- Toolbar跟随ListView滑动隐藏和显现

布局 <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"> <ListVi

安卓开发_浅谈ListView之分页列表

前言: 在开发的过程中,有时候我们需要从网络解析一些数据,比如最近的一些新闻,我们需要把这些数据用ListView显示出来. 因为是解析一个网络数据源,这样将会一下子将所有的数据解析出来,当数据源数据过大时,就可能会造成解析时间过长,占用内存过大等问题. 这时候想到用分页列表来显示这些数据,即每次只显示一个屏幕所能容纳条数的列表项数据,当用户手指向下拉动的时候,才再加载一个屏幕所能容纳的条数的数据,这样就解决了上述问题. -------------------------------------

浅谈动感歌词-歌词显示篇

1引言 经过分析篇.生成篇和解析篇之后,相信大家对动感歌词都已经不再陌生了,现在最重要的就是,动感歌词怎样显示的问题,这里就不再介绍java swing上面怎样显示了,因为在生成篇,已经做了一些简单的介绍,这一篇着重说一下动感歌词在android上面怎样显示. 2显示 关于歌词的平滑滚动,之前一直都是用android Scroller来滚动,发现在歌词滑动快进方面,一直都实现不了,能力有限.幸好,发现了一个帖子,这个帖子真是帮了大忙,这里先贴一下,他的博客,我强烈推荐大家看一下他的博客,他说得比

浅谈Listview中Adpter的用法

一.Adpter用法: Adpter是连接后端数据与前端显示的适配器接口,是数据和UI(view)之间一个重要的纽带. 数据源       Adpter      Listview public class TaskListAdapter extends BaseAdapter 其中,BaseAdpter是一个继承类,继承他需要实现更多的方法,所以有更大的灵活性. 而ArrayAdpter支持泛型操作,只能显示一行字. SimpleAdapter有最好的扩充性,可以自定义出各种效果. Simpl

Listview滑动超出显示区域时getChildAt(arg2)异常错误

转载自:ListView中getChildAt(index)的使用注意事项 1.原理 在很多时候ListView列表数据不需要全部刷新,只需刷新有数据变化的那一条,这时可以用getChildAt(index)获取某个指定position的view,并对该view进行刷新. 注意:在ListView中,使用getChildAt(index)的取值,只能是当前可见区域(列表可滚动)的子项! 即取值范围在 >= ListView.getFirstVisiblePosition() && 

滑动ListView自动隐藏页面头部和底部元素的例子

完整工程代码在这:https://github.com/NashLegend/Auto-Hide-ListView 现在很多软件都有这种滑动列表的时候自动隐藏页面头部和底部元素的功能,比如Google+.在刚刚进入Activity的时候,页面是一个列表,底部有一个view,头部一个view,当列表向上滑动的时候,隐藏头尾元素,以显示更多内容,当列表向下滑动的时候,再将头尾元素拉出来.比如Google+. 刚刚进入时是这个样子: 再把列表身上一拉,头尾隐藏,成了这个样子: 再往下拉,就会再变回第一