经常可以看到以下app应用它的toolBar是可以滑出屏幕的,这样的体验效果非常好,看一下效果
1.实现原理:默认的ActionBar是不可以移动的,不过可以使用google的support的v7包下的ToolBar来代替,ToolBar将会渐渐取代ActionBar,当ListView在滑动的过程中时去监听触摸的事件,当向上滑动时将toolBar偏移出屏幕,向下滑在将ToolBar滑下来,接下来看具体的效果
使用Android Stdio 默认已经导入support V7包下的了,所以可以直接使用,要使用toolBar,必须将主题设置为没有ActionBar的,不然会发生冲突
在style中设置主题
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
2.实现过程
- 1 布局文件
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ffff00"/>
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
- 2.将toolbar设计为ActionBar
listView = (CustomListView) findViewById(R.id.listview);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
- 3.给listView设置滑动的监听来动态更新toolBar的状态
listView.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){//向下
if(( mCurrentY - mFirstY) > mTouchSlop){
direction = 1;//下
if(!mShow){
animToolBar(direction);//显示toolBar
mShow = !mShow;
}
}
}else{
if ((mFirstY-mCurrentY )> mTouchSlop){
direction = 0;//上
if(mShow){
animToolBar(direction);//隐藏toolBar
mShow = !mShow;
}
}
}
break;
case MotionEvent.ACTION_UP:
Log.d("xinwa", "Action_up");
break;
}
return false;
}
});
1.记录下手指按下的位置纵坐标mFirstY,与滑动过程中的纵坐标mCurrentY,使他俩相减来判断向上滑动还是向下滑动,而mTouchSlop为系统可以认为的最小滑动距离,可以通过ViewConfigration来获取
2.当向上滑动时,启动一个令toolBar向上移动的动画,toolbar提供了一下toolbar,getTranslationY()可以获取toolbar进行动画后的偏移量
private void animToolBar(int flag){
if(mAnimator != null && mAnimator.isRunning()){
mAnimator.cancel();
}
if(flag == 0){//向上滑隐藏toolBar
mAnimator = new ObjectAnimator().ofFloat(toolbar,"translationY",toolbar.getTranslationY(),-toolbar.getHeight());
}else{//向下滑
mAnimator = new ObjectAnimator().ofFloat(toolbar,"translationY",toolbar.getTranslationY(),0);
}
mAnimator.start();
}
向上隐藏时,toolbar.getTranslationY()为0,那么我们只需让toolBar向上移动toolBar的高度即可
向下滑动时,由于toolbar已经被偏移出屏幕了,所以我们可以通过toolbar.getTranslationY()来获取他的向上的偏移量,让他向下移动即可
Demo下载,Demo
我的Gradle版本是:classpath ‘com.android.tools.build:gradle:1.2.3’改为自己对应的版本
在app的Build.Gradle中 我的为buildToolsVersion “23.0.2”,也改为相应的版本,不然会去下载,过程太慢容易卡死。