facebook廣告





123

2017年1月28日 星期六

Android ToolBar随滑动隐藏的简单实现

http://www.jianshu.com/p/185eb696ed9c
现在很多App都实现了下滑时标题栏隐藏,而上滑时标题栏显示,很显然这是利用手势监测和属性动画(ObjectAnimator)进行实现的。
在网上找到的大部分都是ToolBar随listview类似的控件滑动而隐藏或显示,感觉都比较复杂,最近在读View的分发事件,在想是否能够利用View的分发简单实现ToolBar的滑动隐藏。这样就可以在不同的view达到这种效果,不只是listview。
  1. 使用最简单的布局文件:
    (在支持ToolBar,记得在style中添加"windowActionBar"为false,windowNoTitle"为true)
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
     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:orientation = "vertical">
    
     <android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="@color/colorPrimary">
     </android.support.v7.widget.Toolbar>
    
     <TextView
         android:id="@+id/textview"
         android:text="Hello World!"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" />
    </LinearLayout>
  2. 利用属性动画实现Toolbar隐藏和显示,也可以通过alpha实现渐变消失
    //隐藏动画
    private void hideToolBar(){
         Animator animator = ObjectAnimator.ofFloat(toolbar, "translationY", 
               toolbar.getTranslationY(), -toolbar.getHeight());
         animator.setDuration(600);
         animator.setInterpolator(new AccelerateInterpolator());
         animator.setTarget(toolbar);
         animator.start();
     }
    //显示动画
     private void showToolBar(){
         Animator animator = ObjectAnimator.ofFloat(toolbar, "translationY", 
              toolbar.getTranslationY(), 0);
         animator.setDuration(600);
         animator.setInterpolator(new AccelerateInterpolator());
         animator.setTarget(toolbar);
         animator.start();
     }
  3. Android事件传递机制中,事件从Activity的dispatchTouchEvent做分发,所以我们可以在这里进行手势判断,但是不消费用户Touch事件,使得Touch事件得以传递下去。
    可以参考: 图解 Android 事件分发机制
public boolean dispatchTouchEvent(MotionEvent ev){
        //在这里判断下滑还是上滑
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = ev.getX();
                startY = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                endX = ev.getX();
                endY = ev.getY();
                break;
            case MotionEvent.ACTION_UP:
                if (endY - startY > 0 && (Math.abs(endY - startY) > 25)) {
                    //向下滑動
                    showToolBar();
                } else if (endY - startY < 0  && (Math.abs(endY - startY) > 25)) {
                    //向上滑动
                    hideToolBar();
                }
                startX = startY = endX = endY = 0;
                break;
        }
        return super.dispatchTouchEvent(ev);//不消费触摸事件
    }
  1. 效果:

沒有留言:

張貼留言