android自定义ListView实现底部View自动隐藏和消失的功能

有这样一个ListView,要求在屏幕底部有一个筛选排序的浮动框:

1、手指下拉隐藏,上滑显示 ;

2、如果没做任何操作,2S之后,要自动显示;

3、滑动到最底部,始终显示。

首先看其效果图:

实现上述效果,其实现原理如下:

1、在屏幕顶部固定一个BottomView,XML布局最好使用RelativeLayout(底部的BottomView并不是 ListView的footView,这个是和footView独立的,想想为什么?)

2、然后自定义ListView控件,监听onTouchEvent事件,主要是监听手指下滑和上滑事件,同时实现onScrollListener,监听是否滑动到最底部和最顶部

3、 ListView监听事件中,控制bottomView的显示和隐藏,所以ListView提供一个接口,设置底部bootomView的内容,然后获之后,就可以对bottomView进行控制,同时加上动画效果。

接下来看是如何的具体实现这种效果:

1。底部BottomView的内容如下,这个XML文件的内容是自定义的,根据各项目的内容需求来定义的,我例子中bottom_view.xml:

<?xml version="1.0" encoding="UTF-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

  android:id="@+id/button_layout" 

  android:layout_width="fill_parent" 

  android:layout_height="50dp" 

  android:background="#cbcbcb" 

  android:gravity="center_vertical" 

  android:orientation="horizontal" > 

    <Button android:layout_height="40dp" 

         android:layout_width="wrap_content" 

         android:layout_weight="1" 

         android:text="价格" /> 

  <Button android:layout_height="40dp" 

       android:layout_width="wrap_content" 

       android:layout_weight="1" 

       android:text="好评" /> 

  <Button android:layout_height="40dp" 

      android:layout_width="wrap_content" 

      android:layout_weight="1" 

      android:text="筛选" /> 

</LinearLayout>

2、main.xml如下

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 

       android:orientation="vertical" 

       android:layout_width="fill_parent" 

       android:layout_height="fill_parent" 

    > 

  <com.example.BottomFloatListView.BottomFloatListView 

      android:id="@+id/listView" 

      android:layout_width="fill_parent" 

      android:layout_height="fill_parent" 

      android:fadingEdge="none" 

      /> 

  <include 

      android:id="@+id/bottombar" 

      android:layout_width="match_parent" 

      android:layout_height="wrap_content" 

      android:layout_alignParentBottom="true" 

      layout="@layout/bottom_view" 

      > 

  </include> 

</RelativeLayout>

3、自定义ListView控件BottomFloatListView

package com.example.BottomFloatListView;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.OvershootInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.*;
import android.widget.AbsListView.OnScrollListener; 

/**
 * 底部View自动隐藏和消失listview(其他ListView可以继承该类,如CtripBottomRefreshListView类等)
 **/ 

public class BottomFloatListView extends ListView implements OnScrollListener {
  public View mBottomBar;
  private int mCurrentScrollState; 

  private boolean bIsMoved = false; 

  private boolean bIsDown = false; 

  private int mDeltaY; 

  private float mMotionY; 

  private int oldFirstVisibleItem = 0; 

  private Handler mHandler = new Handler(); 

  private static final String TAG = "BottomFloatListView"; 

  public BottomFloatListView(Context context) { 

    this(context, null); 

    super.setOnScrollListener(this); 

  } 

  public BottomFloatListView(Context context, AttributeSet attrs) { 

    this(context, attrs, 0); 

    super.setOnScrollListener(this); 

  } 

  public BottomFloatListView(Context context, AttributeSet attrs, int defStyle) { 

    super(context, attrs, defStyle); 

    super.setOnScrollListener(this); 

  } 

  @Override 

  public void setAdapter(ListAdapter adapter) { 

    super.setAdapter(adapter); 

  } 

  @Override 

  public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { 

    showBottomViewOnBottom(visibleItemCount, totalItemCount, firstVisibleItem); 

  } 

