feat(android): implement DiminaNativeComponentBridge for enhanced touch handling and integrate with WebView for improved native component interaction

dos1in · dos1in · commit a5869b0a36b1 · 2026-05-17T17:29:22.000+08:00
diff --git a/android/dimina/src/main/kotlin/com/didi/dimina/core/Bridge.kt b/android/dimina/src/main/kotlin/com/didi/dimina/core/Bridge.kt
@@ -8,6 +8,7 @@ import com.didi.dimina.common.PathUtils
 import com.didi.dimina.common.Utils
 import com.didi.dimina.common.VersionUtils
 import com.didi.dimina.engine.qjs.JSValue
+import com.didi.dimina.ui.view.DiminaNativeComponentBridge
 import com.didi.dimina.ui.container.DiminaActivity
 import com.didi.dimina.ui.view.DiminaRenderBridge
 import com.didi.dimina.ui.view.postMessage
@@ -48,6 +49,10 @@ class Bridge(
                     invokeHandler = { msg -> messageInvoke("render", msg) },
                     publishHandler = { msg -> messagePublish(msg) }
                 ), DiminaRenderBridge.TAG)
+            options.webview.addJavascriptInterface(
+                DiminaNativeComponentBridge(
+                    touchHandler = { msg -> parent.dispatchNativeComponentTouch(msg) }
+                ), DiminaNativeComponentBridge.TAG)
         }
         // 加载模版页面
         options.webview.loadUrl(
diff --git a/android/dimina/src/main/kotlin/com/didi/dimina/ui/container/DiminaActivity.kt b/android/dimina/src/main/kotlin/com/didi/dimina/ui/container/DiminaActivity.kt
@@ -618,6 +618,10 @@ class DiminaActivity : ComponentActivity() {
         return nativeComponentHost?.handle(apiName, params) ?: false
     }
 
+    fun dispatchNativeComponentTouch(params: JSONObject): Boolean {
+        return nativeComponentHost?.dispatchTouchFromWeb(params) ?: false
+    }
+
     fun clearNativeComponents() {
         nativeComponentHost?.clear()
     }
diff --git a/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/DiminaWebView.kt b/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/DiminaWebView.kt
@@ -50,25 +50,6 @@ fun DiminaWebView(
     }
 
     Box(modifier = modifier.fillMaxSize()) {
-        AndroidView(
-            modifier = Modifier.fillMaxSize(),
-            factory = { context ->
-                val webView = if (enableCache) {
-                    // 使用缓存管理器获取WebView实例
-                    WebViewCacheManager.getWebView(context, onPageCompleted, webViewIdentifier)
-                } else {
-                    // 传统方式创建WebView（使用WebViewCacheManager中的统一配置）
-                    createWebView(context, onPageCompleted)
-                }
-
-                webView.apply {
-                    onInitReady(this)
-                    LogUtils.d(TAG, "WebView initialized with identifier: $webViewIdentifier")
-                    LogUtils.d(TAG, "Cache info: ${getWebViewCacheInfo()}")
-                }
-            }
-        )
-
         AndroidView(
             modifier = Modifier.fillMaxSize(),
             factory = { context ->
@@ -83,6 +64,23 @@ fun DiminaWebView(
                 }
             }
         )
+
+        AndroidView(
+            modifier = Modifier.fillMaxSize(),
+            factory = { context ->
+                if (enableCache) {
+                    // 使用缓存管理器获取WebView实例
+                    WebViewCacheManager.getWebView(context, onPageCompleted, webViewIdentifier)
+                } else {
+                    // 传统方式创建WebView（使用WebViewCacheManager中的统一配置）
+                    createWebView(context, onPageCompleted)
+                }.apply {
+                    onInitReady(this)
+                    LogUtils.d(TAG, "WebView initialized with identifier: $webViewIdentifier")
+                    LogUtils.d(TAG, "Cache info: ${getWebViewCacheInfo()}")
+                }
+            }
+        )
     }
 }
 
@@ -152,3 +150,20 @@ class DiminaRenderBridge(
     }
 }
 
