如何实现Gmail像捏缩放和标题滚动

Question

如何实现类似Gmail应用程序的捏缩放行为？我已将标头容器放在ScrollView中，然后是WebView。似乎这是非常复杂的行为。

这里没有变焦。

当我们捏Webview时，上部容器按照缩放比例向上滚动：

到目前为止，这是我的姓名缩写：

  <?xml version="1.0" encoding="utf-8"?>
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/white">

    <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@color/white"
       android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/white">

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appbar">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@color/colorPrimary"></FrameLayout>

            <WebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:scrollbars="none" />
        </LinearLayout>
    </ScrollView>
  </RelativeLayout>
</FrameLayout>

Answer 1

WebViewGMail 使用启用了捏缩放功能的Chrome 。缩放仅适用于单线程视图。WebSettings setBuiltInZoomControls()是默认的false，setDisplayZoomControls()是默认的true。通过更改两者，缩放可以工作并且不会显示缩放控件：

webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setDisplayZoomControls(false);

该工具栏是一个透明样式的ActionBar，具有样式windowActionBarOverlay集true：

指示此窗口的操作栏是否应覆盖应用程序内容的标志。

ActionBar 的底部阴影在最顶部滚动位置被删除。这个监听垂直滚动事件而不是任何缩放手势。这个效果的工作原理如下（最初必须隐藏阴影）：

webView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
    @Override
    public void onScrollChange(View view, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
        if(scrollY == 0) {
            /* remove the ActionBar's bottom shadow  */
        } else {
            /* apply the ActionBar's bottom shadow */
        }
    }
}

取决于触发的频率OnScrollChangeListener，甚至检查scrollY == 0和scrollY == 1可能已经足以打开和关闭阴影。

缩放时，这似乎是一个ScaleGestureDetector.SimpleOnScaleGestureListener（请参阅文档），其中.getScaleFactor()用于对辅助“工具栏”垂直顶部位置进行动画处理，然后将其推到可见视口之外。这个辅助“工具栏”似乎是一个嵌套的垂直工具栏DrawerLayout- 无法手动移动 - 这就是为什么它移动得如此平滑...... aDrawerLayout不限于水平抽屉；我想这就是答案。

编辑：我现在相对确定，这是带有MDC Motion的 AndroidX 。