Android 固定大小WebView加载的H5页面

1.背景：项目中经常有Android+H5混合开发的场景，大多数情况下显示H5页面的时候是全屏显示，有时候设计师却要求在界面上固定大小的位置显示H5。

2. 效果：

3. 核心代码实现：

        
......
        <Button
            android:id="@+id/test_webview_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试webview  ">

        </Button>
        <FrameLayout
            android:id="@+id/webview_layout"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:background="@color/orange"
            android:layout_margin="10dp">

        </FrameLayout>
......

 对实现固定大小的webview，本文采用的是：固定大小FrameLayout，动态添加WebView。加载了百度的H5链接，点击按钮时，对WebView做了缩放+淡入淡出动画

    private void initUI(View rootView) {
        Button webTestBtn = rootView.findViewById(R.id.test_webview_btn);
        FrameLayout webFrameLayout =  rootView.findViewById(R.id.webview_layout);
        WebView webView = new WebView(webFrameLayout.getContext());
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setDefaultTextEncodingName("utf-8");
        webSettings.setLoadsImagesAutomatically(true);
        webView.loadUrl("https://www.baidu.com");
        webTestBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //动态添加WebView
                webFrameLayout.removeAllViews();
                webFrameLayout.addView(webView);
                final AnimatorSet animatorSet = new AnimatorSet();
                //缩放动画+淡入淡出动画
                animatorSet.playTogether(ObjectAnimator.ofFloat(webView, "scaleX", 0, 1)
                        .setDuration(1000),ObjectAnimator.ofFloat(webView, "scaleY", 0, 1)
                        .setDuration(1000), ObjectAnimator.ofFloat(webView, "alpha", 0, 1)
                        .setDuration(1000));
                //动画开始的原点
                webView.setPivotX(webFrameLayout.getWidth() - 20);
                webView.setPivotY(30);
                animatorSet.start();
            }
        });
    }

Demo地址

GitHub - mikelhm/MikelProjectDemo: Personal Android Demo

该工程主要是个人学习和实践 android 技术 的 Demo 集成

1. MVVM: ViewModel+LiveData+DataBinding+Retrofit+Room+Paging+RxJava 总结与实践（Java实现）
   MVVM: ViewModel+LiveData+DataBinding+Retrofit+Room+Paging+RxJava 总结与实践（Java实现）_xiaobaaidaba123的专栏-CSDN博客
2. android 嵌套ViewPager + Fragment实现仿头条UI框架Demo
   android 嵌套ViewPager + Fragment实现仿头条UI框架Demo_xiaobaaidaba123的专栏-CSDN博客
3. Android 使用ViewPager2+ExoPlayer+VideoCache 实现仿抖音视频翻页播放
   Android 使用ViewPager2+ExoPlayer+VideoCache 实现仿抖音视频翻页播放_xiaobaaidaba123的专栏-CSDN博客
4. Android 11 拍照+录制视频保存到外部共享区域
   Android 11 拍照+录制视频保存到外部共享区域_xiaobaaidaba123的专栏-CSDN博客_android11 拍照路径
5. Android 11 从沙盒拷贝文件到外部共享存储区域
   Android 11 从沙盒拷贝文件到外部共享存储区域_xiaobaaidaba123的专栏-CSDN博客_android11存储
6. Android 11 从外部存储读取文件到应用沙盒存储
   Android 11 从外部存储读取文件到应用沙盒存储_xiaobaaidaba123的专栏-CSDN博客_android11访问外部存储
7. Android 固定大小WebView加载的H5页面
   Android 固定大小WebView加载的H5页面_xiaobaaidaba123的专栏-CSDN博客