  @Override 

  public void onScrollStateChanged(AbsListView view, int scrollState) { 

    hideBottomViewOnScrollStateChanged(view, scrollState); 

  } 

  @Override 

  public boolean onTouchEvent(MotionEvent ev) { 

     float y = ev.getY(); 

     float x = ev.getX(); 

     Log.d("FloatListView", "onTouchEvent" + "" + x + "" + y); 

     int action = ev.getAction() & MotionEvent.ACTION_MASK; 

     switch (action) { 

       case MotionEvent.ACTION_DOWN: 

         action_down(y); 

         break; 

       case MotionEvent.ACTION_MOVE: 

         mDeltaY = (int) (y - mMotionY); 

         bIsMoved = true; 

         //移动的时候,要移除掉显示bottomView的消息 

         mHandler.removeCallbacks(showBottomBarRunnable); 

         //补齐action_down事件,因为有的时候,action_down 事件没有执行 

         action_down(y); 

         break; 

       case MotionEvent.ACTION_UP: 

         bIsMoved = false; 

         bIsDown = false; 

         if (!bIsMoved && !bIsDown) { 

           // 如果屏幕上什么没做,则过2s之后要显示bottomView 

           mHandler.postDelayed(showBottomBarRunnable, 2000); 

         } 

         if (mDeltaY < 0) { //下滑影藏 

           hideBottomBar(); 

         } else { //上滑显示 

           showBottomBar(); 

         } 

         bIsMoved = false; 

         break; 

     } 

    return super.onTouchEvent(ev); 

  } 

  private void action_down(float y){ 

     mMotionY = y; 

     bIsDown = true; 

     Log.d(TAG, "action down execed"); 

     mHandler.removeCallbacks(showBottomBarRunnable); 

  } 

  /** 

   * 滑动到顶部时,要隐藏bottomView 

   * @param view 

   * @param scrollState 

   */ 

  private void hideBottomViewOnScrollStateChanged(AbsListView view, int scrollState) { 

    mCurrentScrollState = scrollState; 

    if(view!=null){ 

       if (view.getFirstVisiblePosition() == 0 && scrollState == SCROLL_STATE_IDLE) { 

         hideBottomBar(); 

         Log.d(TAG, "hide bottom view"); 

       } 

    } 

  } 

  /** 

   * 显示底部浮动栏 

   */ 

  public void showBottomBar() { 

    if (mBottomBar != null && mBottomBar.getVisibility() == View.GONE) { 

      mBottomBar.setVisibility(View.INVISIBLE); 

      Animation translateAnimation = new TranslateAnimation(mBottomBar.getLeft(), mBottomBar.getLeft(),30, 0); 

      translateAnimation.setDuration(300); 

      translateAnimation.setInterpolator(new OvershootInterpolator(0.6f)); 

      mBottomBar.startAnimation(translateAnimation); 

      translateAnimation.setAnimationListener(new Animation.AnimationListener() { 

        @Override 

        public void onAnimationStart(Animation animation) { 

        } 

        @Override 

        public void onAnimationRepeat(Animation animation) { 

        } 

        @Override 

        public void onAnimationEnd(Animation animation) { 

          mBottomBar.setVisibility(View.VISIBLE); 

        } 

      }); 

    } 

  } 

  /** 

   * 隐藏浮动底部栏 

   */ 

  private void hideBottomBar() { 

    if (mBottomBar != null && mBottomBar.getVisibility() == View.VISIBLE) { 

      Animation translateAnimation = new TranslateAnimation(mBottomBar.getLeft(), mBottomBar.getLeft(), 0, 30); 

      translateAnimation.setDuration(300); 

      translateAnimation.setInterpolator(new OvershootInterpolator(0.6f)); 

      mBottomBar.startAnimation(translateAnimation); 

      translateAnimation.setAnimationListener(new Animation.AnimationListener() { 

        @Override 

        public void onAnimationStart(Animation animation) { 

        } 

        @Override 

        public void onAnimationRepeat(Animation animation) { 

        } 

        @Override 

        public void onAnimationEnd(Animation animation) { 

          mBottomBar.setVisibility(View.GONE); 

        } 

      }); 

    } 

  } 

