如何为我的Android应用程序实现类似"自动隐藏导航"的Chrome？

Question

在Chrome中,当用户向上/向下滑动内容时,地址栏将被隐藏/显示.

我可以为我的应用程序实现类似的逻辑吗？

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/container"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity"
     tools:ignore="MergeRootFrame">
         <WebView
         android:id="@+id/my_webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
</FrameLayout>

我想知道我是否可以通过以下代码执行任何操作,以便在用户向上/向下滑动webView时隐藏/显示ActionBar.

WebView webView = (WebView) findViewById(R.id.my_webview);
webView.setOnTouchListener(new View.OnTouchListener() {
     public boolean onTouch (View v, MotionEvent event) {
            webView.onTouchEvent(event);
     }
});

Answer 1

此模式称为"快速返回".从这篇博客文章开始.

然而,这是值得阅读这个正在考虑使用它的时候.

Answer 2

首先，您需要使用alignParentBottom和match_parent WebView进行布局以及顶部的一些栏：

<?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"
android:background="#ffff" >

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true" />

<RelativeLayout
    android:id="@+id/actionBar"
    android:layout_width="match_parent"
    android:layout_height="50dp" >

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="TextView" />

</RelativeLayout>

</RelativeLayout>

然后你需要代码：

1) 声明并设置一些内部值并调整WebView 的大小，使其低于我们的栏：

private int baseHeight;
private int webViewOnTouchHeight;
private int barHeight;
private float heightChange;
private float startEventY;

barHeight = actionBar.getMeasuredHeight();
baseHeight = getView().getMeasuredHeight();
webView.getLayoutParams().height = webView.getMeasuredHeight() - barHeight;
webView.requestLayout();
webView.setOnTouchListener(listener);

2）创建调整大小方法。在这里，我们检查新的高度与屏幕顶部和栏高度的限制

private boolean resizeView(float delta) {
    heightChange = delta;
    int newHeight = (int)(webViewOnTouchHeight - delta);
    if (newHeight > baseHeight){ // scroll over top
        if (webView.getLayoutParams().height < baseHeight){
            webView.getLayoutParams().height = baseHeight;
            webView.requestLayout();
            return true;
        }       
    }else if (newHeight < baseHeight - barHeight){ // scroll below bar
        if (webView.getLayoutParams().height > baseHeight - barHeight){
            webView.getLayoutParams().height = baseHeight - barHeight;
            webView.requestLayout();
            return true;
        }
    } else { // scroll between top and bar
        webView.getLayoutParams().height = (int)(webViewOnTouchHeight - delta);
        webView.requestLayout();
        return true;
    }
    return false;
}

3) 创建自定义 onTouch 监听器，我们将在其中调整WebView 的大小并更改栏的Y 值

private OnTouchListener listener = new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
            startEventY = event.getY();
            heightChange = 0;
            webViewOnTouchHeight = webView.getLayoutParams().height;
            break;
        case MotionEvent.ACTION_MOVE:
            float delta = (event.getY()+heightChange)-startEventY;
            boolean heigthChanged = resizeView(delta);
            if (heigthChanged){
                actionBar.setTranslationY(baseHeight - webView.getLayoutParams().height - barHeight);
            }
        }
        return false;
    }
};