如何将Activity中WebView加载逻辑迁移至ViewModel？

Hey there, I get why this feels tricky—most basic WebView examples dump everything in the Activity, but moving logic to ViewModel is totally doable (and good practice for separation of concerns). Let’s walk through this step by step:

Step 1: First, Clarify the Boundaries #

The golden rule here is: ViewModel should never hold a reference to a View (like WebView). ViewModels outlive Activities/Fragments (they survive configuration changes like screen rotations), so holding a View reference would cause memory leaks. Instead, ViewModel handles data and business logic (like managing which URL to load, fetching URLs from APIs/storage), while the Activity handles all WebView-specific UI operations.

Step 2: Create Your WebViewModel #

We'll use LiveData to communicate between ViewModel and Activity—this lets the ViewModel send updates to the UI without holding references. Here's a Kotlin example (Java works similarly with MutableLiveData):

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.launch

class WebViewModel : ViewModel() {
    // MutableLiveData for internal updates, exposed as immutable LiveData to the UI
    private val _targetUrl = MutableLiveData<String>()
    val targetUrl: LiveData<String> = _targetUrl

    // Optional: Handle error states
    private val _loadError = MutableLiveData<String?>()
    val loadError: LiveData<String?> = _loadError

    // Initialize the URL (could be hardcoded, fetched from storage, etc.)
    fun initLoadUrl() {
        // Replace this with your actual URL source
        val initialUrl = "https://example.com"
        _targetUrl.value = initialUrl
    }

    // For user-triggered URL loads (e.g., a button press to load a new page)
    fun loadNewUrl(newUrl: String) {
        // Add validation logic if needed (e.g., ensure it starts with http/https)
        if (newUrl.startsWith("http")) {
            _targetUrl.value = newUrl
        } else {
            _loadError.value = "Invalid URL format"
        }
    }

    // If you need to fetch a URL from an API, add that logic here
    fun fetchUrlFromApi() {
        viewModelScope.launch {
            try {
                // Replace with your actual API call (e.g., via Retrofit)
                // val apiUrl = webRepository.getFeaturedUrl()
                // _targetUrl.value = apiUrl
            } catch (e: Exception) {
                _loadError.value = "Failed to fetch URL: ${e.message}"
            }
        }
    }
}

Step 3: Connect ViewModel to Your Activity #

In your Activity, you'll initialize the WebView, get the ViewModel instance, and observe the LiveData updates to trigger URL loads. You'll also handle WebView callbacks (like page load status) and feed that back to the ViewModel if needed:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebResourceError
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.lifecycle.ViewModelProvider

class WebActivity : AppCompatActivity() {
    private lateinit var webView: WebView
    private lateinit var viewModel: WebViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web)

        // Initialize WebView from your XML layout
        webView = findViewById(R.id.my_webview)
        setupWebView()

        // Get the ViewModel instance
        viewModel = ViewModelProvider(this)[WebViewModel::class.java]

        // Observe URL updates from ViewModel and load into WebView
        viewModel.targetUrl.observe(this) { url ->
            url?.let { webView.loadUrl(it) }
        }

        // Observe error messages (optional, for showing toast/snackbar)
        viewModel.loadError.observe(this) { errorMsg ->
            errorMsg?.let {
                // Show error to user (e.g., Toast.makeText(this, it, Toast.LENGTH_SHORT).show())
                _loadError.value = null // Clear error after showing
            }
        }

        // Trigger initial URL load
        viewModel.initLoadUrl()
    }

    private fun setupWebView() {
        // Configure WebView settings as needed
        val settings = webView.settings
        settings.javaScriptEnabled = true
        settings.setSupportZoom(true)

        // Set up WebViewClient to feed page status back to ViewModel
        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                // Notify ViewModel that page loaded successfully (e.g., for analytics)
                // viewModel.onPageLoaded(url)
            }

            override fun onReceivedError(
                view: WebView?,
                request: WebResourceRequest?,
                error: WebResourceError?
            ) {
                super.onReceivedError(view, request, error)
                viewModel._loadError.value = error?.description.toString()
            }
        }
    }
}

Key Takeaways #

• No View References in ViewModel: This prevents memory leaks and keeps your logic decoupled from the UI.
• LiveData for Communication: It ensures the UI only updates when it's active (avoids crashes if the Activity is destroyed).
• Separate Concerns: ViewModel handles what to load, Activity handles how to load it (WebView setup, UI feedback).

If you're using Java, the core idea is identical—just use MutableLiveData and ViewModelProvider with Java syntax.

内容的提问来源于stack exchange，提问作者Pankaj