  /** 

   * 滑动到底部时直接显示bottomView 

   * @param visibleItemCount 

   * @param totalItemCount 

   * @param firstVisibleItem 

   */ 

  private void showBottomViewOnBottom(int visibleItemCount, int totalItemCount, int firstVisibleItem) { 

      Log.d(TAG, "visible bottem item count:" + "firstVisibleItem:" + firstVisibleItem + "oldFirstVisibleItem:" + oldFirstVisibleItem + mBottomBar); 

       if(getLastVisiblePosition() ==  totalItemCount -1 && mCurrentScrollState != SCROLL_STATE_IDLE){ 

         showBottomBar(); 

       } 

  } 

  private Runnable showBottomBarRunnable = new Runnable() { 

    @Override 

    public void run() { 

      showBottomBar(); 

    } 

  }; 

  /** 

   * 将需要隐藏显示的view传入 

   * 

   * @param bottomBar 

   */ 

  public void setBottomBar(ViewGroup bottomBar) { 

    this.mBottomBar = bottomBar; 

  } 

}

4、主界面测试的Activity,MainActivity代码如下

public class MainActivity extends Activity { 

  private BottomFloatListView mBottomFloatListView; 

  @Override 

  public void onCreate(Bundle savedInstanceState) { 

    super.onCreate(savedInstanceState); 

    setContentView(R.layout.main); 

    mBottomFloatListView = (BottomFloatListView)findViewById(R.id.listView) ; 

    mBottomFloatListView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_expandable_list_item_1,getData())); 

    ViewGroup bottomView = (ViewGroup)findViewById(R.id.bottombar) ; 

    mBottomFloatListView.setBottomBar(bottomView); 

  } 

  private List<String> getData(){ 

    List<String> data = new ArrayList<String>(); 

    for(int i = 0; i <100; i++)   { 

      data.add("测试数据" + i); 

    } 

    return data; 

  } 

}
ViewGroup bottomView = (ViewGroup)findViewById(R.id.bottombar) ;
mBottomFloatListView.setBottomBar(bottomView); 

将底部的bottomView传入到ListView中,就可以让ListView具有底部View自动隐藏和消失的功能。 

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

(0)

