以后每一周会分享Android技术难点,今天主要分享这样一个功能:有这样一个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>
main.xml中采用的RelativeLayout,有自定义的控件BottomFloatListView,然后屏幕底部放的是bottom_view,我是通过include的方式引用过来的,这样多处引用比较方便。
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类等) * * @author zhiwen.nan * @Date 2013-9-28 下午3:35:15 * */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代码如下
package com.example.BottomFloatListView;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import java.util.ArrayList;import java.util.List;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; }}
上述Activity中告诉了如何使用了BottomFloatListView控件,下面两句代码比较关键:
ViewGroup bottomView = (ViewGroup)findViewById(R.id.bottombar) ; mBottomFloatListView.setBottomBar(bottomView);
集成到自己项目中,仅需1分钟搞定,有木有,如果有什么疑问,欢迎留言提问 。
源代码下载:
http://download.csdn.net/detail/nanzhiwen666/6392729