app生成的h5网页满屏

在移动应用开发中，很多应用都会将一些数据或者功能以H5页面的形式进行展示，常见的就是通过WebView加载一个H5页面。但是很多时候，我们希望将H5页面作为应用的一部分展示，而不是在WebView中单独打开。此时，就需要将H5页面嵌入到应用的布局中，并使其满屏展示。下面就来详细介绍一下实现这个功能的原理和方法。

一、原理

将H5页面嵌入应用布局中并使其满屏展示，其核心就是利用WebView和WebViewClient来实现。通过WebView来加载H5页面，然后通过WebViewClient来处理H5页面的加载过程，最终将H5页面渲染到应用的布局中，从而实现H5页面在应用中的展示。

具体而言，实现H5页面的满屏展示需要在以下几个方面进行实现：

1.设置WebView的宽和高为MATCH_PARENT或者填充父容器。这样可以保证WebView的大小与父容器的大小相同，从而实现对父容器的全屏覆盖。

2.将WebView的背景色设置为透明色。这样可以保证WebView的背景和父容器的背景一致，从而实现对应用画面的无缝过渡。

3.通过设置WebViewClient的一些回调方法，来处理H5页面的加载过程，并将加载的内容渲染到WebView中。具体包括：

（1）onPageStarted：开始加载页面时调用，可以在此时显示一个加载的进度条，或者显示一个“加载中”的提示。

（2）onPageFinished：加载页面完成后调用，可以在此时隐藏加载进度条或者提示。

（3）onReceivedError：加载页面出错时调用，可以在此时给出相应的错误提示。

（4）onPageCommitVisible：页面的DOM结构已经生成并且呈现时调用，可以在此时进行进一步的布局或修改WebView的一些属性等。

通过以上步骤，就可以将H5页面嵌入到应用布局中，并使其满屏展示了。

二、方法

实现H5页面满屏展示的方法有很多，下面介绍两种比较常见的方法。

方法一：布局中嵌入WebView，直接设置属性

这种方法比较简单，只需要在应用布局中嵌入一个WebView即可。然后设置WebView的一些属性，如layout_width、layout_height、background等等，实现WebView对父容器的全屏覆盖。具体代码如下：

```

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/transparent" />

```

其中，android:background="@android:color/transparent"是将WebView的背景设置为透明色的属性。这样可以实现WebView的背景与父容器的背景一致，从而实现无缝过渡。

接着，在应用中加载H5页面的代码如下：

```

WebView webView = findViewById(R.id.webview);

webView.loadUrl("file:///android_asset/demo.html");

webView.setWebViewClient(new WebViewClient() {

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

//开始加载页面，可以在此时显示加载进度条等等

super.onPageStarted(view, url, favicon);

}

@Override

public void onPageFinished(WebView view, String url) {

//页面加载完成，可以在此时隐藏加载进度条等等

super.onPageFinished(view, url);

}

@Override

public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {

//页面加载出错，可以在此时给出相应的错误提示

super.onReceivedError(view, request, error);

}

@Override

public void onPageCommitVisible(WebView view, String url) {

super.onPageCommitVisible(view, url);

//页面的DOM结构已经生成并且呈现，可以在此时进行进一步的布局等等

}

});

```

其中，loadUrl("file:///android_asset/demo.html")用于加载应用中assets目录下的demo.html文件。WebViewClient的回调方法用于处理页面加载过程。

方法二：使用WebViewFragment

这种方法比较灵活，可以将WebView封装成Fragment，从而实现在应用中灵活使用。具体实现过程如下：

1.创建一个WebViewFragment类，继承自Fragment，然后在onCreateView()方法中实现WebView的布局和属性设置，代码如下：

```

public class WebViewFragment extends Fragment {

private WebView webView;

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.webview_fragment, container, false);

webView = view.findViewById(R.id.webview);

initWebView();

return view;

}

private void initWebView() {

webView.getSettings().setJavaScriptEnabled(true);

webView.getSettings().setLoadWithOverviewMode(true);

webView.getSettings().setUseWideViewPort(true);

webView.getSettings().setAllowFileAccess(true);

webView.getSettings().setSupportZoom(false);

webView.getSettings().setBuiltInZoomControls(false);

webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);

webView.getSettings().setAppCacheEnabled(true);

//设置WebView属性

webView.setBackgroundColor(getContext().getResources().getColor(android.R.color.transparent));

webView.setWebViewClient(new WebViewClient() {

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

//开始加载页面，可以在此时显示加载进度条等等

super.onPageStarted(view, url, favicon);

}

@Override

public void onPageFinished(WebView view, String url) {

//页面加载完成，可以在此时隐藏加载进度条等等

super.onPageFinished(view, url);

}

@Override

public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {

//页面加载出错，可以在此时给出相应的错误提示

super.onReceivedError(view, request, error);

}

@Override

public void onPageCommitVisible(WebView view, String url) {

super.onPageCommitVisible(view, url);

//页面的DOM结构已经生成并且呈现，可以在此时进行进一步的布局等等

}

});

}

public void loadUrl(String url) {

webView.loadUrl(url);

}

@Override

public void onDestroy() {

super.onDestroy();

if (webView != null) {

webView.removeAllViews();

webView.destroy();

}

}

}

```

其中，R.layout.webview_fragment是WebView的布局文件，代码如下：

```

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/transparent" />

```

在initWebView()方法中，设置WebView的一些属性和WebViewClient的回调方法。在loadUrl()方法中，加载H5页面的URL。

2.在应用的布局文件中，将WebViewFragment嵌入到相应的位置，代码如下：

```

android:id="@+id/webview_fragment"

android:name="com.example.WebViewFragment"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:layout="@layout/webview_fragment" />

```

其中，android:name="com.example.WebViewFragment"是WebViewFragment的类路径。

然后，在应用的代码中，可以通过以下方式来使用WebViewFragment：

```

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

WebViewFragment webViewFragment = (WebViewFragment) getSupportFragmentManager().findFragmentById(R.id.webview_fragment);

webViewFragment.loadUrl("file:///android_asset/demo.html");

}

```

通过findFragmentById()方法找到WebViewFragment，并调用loadUrl()方法加载H5页面。

三、总结

通过以上方法，可以将H5页面嵌入到应用布局中，并使其满屏展示。具体实现方式可以根据应用需求灵活选择。通过WebView和WebViewClient的配合，可以对H5页面的加载和展示过程进行控制，从而实现较为理想的效果。