相关推荐

  • Android之带group指示器的ExpandableListView(自写)

    我们都知道Android缺省的ExpandableListView的group header无法固定在界面上,当向下滚动后,不能对当前显示的那些child 指示出它们归属于哪个group,在网上搜了很多关于仿手机QQ好友分组效果的ExpandableListView,发现都不尽如意,于是乎在别人的基础上改进了一点点,其实原理还是差不多的,只是增加了往上挤出去的动画效果,而且更加简单,只不过还是没有完全到达跟QQ一样的效果,希望有高手能实现更加逼真的效果,下面我们先看看效果图:  我这里没有把Ex

  • Android自定义Adapter的ListView的思路及代码

    在开发中,我们经常使用到ListView这个控件.Android的API也提供了许多创建ListView适配器的快捷方式.例如ArrayAdapter.SimpleAdapter和SimpleCursorAdapter等.但你是否发现,如果采用这些系统自带的适配器,对于事件的响应只能局限在一个行单位.假设一行里面有一个按钮和一个图片控件,它们之间的响应操作是不一样的.若采用系统自带的适配器,就不能精确到每个控件的响应事件.这时,我们一般采取自定义适配器来实现这个比较精确地请求. ListView

  • android二级listview列表实现代码

    今天来实现以下大众点评客户端的横向listview二级列表,先看一下样式.  这种横向的listview二级列表在手机软件上还不太常见,但是使用过平板的都应该知道,在平板上市比较常见的.可能是因为平板屏幕比较大,而且也能展现更多的内容. 下面来看一下我的实现步骤. 首先自定义一个listview,代码如下: 复制代码 代码如下: public class MyListView extends ListView implements Runnable { private float mLastDo

  • android ListView内数据的动态添加与删除实例代码

    main.xml 文件: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_pa

  • android中ListView多次刷新重复执行getView的解决方法

    以前倒是没有注意listview的getView会重复执行多次,这次因为布局比较复杂,所以在测试的时候去断点跟踪,发现同一条数据不断的重复执行.觉得很奇怪,于是上网搜索了一下.网上的解释基本一致,就是ListView布局时height和width都不是fill_parent,导致不断计算高度,不断刷新.或者说它的父容器没有设置成fill_parent. 可以布局太复杂的情况下,全部按照fill_parent去调整不现实.所以想了另一种方案,就是动态固定高度. 在程序运行后,固定ListView的

  • Android ListView的item背景色设置和item点击无响应的解决方法

    下面讲解以下在使用listview时最常见的几个问题.1.如何改变item的背景色和按下颜色 listview默认情况下,item的背景色是黑色,在用户点击时是黄色的.如果需要修改为自定义的背景颜色,一般情况下有三种方法: 1)设置listSelector 2)在布局文件中设置item的background 3)在adapter的getview中设置 这三种方法都能达到改变item默认的背景色和按下颜色,下面来分别讲解,但是在这之前需要先写好selector.xml文件; 复制代码 代码如下:

  • Android下拉刷新ListView——RTPullListView(demo)

    下拉刷新在越来越多的App中使用,已经形成一种默认的用户习惯,遇到列表显示的内容时,用户已经开始习惯性的拉拉.在交互习惯上已经形成定性.之前在我的文章<IOS学习笔记34-EGOTableViewPullRefresh实现下拉刷新>中介绍过如何在IOS上实现下拉刷新的功能.今天主要介绍下在Android上实现下拉刷新的Demo,下拉控件参考自Github上开源项目PullToRefresh,并做简单修改.最终效果如下:                         工程结构如下: 使用过程中

  • android开发之横向滚动/竖向滚动的ListView(固定列头)

    由于项目需要,我们需要一个可以横向滚动的,又可以竖向滚动的 表格.而且又要考虑大数据量(行)的展示视图.经过几天的研究终于搞定,做了一个演示.贴图如下:      好吧.让我们看思路是什么样的: 1. 上下滚动直接使用 listView来实现. 2. 左右滚动使用HorizontalScrollView,来处理滚动.我写一个类MyHScrollView继承 自它. 2.1 . ListView里的每行(row)分为 两部分,不滚动的和可滚动的区域.比如本demo的第一列,就是静态的.而后面的所有

  • android开发教程之listview使用方法

    首先是布局文件,这里需要两个布局文件,一个是放置列表控件的Activity对应的布局文件 main.xml,另一个是ListView中每一行信息显示所对应的布局  list_item.xml    这一步需要注意的问题是ListView 控件的id要使用Android系统内置的 android:id="@android:id/list"   [注意形式] main.xml 复制代码 代码如下: <?xml version="1.0" encoding=&quo

  • android listview优化几种写法详细介绍

    这篇文章只是总结下getView里面优化视图的几种写法,就像孔乙己写茴香豆的茴字的几种写法一样,高手勿喷,勿笑,只是拿出来分享,有错误的地方欢迎大家指正,谢谢. listview Aviewthatshowsitemsinaverticallyscrollinglist. 一个显示一个垂直的滚动子项的列表视图在android开发中,使用listview的地方很多,用它来展现数据,成一个垂直的视图.使用listview是一个标准的适配器模式,用数据--,界面--xml以及适配器--adapter,

随机推荐