如何在Android中使用Firebase创建动态WebView?


WebView 允许用户在其 Android 应用中集成网页,从而带来集成的用户体验。虽然静态 WebView 实现非常简单,但该组件的真正用处在于它能够从多个来源(如 Firebase)动态加载内容,以使应用保持最新信息。

使用的方法

  • Firebase 与动态 WebView 集成

Firebase 与动态 WebView 集成

算法

  • 设置 Firebase

  • 设置 Android 项目

  • 创建 WebViewActivity

  • 创建布局文件

  • 更新 AndroidManifest.xml 文件

示例

XML 程序

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">

	<!--Web View for displaying our web pages-->
	<WebView
		android:id="@+id/idWebView"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />
	
</RelativeLayout>

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Java 程序

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

public class MainActivity extends AppCompatActivity {

	// creating a variable for our Firebase Database.
	FirebaseDatabase firebaseDatabase;
	
	// creating a variable for our Database
	// Reference for Firebase.
	DatabaseReference databaseReference;
	
	// creating a variable for our webview
	private WebView webView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		// initializing variable for web view.
		webView = findViewById(R.id.idWebView);
		
		// below line is used to get the instance
		// of our Firebase database.
		firebaseDatabase = FirebaseDatabase.getInstance();
		
		// below line is used to get reference for our database.
		databaseReference = firebaseDatabase.getReference("url");
		
		// calling method to initialize
		// our web view.
		initializeWebView();
	}

	private void initializeWebView() {

		// calling add value event listener method for getting the values from database.
		databaseReference.addValueEventListener(new ValueEventListener() {
			@Override
			public void onDataChange(@NonNull DataSnapshot snapshot) {
				// this method is call to get the realtime updates in the data.
				// this method is called when the data is changed in our Firebase console.
				// below line is for getting the data from snapshot of our database.
				String webUrl = snapshot.getValue(String.class);
				
				// after getting the value for our webview url we are
				// setting our value to our webview view in below line.
				webView.loadUrl(webUrl);
				webView.getSettings().setJavaScriptEnabled(true);
				webView.setWebViewClient(new WebViewClient());
			}

			@Override
			public void onCancelled(@NonNull DatabaseError error) {
				// calling on cancelled method when we receive
				// any error or we are not able to get the data.
				Toast.makeText(MainActivity.this, "Fail to get URL.", Toast.LENGTH_SHORT).show();
			}
		});
	}
}

输出

结论

在本课中,我们学习了如何在 Android 中使用 Firebase 集成开发动态 WebView。通过将 Android 提供的强大 WebView 组件与 Firebase 的实时数据功能相结合,您可以在 Android 应用中构建流畅且引人入胜的用户体验。我们首先为您的 Android 应用配置 Firebase,确保您拥有所有必要的依赖项和配置文件。然后,我们开发了一个 WebViewActivity 作为 WebView 的容器。在此活动中,我们初始化了 WebView 并配置了其设置,例如启用 JavaScript 并配置 WebViewClient 和 WebChromeClient。

更新于: 2023年7月31日

407 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.