Android实现上下滑动隐藏/显示工具栏

对于移动端，为了留出更多的空间来显示内容，我们在向上滑动视图的时候，总是希望，顶部工具栏和底部工具栏可以随着我们向上滑动的手势而自动隐藏。而当我们浏览完内容，向下滑动视图的时候，又希望工具栏可以自动显示出来响应我们操作。这是一种很好的交互模式，现在我们来看看这种交互怎么实现。

布局很简单，上部工具栏和下部工具栏，还有中间的一个scrollView，里面是一张图片。

<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"     tools:context=".MainActivity">    <include        android:id="@+id/top_menu"        layout="@layout/top_menu"/>    <ScrollView        android:id="@+id/main_content"        android:layout_below="@+id/top_menu"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <TextView                android:id="@+id/title"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="夏季女装爆款"                android:textColor="#ffffff"                android:background="#000000"                android:textSize="20sp" />            <ImageView                android:id="@+id/photo_pic"                android:layout_below="@+id/title"                android:adjustViewBounds="true"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:src="@drawable/clothes"/>            <RelativeLayout                android:layout_below="@+id/photo_pic"                android:layout_width="match_parent"                android:layout_height="50dp"                android:orientation="horizontal">                <TextView                    android:id="@+id/item_price"                    android:layout_width="80dp"                    android:layout_height="48dp"                    android:background="#fd4101"                    android:textSize="20sp"                    android:textColor="#ffffff"                    android:gravity="center"                    android:text="¥987"/>                <TextView                    android:padding="5dp"                    android:layout_toRightOf="@+id/item_price"                    android:layout_width="match_parent"                    android:layout_height="48dp"                    android:textSize="16sp"                    android:textColor="#333333"                    android:text="夏季女装爆款夏季女装爆款夏季女装爆款夏季女装爆款"/>            </RelativeLayout>        </RelativeLayout>    </ScrollView>    <include        android:id="@+id/bottom_menu"        android:layout_width="match_parent"        android:layout_height="48dp"        layout="@layout/bottom_menu_buy_now"/></RelativeLayout>

其中顶部工具栏和底部工具栏都是一些简单的布局，此处只给出顶部工具栏的布局，具体可以查看源码。

<?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="48dp"    android:background="#ffffff"    android:gravity="center_vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        >        <Button            android:layout_marginLeft="8dp"            android:id="@+id/nav_search"            android:layout_alignParentLeft="true"            android:layout_width="32dp"            android:layout_height="32dp"            android:layout_centerInParent="true"            android:background="@drawable/nav_search_select"/>       <LinearLayout           android:layout_toRightOf="@+id/nav_search"           android:layout_toLeftOf="@+id/nav_message"           android:layout_width="wrap_content"           android:layout_height="match_parent"           android:gravity="center"           android:layout_centerInParent="true"           android:orientation="horizontal">           <TextView               android:layout_marginLeft="4dp"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:gravity="center"               android:text="工具栏"               android:textSize="20sp"               android:textColor="#262626"/>       </LinearLayout>        <Button            android:id="@+id/nav_message"            android:layout_marginRight="8dp"            android:layout_alignParentRight="true"            android:layout_width="32dp"            android:layout_height="32dp"            android:layout_centerInParent="true"            android:background="@drawable/nav_message_select"/>    </RelativeLayout></RelativeLayout>

这个布局里面，顶部工具栏和底部工具栏是重合的。我们可以在onCreate 方法里设置底部工具栏的 topMargin 的属性值来让底部工具栏和底部对齐。

    @Override    protected void onCreate(Bundle savedInstanceState) {        requestWindowFeature(Window.FEATURE_NO_TITLE);        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mScrollView = (ScrollView) findViewById(R.id.main_content);        mTopMenu = (ViewGroup) findViewById(R.id.top_menu);        mBottomMenu = (ViewGroup) findViewById(R.id.bottom_menu);        marginTop = DisplayUtil.dip2px(this, TOOLBARHEIGHT);        mBottomOriginalTopMargin = DisplayUtil.getScreenHeight(this) - DisplayUtil.dip2px(this, TOOLBARHEIGHT) - DisplayUtil.getStatusBarHeight(this);        ((RelativeLayout.LayoutParams) mBottomMenu.getLayoutParams()).topMargin += mBottomOriginalTopMargin;        mBottomMenu.requestLayout();        initView();    }

这样，通过DisplayUtil这个工具类计算出来底部工具栏和底部对齐需要的margin值，然后把这个值赋给LayoutParams，然后通知视图重新布局就好。

同样通过改变topMargin值来实现视图组的向上或者向下运动，实现动画效果。主要思路就是监听ScrollView的滑动方法，然后根据上滑或者下滑的距离来相应改变两个工具栏的topMargin值，initView方法如下。

 private void initView(){        mScrollView.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                switch (event.getAction()){                    case MotionEvent.ACTION_DOWN:                        mFirstY = (int) event.getY();                        break;                    case MotionEvent.ACTION_MOVE:                        mCurrentY = (int) event.getY();                        if (mCurrentY - mFirstY > 0){                            direction = true; //向下滑动                        }else if (mFirstY - mCurrentY > 0){                            direction = false; //向上滑动                        }                        if (!direction){                            RelativeLayout.LayoutParams top = (RelativeLayout.LayoutParams) mTopMenu.getLayoutParams();                            RelativeLayout.LayoutParams bottom = (RelativeLayout.LayoutParams) mBottomMenu.getLayoutParams();                            if (top.topMargin > -marginTop){                                top.topMargin += mCurrentY - mFirstY;                                mTopMenu.requestLayout();                                bottom.topMargin += mFirstY - mCurrentY;                                mBottomMenu.requestLayout();                            }else{                                top.topMargin = -marginTop;                                mTopMenu.requestLayout();                                bottom.topMargin = (mBottomOriginalTopMargin + marginTop);                                break;                            }                        }else if (direction){                            RelativeLayout.LayoutParams top = (RelativeLayout.LayoutParams) mTopMenu.getLayoutParams();                            RelativeLayout.LayoutParams bottom = (RelativeLayout.LayoutParams) mBottomMenu.getLayoutParams();                            if (top.topMargin < 0){                                top.topMargin += mCurrentY - mFirstY;                                mTopMenu.requestLayout();                                bottom.topMargin += mFirstY - mCurrentY;                                mBottomMenu.requestLayout();                            }                            else{                                top.topMargin = 0;                                mTopMenu.requestLayout();                                bottom.topMargin = mBottomOriginalTopMargin;                                mBottomMenu.requestLayout();                                break;                            }                        }                        break;                    case MotionEvent.ACTION_UP:                        break;                }                return false;            }        });    }

最后的效果，如下所示。

源码地址:https://github.com/futureshine/AutoHideToolBar