观众核心页面（Android）

import android.os.Bundle
import android.view.Gravity
import android.widget.FrameLayout
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.trtc.uikit.livekit.features.audienceview.AudienceLiveView
import com.trtc.uikit.livekit.features.audienceview.AudienceView
import com.trtc.uikit.livekit.features.audienceview.AudienceViewDefine
import com.trtc.uikit.livekit.features.audienceview.AudienceViewDefine.AudienceBottomItem
import io.trtc.tuikit.atomicx.common.util.ScreenUtil.dip2px
import io.trtc.tuikit.atomicxcore.api.live.LiveInfo

class AudienceActivity : AppCompatActivity(), AudienceViewDefine.AudienceViewListener {
    private var currentLiveView: AudienceLiveView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // 初始化容器 View
        val audienceView = AudienceView(this)
        setContentView(audienceView)
        
        // 注册监听并初始化
        audienceView.addListener(this)
        audienceView.init(this, "your_room_id")
    }

    // 业务方法：展示商品列表页
    private fun showProductListPanel() {
        println("展示商品列表页...")
    }

    // 业务方法：模拟收到 IM 商品推送通知
    fun onReceiveProductPushMessage() {
        // 必须作用于当前正在展示的 active 视图
        val liveView = currentLiveView ?: return

        val productCard = AudienceProductCardView(this)
        productCard.setOnClickListener { showProductListPanel() }

        val params = FrameLayout.LayoutParams(dip2px(150f), FrameLayout.LayoutParams.WRAP_CONTENT).apply {
            gravity = Gravity.BOTTOM or Gravity.END
            rightMargin = dip2px(12f)
            bottomMargin = dip2px(100f)
        }
        liveView.overlayView.addView(productCard, params)
    }

    // --- AudienceViewListener 回调实现 ---
    
    override fun onCreateLiveView(liveView: AudienceLiveView, liveInfo: LiveInfo) {
        // 配置底部操作栏：隐藏连麦功能，并添加自定义“购物车”按钮
        val shopCartBtn = ImageView(this).apply {
            setOnClickListener { showProductListPanel() }
        }

        liveView.bottomItems = listOf(
            AudienceBottomItem.Gift,
            AudienceBottomItem.Like,
            AudienceBottomItem.Custom(shopCartBtn)
        )
    }

    override fun onLiveViewDidAppear(liveView: AudienceLiveView, liveInfo: LiveInfo) {
        currentLiveView = liveView
    }

    override fun onLiveViewDidDisappear(liveView: AudienceLiveView, liveInfo: LiveInfo) {
        if (currentLiveView === liveView) {
            currentLiveView = null
        }
    }
    
    override fun onLiveEnded(roomId: String, ownerName: String, ownerAvatarUrl: String) {}
    override fun onClickFloatWindow() {}
}

class AudienceProductCardView(context: android.content.Context) : android.view.View(context) {
    // 自定义的商品卡片
}

override fun onCreateLiveView(audienceView: AudienceLiveView, liveInfo: LiveInfo) {
    // 步骤 1：准备自定义按钮视图
    val shopButton = ImageView(audienceView.context).apply {
        setImageResource(R.drawable.shop_cart)
    }
    
    // 步骤 2：更新底部按钮数组，保留送礼，隐藏连麦，新增商品按钮
    audienceView.bottomItems = listOf(
        AudienceBottomItem.Gift,
        AudienceBottomItem.Custom(shopButton)
    )
}

override fun onCreateLiveView(audienceView: AudienceLiveView, liveInfo: LiveInfo) {
    // 步骤 1：准备自定义按钮视图
    val reportButton = ImageView(audienceView.context).apply {
        setImageResource(R.drawable.report_btn)
    }

    // 步骤 2: 更新顶部按钮数组（保留人数和关闭，新增举报）
    audienceView.topRightItems = listOf(
        AudienceViewDefine.AudienceTopRightItem.AudienceCount,
        AudienceViewDefine.AudienceTopRightItem.Custom(reportButton),
        AudienceViewDefine.AudienceTopRightItem.Close
    )
}

class MyInfoView(context: Context) : FrameLayout(context) {
    init {
        val label = TextView(context).apply {
            text = "直播中"
            setPadding(dip2px(12f), dip2px(12f), dip2px(12f), dip2px(12f))
        }
        val params = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
        addView(label, params)
    }
}

class MyInfoView(context: Context) : FrameLayout(context) {
    init {
        // 赋予固定的宽高属性
        layoutParams = LayoutParams(dip2px(200f), dip2px(44f))
        setBackgroundColor(Color.DKGRAY)
    }
}

