如何在Fragment而非Activity中使用OpenGL绘制图形

问题根因 #

• GLSurfaceView默认生成不透明的surface，会完全遮挡下层布局内容，添加后直接覆盖了原有预置图片，呈现全黑效果
• 未给GLSurfaceView配置正确的布局约束，在ConstraintLayout中直接无参addView会导致布局位置异常
• 未绑定GLSurfaceView和Fragment的生命周期，渲染逻辑异常也会触发黑屏

修复步骤 #

1. 配置GLSurfaceView透明属性 #

创建CustomGLSurfaceView后立即配置透明相关参数，注意setZOrderOnTop必须在设置Renderer前调用才会生效：

customGLSurfaceView.apply {
    // 开启surface置于窗口顶部，支持透明叠加
    setZOrderOnTop(true)
    // 配置像素格式为带透明通道的RGBA_8888
    holder.setFormat(PixelFormat.RGBA_8888)
    // 绑定自定义渲染器
    setRenderer(yourCustomRenderer)
    // 按需渲染可降低性能消耗，需要连续动效可改为RENDERMODE_CONTINUOUSLY
    renderMode = GLSurfaceView.RENDERMODE_WHEN_DIRTY
}

对应渲染器的onDrawFrame方法中，清屏时要设置全透明背景：

// 清屏色alpha通道设为0，保证背景完全透明
GLES20.glClearColor(0f, 0f, 0f, 0f)
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT or GLES20.GL_DEPTH_BUFFER_BIT)
// 后续编写自定义图形绘制逻辑即可

2. 添加正确的布局约束 #

给GLSurfaceView设置ConstraintLayout布局参数，保证和下层布局完全重叠：

val layoutParams = ConstraintLayout.LayoutParams(
    ConstraintLayout.LayoutParams.MATCH_PARENT,
    ConstraintLayout.LayoutParams.MATCH_PARENT
).apply {
    // 约束到父布局四边，和下层预置内容完全对齐
    topToTop = ConstraintLayout.LayoutParams.PARENT_ID
    bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID
    startToStart = ConstraintLayout.LayoutParams.PARENT_ID
    endToEnd = ConstraintLayout.LayoutParams.PARENT_ID
}
fL.addView(customGLSurfaceView, layoutParams)

3. 绑定Fragment生命周期 #

在Fragment的生命周期回调中同步触发GLSurfaceView的对应方法：

override fun onResume() {
    super.onResume()
    customGLSurfaceView.onResume()
}

override fun onPause() {
    super.onPause()
    customGLSurfaceView.onPause()
}

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