如何在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。
廣告