自定義ListView實現底部View自動隱藏和消失的功能

有這樣一個ListView,要求在屏幕底部有一個篩選排序的浮動框： 1、手指下拉隱藏，上滑顯示； 2、如果沒做任何操作，2S之後，要自動顯示； 3、滑動到最底部，始終顯示。首先看其效果圖：實現上述效果，其實現原理如下： 1、在屏幕頂部固定一個BottomView，XML佈局最好使用Relati ...

有這樣一個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自動隱藏和消失的功能。　