override fun onCreateLiveView(liveView: AudienceLiveView, liveInfo: LiveInfo) {
    // 步骤 1：初始化符合布局规则的自定义视图
    val customInfoView = MyInfoView(liveView.context)
    
    // 步骤 2：调用替换接口更新特定节点
    liveView.replace(AudienceViewDefine.AudienceNode.LIVE_INFO, customInfoView)
}

override fun onCreateLiveView(audienceView: AudienceLiveView, liveInfo: LiveInfo) {
    val btn = MyGiftButton(audienceView.context, audienceView)
    audienceView.bottomItems = listOf(AudienceBottomItem.Custom(btn))
}

class MyGiftButton(context: Context, private val liveView: AudienceLiveView) : androidx.appcompat.widget.AppCompatImageView(context) {
    init {
        setImageResource(R.drawable.custom_gift)
        setOnClickListener {
            // 弹出默认礼物面板
            liveView.perform(AudienceViewDefine.AudienceAction.SHOW_GIFT_PANEL)
            // 或者触发自定义逻辑
            // presentCustomPanel()
        }
    }
}

import android.content.Context
import android.graphics.Color
import android.widget.FrameLayout
import io.trtc.tuikit.atomicx.widget.basicwidget.popover.AtomicPopover

// 步骤1：构建自定义业务视图（如：观众列表）
class CustomAudienceListView(context: Context) : FrameLayout(context) {
    init {
        setBackgroundColor(Color.WHITE)
        setupUI()
        bindLiveData()
    }
    
    private fun setupUI() {
        // 在此添加您的自定义 UI 控件，例如展示观众头像、用户等级等列表
    }
    
    private fun bindLiveData() {
        // 使用 AtomicXCore 提供的核心接口获取当前房间状态或用户数据
        // 例如：LiveAudienceStore.create(liveID)...
        // 拿到核心数据后刷新上方构建的自定义 UI
    }
}

// 示例场景：从屏幕底部向上滑出一个高度占屏幕 50% 的完全自定义面板
fun presentBusinessPanel(context: Context) {
    // 步骤2：实例化弹窗容器，指定从底部弹出
    val popover = AtomicPopover(context, AtomicPopover.PanelGravity.BOTTOM)
    
    // 步骤3：配置并展示自定义视图
    // 设置面板高度为屏幕高度的 50%（也可以使用 WrapContent 自适应高度）
    popover.setPanelHeight(AtomicPopover.PanelHeight.Ratio(0.5f))
    
    // 实例化自定义业务视图
    val audienceListView = CustomAudienceListView(context)
    
    // 将视图填入 Popover 并展示
    popover.setContent(audienceListView)
    popover.show()
}

class LiveRoomActivity : AppCompatActivity() {
    // 在 AudienceViewListener 中获取当前的 liveView
    private var currentLiveView: AudienceLiveView? = null 

    // 示例场景：在画面左上角悬浮显示红包挂件，点击后联动弹出业务面板
    fun addRedPacketWidget() {
        val activeView = currentLiveView ?: return
        
        // 步骤 1 & 2：创建挂件视图并开启交互
        val redPacketWidget = ImageView(this).apply {
            setImageResource(R.drawable.red_packet_icon)
            setOnClickListener { handleRedPacketClick() }
        }
        
        val params = FrameLayout.LayoutParams(dip2px(60f), dip2px(60f)).apply {
            gravity = Gravity.TOP or Gravity.START
            topMargin = dip2px(120f)
            leftMargin = dip2px(15f)
        }
        
        // 步骤 3：添加至覆盖图层
        activeView.overlayView.addView(redPacketWidget, params)
    }
    
    private fun handleRedPacketClick() {
        // 在此处调用前文写好的 presentBusinessPanel 方法，弹出深度定制的业务视图
        // presentBusinessPanel(this)
    }
}

// ❌ 错误做法：在外部持有一个共享的视图实例
val sharedBrandView = MyBrandView(context)

override fun onCreateLiveView(audienceView: AudienceLiveView, liveInfo: LiveInfo) {
    // ⚠️ 警告：当预加载下一个 liveView 时，复用同一个 View 实例会导致 Parent 冲突！
    audienceView.replace(AudienceNode.LIVE_INFO, sharedBrandView)
}

override fun onCreateLiveView(audienceView: AudienceLiveView, liveInfo: LiveInfo) {
    // ✅ 正确做法：每次触发回调时，都实例化一个全新的自定义视图
    val newBrandView = MyBrandView(audienceView.context)
    audienceView.replace(AudienceNode.LIVE_INFO, newBrandView)
}