仿底部工具栏上滑消失下滑出现

仿底部工具栏上滑消失下滑出现

先看效果图吧！

这个效果图确实不错，设计思想也很好。所以呢？我们肯定是要拿来主义了。这个页面来自携程的app，具体的效果可以去查看下。

实现思路
类似这种效果，我考虑了好几种方式。最后是采用RelativeLayout作为父布局，底部的工具栏放到底部，然后监听ScrollView或ListView的滑动事件，然后隐藏或显示底部工具栏，配以动画即可。

看我们的布局文件：

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <ListView 
            android:id="@+id/listView"
            android:layout_height="match_parent"
            android:layout_width="match_parent"/>
        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#CC000000"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal">
            <RadioButton 
                android:layout_height="match_parent"
                android:button="@null"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
                android:text="我的收藏"
                android:textSize="14sp"
                android:gravity="center_horizontal"
                android:textColor="#FFFFFF"
                android:drawablePadding="2dp"/>
             <RadioButton 
                android:layout_height="match_parent"
                android:button="@null"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
                android:text="浏览历史"
                android:textSize="14sp"
                android:gravity="center_horizontal"
                android:textColor="#FFFFFF"
                android:drawablePadding="2dp"/>
             <RadioButton 
                android:layout_height="match_parent"
                android:button="@null"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
                android:text="我的订单"
                android:textSize="14sp"
                android:gravity="center_horizontal"
                android:textColor="#FFFFFF"
                android:drawablePadding="2dp"/>
             <RadioButton 
                android:layout_height="match_parent"
                android:button="@null"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
                android:text="个人中心"
                android:textSize="14sp"
                android:gravity="center_horizontal"
                android:textColor="#FFFFFF"
                android:drawablePadding="2dp"/>
        </RadioGroup>
    </RelativeLayout>

监听ListView的滑动事件，在这里，我们使用GestureDetector进行判断使用。

        @Override
    public void setOnClickListener() {
        listView.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch(event.getAction()){
                case MotionEvent.ACTION_DOWN:
                    break;
                case MotionEvent.ACTION_MOVE:
                    mGestureDetector.onTouchEvent(event);
                    break;
                case MotionEvent.ACTION_UP:
                    break;
                }
                return false;
            }
        });
    }

    private GestureDetector mGestureDetector =  new GestureDetector(getApplication(), new GestureDetector.OnGestureListener() {

        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            return false;
        }

        @Override
        public void onShowPress(MotionEvent e) {

        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
                float distanceY) {
            if(Math.abs(distanceY) > 10)return false;
            if(distanceY > 0){
                if(radioGroup.getVisibility() == View.GONE)return false;
                radioGroup.startAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.bottom_out));
                radioGroup.setVisibility(View.GONE);
            }else if(distanceY < 0){
                if(radioGroup.getVisibility() == View.VISIBLE)return false;
                radioGroup.setVisibility(View.VISIBLE);
                radioGroup.startAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.bottom_in));
            }
            return false;
        }

        @Override
        public void onLongPress(MotionEvent e) {

        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            return false;
        }

        @Override
        public boolean onDown(MotionEvent e) {
            return false;
        }
    });

通过滑动进行判断，这里有个问题就是“第一次轻轻滑动的时候，出现的distanceY的值比较大，第一次的值就是按下的位置，所以暂时没想到很好的方法，只是通过一个值进行限定。有更好解决方案的欢迎留言。”

看下效果图：

下载地址
作者：mr_dsw 欢迎转载，与人分享是进步的源泉！

转载请保留地址：http://blog.csdn.net/mr_dsw