主播核心页面（Android）

import android.view.View
import android.widget.Button
import android.widget.FrameLayout
import com.trtc.uikit.livekit.features.anchorview.*

fun setupUI(anchorView: AnchorView) {
    val context = anchorView.context

    // 步骤1：创建美颜按钮，配置按钮顺序
    val beautyButton = Button(context).apply {
        text = "美颜"
    }
    // 依次排列：主播连麦(CoHost)、PK(Battle)、自定义美颜按钮、更多(More)
    anchorView.bottomItems = listOf(
        AnchorBottomItem.CoHost,
        AnchorBottomItem.Battle,
        AnchorBottomItem.Custom(beautyButton),
        AnchorBottomItem.More
    )

    // 步骤2：调整直播间信息视图 LiveInfo 样式
    val customLiveInfoView = CustomLiveInfoView(context)
    anchorView.replace(AnchorNode.LIVE_INFO, customLiveInfoView)

    // 步骤3：添加“人气榜”浮层挂件
    val rankWidget = RankWidgetView(context)
    // 设置布局参数，贴靠在左上角下方
    val params = FrameLayout.LayoutParams(dp2px(70f), dp2px(30f)).apply {
        topMargin = dp2px(120f)
        leftMargin = dp2px(12f)
    }
    // 将挂件视图添加到专属的挂件图层
    anchorView.overlayView.addView(rankWidget, params)
}

// 辅助工具方法（示例）
fun dp2px(dpValue: Float): Int {
    val scale = Resources.getSystem().displayMetrics.density
    return (dpValue * scale + 0.5f).toInt()
}

// 示例场景：在底部工具栏仅保留连麦功能(CoHost)，并新增一个商品列表触发按钮
fun adjustBottomBar(anchorView: AnchorView) {
    val context = anchorView.context
    
    // 步骤1：准备自定义按钮视图
    val goodsButton = ImageView(context).apply {
        setImageResource(R.drawable.shop_cart)
    }
    
    // 步骤2：更新底部按钮数组
    anchorView.bottomItems = listOf(
        AnchorBottomItem.CoHost, 
        AnchorBottomItem.Custom(goodsButton)
    )
}

// 示例场景：在右上角保留观众人数、关闭房间按钮，新增一个“举报”按钮
fun adjustTopRightBar(anchorView: AnchorView) {
    val context = anchorView.context

    // 步骤1：准备自定义按钮视图
    val reportButton = ImageView(context).apply {
        setImageResource(R.drawable.report_btn)
    }

    // 步骤2: 根据显示顺序更新顶部按钮数组
    anchorView.topRightItems = listOf(
        AnchorTopRightItem.AudienceCount, 
        AnchorTopRightItem.Custom(reportButton), 
        AnchorTopRightItem.Close
    )
}

// 示例场景：使用自定义的直播信息视图替换默认区域
fun replaceLiveInfoNode(anchorView: AnchorView) {
    val context = anchorView.context
    
    // 步骤1：初始化符合业务需求的自定义视图
    val customInfoView = MyInfoView(context).apply {
        setBackgroundColor(Color.DKGRAY)
    }
    
    // 步骤2：调用替换接口更新特定节点
    anchorView.replace(AnchorNode.LIVE_INFO, customInfoView)
}

class MyInfoView(context: Context) : FrameLayout(context) {
    init {
        val label = TextView(context).apply {
            text = "直播中"
            setPadding(24, 24, 24, 24)
        }
        // 使用 WRAP_CONTENT 适应文字大小
        val params = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
        addView(label, params)
    }
}

// 示例场景：为自定义的直播信息视图绑定点击事件，并复用 SDK 内置的主播信息面板
fun setupCustomLiveInfoNode(anchorView: AnchorView) {
    val customLiveInfoView = MyInfoView(anchorView.context)
    
    // 步骤1：开启用户交互并添加点击事件
    customLiveInfoView.isClickable = true
    customLiveInfoView.setOnClickListener {
        // 步骤2：点击逻辑依然复用内置的主播信息弹窗
        anchorView.perform(AnchorAction.SHOW_LIVE_INFO)
        // 或者在此处弹出您自己实现的主播信息弹窗
    }
    
    anchorView.replace(AnchorNode.LIVE_INFO, customLiveInfoView)
}

import android.content.Context
import android.graphics.Color
import android.widget.FrameLayout
import io.trtc.tuikit.atomicx.widget.basicwidget.popover.AtomicPopover
// 引入底层数据接口进行业务开发
import io.trtc.tuikit.atomicxcore.api.live.LiveAudienceStore 

// 步骤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()
}

// 示例场景：在画面左上角悬浮显示红包挂件，点击后联动弹出前文定义的业务面板
fun addRedPacketWidget(anchorView: AnchorView) {
    val context = anchorView.context
    
    // 步骤 1：创建挂件视图并开启交互
    val redPacketWidget = ImageView(context).apply {
        setImageResource(R.drawable.red_packet_icon)
        isClickable = true
    }
    
    // 步骤 2：绑定点击事件
    redPacketWidget.setOnClickListener {
        presentBusinessPanel(context)
    }
    
    // 步骤 3：设置布局属性并添加至覆盖图层
    val params = FrameLayout.LayoutParams(dp2px(60f), dp2px(60f)).apply {
        leftMargin = dp2px(15f)
        topMargin = dp2px(120f)
    }
    anchorView.overlayView.addView(redPacketWidget, params)
}