+class DiminaNativeComponentBridge(
+    private val touchHandler: (JSONObject) -> Unit,
+) {
+    @Suppress("unused")
+    @JavascriptInterface
+    fun dispatchTouch(message: String) {
+        try {
+            touchHandler(JSONObject(message))
+        } catch (e: Exception) {
+            LogUtils.e(TAG, "DiminaNativeComponentBridge.dispatchTouch failed: ${e.message}")
+        }
+    }
+
+    companion object {
+        const val TAG = "DiminaNativeComponentBridge"
+    }
+}
diff --git a/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/NativeComponentHost.kt b/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/NativeComponentHost.kt
@@ -3,13 +3,17 @@ package com.didi.dimina.ui.view
 import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.Typeface
+import android.graphics.drawable.Drawable
 import android.graphics.drawable.GradientDrawable
 import android.media.MediaPlayer
 import android.net.Uri
 import android.os.Handler
 import android.os.Looper
+import android.os.SystemClock
 import android.text.TextUtils
 import android.view.Gravity
+import android.view.InputDevice
+import android.view.MotionEvent
 import android.view.View
 import android.webkit.WebView
 import android.widget.FrameLayout
@@ -30,11 +34,12 @@ import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.cancel
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
+import org.json.JSONArray
 import org.json.JSONObject
 import kotlin.math.roundToInt
 
 /**
- * Hosts native components as siblings of WebView and keeps their bounds aligned
+ * Hosts native components behind the WebView and keeps their bounds aligned
  * with DOM placeholders reported from the render layer.
  */
 class NativeComponentHost(
@@ -43,7 +48,10 @@ class NativeComponentHost(
     private val overlay: FrameLayout,
 ) {
     private val components = mutableMapOf<String, NativeComponent>()
+    private val touchDownTimes = mutableMapOf<String, Long>()
+    private val originalWebViewBackground: Drawable? = webView.background
     private val imageScope = CoroutineScope(SupervisorJob() + Dispatchers.Main.immediate)
+    private var webViewTransparent = false
 
     init {
         webView.setOnScrollChangeListener { _, _, _, _, _ ->
@@ -75,16 +83,140 @@ class NativeComponentHost(
         return true
     }
 
+    fun dispatchTouchFromWeb(params: JSONObject): Boolean {
+        val targetId = params.optString("targetId")
+        if (targetId.isEmpty()) {
+            return false
+        }
+        activity.runOnUiThread {
+            dispatchNativeTouch(params)
+        }
+        return true
+    }
+
     fun clear() {
         activity.runOnUiThread {
             webView.setOnScrollChangeListener(null)
             components.values.forEach { it.release() }
             components.clear()
+            touchDownTimes.clear()
+            restoreWebViewBackground()
             imageScope.cancel()
             overlay.removeAllViews()
         }
     }
 
+    private fun dispatchNativeTouch(params: JSONObject) {
+        val targetId = params.optString("targetId")
+        val component = components[targetId] ?: return
+        val targetView = component.view
+        if (targetView.visibility != View.VISIBLE) {
+            return
+        }
+
+        val actionName = params.optString("action")
+        val now = SystemClock.uptimeMillis()
+        if (actionName == TOUCH_ACTION_DOWN) {
+            touchDownTimes[targetId] = now
+        }
+        val downTime = touchDownTimes[targetId] ?: now.also {
+            touchDownTimes[targetId] = it
+        }
+
+        val event = createMotionEvent(params, targetView, downTime, now) ?: return
+        try {
+            targetView.dispatchTouchEvent(event)
+        } finally {
+            event.recycle()
+        }
+
+        if (actionName == TOUCH_ACTION_UP || actionName == TOUCH_ACTION_CANCEL) {
+            touchDownTimes.remove(targetId)
+        }
+    }
+
+    private fun createMotionEvent(
+        params: JSONObject,
+        targetView: View,
+        downTime: Long,
+        eventTime: Long,
+    ): MotionEvent? {
+        val pointers = params.optJSONArray("pointers") ?: return null
+        if (pointers.length() == 0) {
+            return null
+        }
+
+        val actionPointerId = params.optInt("actionPointerId", -1)
+        val actionPointerIndex = findPointerIndex(pointers, actionPointerId)
+        val action = when (params.optString("action")) {
+            TOUCH_ACTION_DOWN -> MotionEvent.ACTION_DOWN
+            TOUCH_ACTION_POINTER_DOWN -> MotionEvent.ACTION_POINTER_DOWN or
+                (actionPointerIndex.coerceAtLeast(0) shl MotionEvent.ACTION_POINTER_INDEX_SHIFT)
+            TOUCH_ACTION_MOVE -> MotionEvent.ACTION_MOVE
+            TOUCH_ACTION_POINTER_UP -> MotionEvent.ACTION_POINTER_UP or
+                (actionPointerIndex.coerceAtLeast(0) shl MotionEvent.ACTION_POINTER_INDEX_SHIFT)
+            TOUCH_ACTION_UP -> MotionEvent.ACTION_UP
+            TOUCH_ACTION_CANCEL -> MotionEvent.ACTION_CANCEL
+            else -> return null
+        }
+
+        val viewportWidth = params.optDouble("viewportWidth", 0.0)
+        val viewportHeight = params.optDouble("viewportHeight", 0.0)
+        val scaleX = if (viewportWidth > 0.0 && webView.width > 0) {
+            webView.width / viewportWidth
+        } else {
+            1.0
+        }
+        val scaleY = if (viewportHeight > 0.0 && webView.height > 0) {
+            webView.height / viewportHeight
+        } else {
+            scaleX
+        }
+
+        val pointerProperties = Array(pointers.length()) { index ->
+            val pointer = pointers.getJSONObject(index)
+            MotionEvent.PointerProperties().apply {
+                id = pointer.optInt("id", index)
+                toolType = MotionEvent.TOOL_TYPE_FINGER
+            }
+        }
+        val pointerCoords = Array(pointers.length()) { index ->
+            val pointer = pointers.getJSONObject(index)
+            MotionEvent.PointerCoords().apply {
+                x = (pointer.optDouble("clientX") * scaleX - targetView.left).toFloat()
+                y = (pointer.optDouble("clientY") * scaleY - targetView.top).toFloat()
+                pressure = 1f
+                size = 1f
+            }
+        }
+
+        return MotionEvent.obtain(
+            downTime,
+            eventTime,
+            action,
+            pointers.length(),
+            pointerProperties,
+            pointerCoords,
+            0,
+            0,
+            1f,
+            1f,
+            0,
+            0,
+            InputDevice.SOURCE_TOUCHSCREEN,
+            0,
+        )
+    }
+
+    private fun findPointerIndex(pointers: JSONArray, pointerId: Int): Int {
+        for (index in 0 until pointers.length()) {
+            if (pointers.getJSONObject(index).optInt("id", -1) == pointerId) {
+                return index
+            }
+        }
+        return 0
+    }
+
     private fun mountComponent(type: String, id: String, params: JSONObject) {
         val existing = components[id]
         if (existing != null && existing.type != type) {
@@ -94,17 +226,47 @@ class NativeComponentHost(
             createComponent(type, id).also { overlay.addView(it.view) }
         }
         component.update(params)
+        updateWebViewBackgroundForNativeComponents()
     }
 
     private fun updateComponent(type: String, id: String, params: JSONObject) {
-        components[id]?.update(params) ?: mountComponent(type, id, params)
+        components[id]?.let { component ->
+            component.update(params)
+            updateWebViewBackgroundForNativeComponents()
+        } ?: mountComponent(type, id, params)
     }
 
     private fun unmountComponent(id: String) {
         components.remove(id)?.let { component ->
+            touchDownTimes.remove(id)
             component.release()
             overlay.removeView(component.view)
+            updateWebViewBackgroundForNativeComponents()
+        }
+    }
+
+    private fun updateWebViewBackgroundForNativeComponents() {
+        val hasVisibleNativeComponent = components.values.any { component ->
+            component.view.visibility == View.VISIBLE
+        }
+        if (hasVisibleNativeComponent && !webViewTransparent) {
+            webView.setBackgroundColor(Color.TRANSPARENT)
+            webViewTransparent = true
+        } else if (!hasVisibleNativeComponent && webViewTransparent) {
+            restoreWebViewBackground()
+        }
+    }
+
+    private fun restoreWebViewBackground() {
+        if (!webViewTransparent) {
+            return
+        }
+        if (originalWebViewBackground != null) {
+            webView.background = originalWebViewBackground
+        } else {
+            webView.setBackgroundColor(Color.WHITE)
         }
+        webViewTransparent = false
     }
 
     private fun createComponent(type: String, id: String): NativeComponent {
@@ -748,6 +910,12 @@ class NativeComponentHost(
         private const val COVER_IMAGE_TYPE = "native/cover-image"
         private const val TIME_UPDATE_INTERVAL_MS = 250L
         private const val FIRST_FRAME_SEEK_MS = 1
+        private const val TOUCH_ACTION_DOWN = "down"
+        private const val TOUCH_ACTION_POINTER_DOWN = "pointerDown"
+        private const val TOUCH_ACTION_MOVE = "move"
+        private const val TOUCH_ACTION_POINTER_UP = "pointerUp"
+        private const val TOUCH_ACTION_UP = "up"
+        private const val TOUCH_ACTION_CANCEL = "cancel"
         private val SUPPORTED_TYPES = setOf(VIDEO_TYPE, COVER_VIEW_TYPE, COVER_IMAGE_TYPE)
     }
 
diff --git a/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/NativeComponentOverlay.kt b/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/NativeComponentOverlay.kt
@@ -1,42 +1,13 @@
 package com.didi.dimina.ui.view
 
 import android.content.Context
-import android.view.MotionEvent
-import android.view.View
 import android.widget.FrameLayout
 
 /**
- * Transparent native component layer above the WebView.
+ * Transparent native component layer below the WebView.
  *
- * It only consumes touches that hit visible native children, so normal WebView
- * interactions still work in empty overlay areas.
+ * The WebView stays on top so normal HTML can cover native components. Touches
+ * for native placeholders are forwarded explicitly from the render layer after
+ * DOM hit testing.
  */
-class NativeComponentOverlay(context: Context) : FrameLayout(context) {
-    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
-        if (!hasTouchableChildAt(ev.x, ev.y)) {
-            return false
-        }
-        return super.dispatchTouchEvent(ev)
-    }
-
-    private fun hasTouchableChildAt(x: Float, y: Float): Boolean {
-        val children = (0 until childCount)
-            .map { getChildAt(it) }
-            .sortedWith(compareBy<View> { it.z }.thenBy { indexOfChild(it) })
-            .asReversed()
-        for (child in children) {
-            if (child.visibility != View.VISIBLE || !child.isClickable) {
-                continue
-            }
-            if (
-                x >= child.left &&
-                x <= child.right &&
-                y >= child.top &&
-                y <= child.bottom
-            ) {
-                return true
-            }
-        }
-        return false
-    }
-}
+class NativeComponentOverlay(context: Context) : FrameLayout(context)
diff --git a/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/WebViewCacheManager.kt b/android/dimina/src/main/kotlin/com/didi/dimina/ui/view/WebViewCacheManager.kt

Original file line number	Diff line number	Diff line change
`@@ -618,6 +618,10 @@ class DiminaActivity : ComponentActivity() {`
`618`	`618`	`return nativeComponentHost?.handle(apiName, params) ?: false`
`619`	`619`	`}`
`620`	`620`
	`621`	`+ fun dispatchNativeComponentTouch(params: JSONObject): Boolean {`
	`622`	`+ return nativeComponentHost?.dispatchTouchFromWeb(params) ?: false`
	`623`	`+ }`
	`624`	`+`
`621`	`625`	`fun clearNativeComponents() {`
`622`	`626`	`nativeComponentHost?.clear()`
`623`	`627`	`}`