修复GXView不同圆角的效果 (#469)

alibaba · Dec 20, 2023 · afee717 · afee717
1 parent 036b2ac
commit afee717
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 31 deletions.
diff --git a/GaiaXAndroid/src/main/kotlin/com/alibaba/gaiax/render/view/GXViewExt.kt b/GaiaXAndroid/src/main/kotlin/com/alibaba/gaiax/render/view/GXViewExt.kt
@@ -219,6 +219,7 @@ fun View.setBackgroundColorAndBackgroundImageWithRadius(style: GXStyle?) {
         }
     }
 
+    // 圆角实现
     if (background is GXColorGradientDrawable || background is GXLinearColorGradientDrawable) {
         (background as GradientDrawable).cornerRadii = style?.borderRadius?.value
     }

diff --git a/GaiaXAndroid/src/main/kotlin/com/alibaba/gaiax/render/view/basic/GXView.kt b/GaiaXAndroid/src/main/kotlin/com/alibaba/gaiax/render/view/basic/GXView.kt
@@ -19,6 +19,8 @@ package com.alibaba.gaiax.render.view.basic
 import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Outline
+import android.graphics.Path
+import android.graphics.RectF
 import android.graphics.drawable.GradientDrawable
 import android.os.Build
 import android.util.AttributeSet
@@ -37,6 +39,7 @@ import com.alibaba.gaiax.render.view.blur.GXBlurHelper
 import com.alibaba.gaiax.render.view.drawable.GXRoundCornerBorderGradientDrawable
 import com.alibaba.gaiax.template.GXBackdropFilter
 
+
 /**
  * @suppress
  */
@@ -79,6 +82,7 @@ open class GXView : AbsoluteLayout, GXIViewBindData, GXIRootView, GXIRoundCorner
             val br = radius[6]
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                 if (tl == tr && tr == bl && bl == br && tl > 0) {
+                    path = null
                     this.clipToOutline = true
                     this.outlineProvider = object : ViewOutlineProvider() {
                         override fun getOutline(view: View, outline: Outline) {
@@ -91,11 +95,44 @@ open class GXView : AbsoluteLayout, GXIViewBindData, GXIRootView, GXIRoundCorner
                 } else {
                     this.clipToOutline = false
                     this.outlineProvider = null
+
+                    // 异圆角用path实现
+                    if (path == null) {
+                        path = Path()
+                    } else {
+                        path?.reset()
+                    }
+                    path?.addRoundRect(RectF(0f, 0f, this.layoutParams.width.toFloat(), this.layoutParams.height.toFloat()), radius, Path.Direction.CW)
                 }
             }
         }
     }
 
+    var path: Path? = null
+
+    override fun onDraw(canvas: Canvas?) {
+        super.onDraw(canvas)
+    }
+
+    override fun dispatchDraw(canvas: Canvas) {
+        // 裁剪背景
+        path?.let { path ->
+            canvas.clipPath(path)
+        }
+
+        if (gxBackdropFilter != null) {
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+                gxBlurHelper?.let { gxBlurHelper ->
+                    gxBlurHelper.callbackDispatchDraw(canvas) {
+                        super.dispatchDraw(canvas)
+                    }
+                }
+            }
+        } else {
+            super.dispatchDraw(canvas)
+        }
+    }
+
     override fun setRoundCornerBorder(borderColor: Int, borderWidth: Float, radius: FloatArray) {
         if (background == null) {
             val target = GXRoundCornerBorderGradientDrawable()
@@ -175,19 +212,6 @@ open class GXView : AbsoluteLayout, GXIViewBindData, GXIRootView, GXIRoundCorner
         }
     }
 
-    override fun dispatchDraw(canvas: Canvas) {
-        if (gxBackdropFilter != null) {
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
-                gxBlurHelper?.let { gxBlurHelper ->
-                    gxBlurHelper.callbackDispatchDraw(canvas) {
-                        super.dispatchDraw(canvas)
-                    }
-                }
-            }
-        } else {
-            super.dispatchDraw(canvas)
-        }
-    }
 
     override fun release() {
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {

diff --git a/...droidDemo/app/src/main/kotlin/com/alibaba/gaiax/demo/fastpreview/GXFastPreviewActivity.kt b/...droidDemo/app/src/main/kotlin/com/alibaba/gaiax/demo/fastpreview/GXFastPreviewActivity.kt
@@ -131,26 +131,28 @@ class GXFastPreviewActivity : AppCompatActivity(), GXStudioClient.IFastPreviewLi
                     // 创建视图
                     gxView = GXTemplateEngine.instance.createView(gxTemplateItem, gxMeasureSize)
 
-                    // 绑定数据
-                    GXTemplateEngine.instance.bindData(gxView, gxTemplateData)
-
-                    // 将数据加入页面中
-                    fastPreviewRoot.addView(gxView, 0)
-
-                    // 获取模板信息
-                    val gxTemplateInfo = GXTemplateEngine.instance.getGXTemplateInfo(gxTemplateItem)
-                    if (gxTemplateInfo.isJsExist) {
-
-                        // 设置JS异常监听
-                        GXJSEngineProxy.instance.jsExceptionListener =
-                            object : GXJSEngine.IJsExceptionListener {
-                                override fun exception(data: JSONObject) {
-                                    Log.d(TAG, "exception() called with: data = $data")
+                    gxView?.let {
+                        // 绑定数据
+                        GXTemplateEngine.instance.bindData(gxView, gxTemplateData)
+
+                        // 将数据加入页面中
+                        fastPreviewRoot.addView(gxView, 0)
+
+                        // 获取模板信息
+                        val gxTemplateInfo = GXTemplateEngine.instance.getGXTemplateInfo(gxTemplateItem)
+                        if (gxTemplateInfo.isJsExist) {
+
+                            // 设置JS异常监听
+                            GXJSEngineProxy.instance.jsExceptionListener =
+                                object : GXJSEngine.IJsExceptionListener {
+                                    override fun exception(data: JSONObject) {
+                                        Log.d(TAG, "exception() called with: data = $data")
+                                    }
                                 }
-                            }
 
-                        // 注册容器
-                        GXJSEngineProxy.instance.registerComponentAndOnReady(gxView)
+                            // 注册容器
+                            GXJSEngineProxy.instance.registerComponentAndOnReady(gxView)
+                        }
                     }
                 }
             }