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