主播核心页面（iOS）

import UIKit
import AtomicX

let anchorView: AnchorView

func setupUI() {
    // 步骤1：创建美颜按钮，配置按钮顺序
    let beautyButton = UIButton(type: .system)
    beautyButton.setTitle("美颜", for: .normal)
    // 依次排列：主播连麦、PK、自定义美颜按钮、更多
    anchorView.bottomItems = [.coHost, .battle, .custom(beautyButton), .more]


    // 步骤2：调整直播间信息视图 LiveInfo 样式
    let customLiveInfoView = CustomLiveInfoView()
    anchorView.replace(node: .liveInfo, with: customLiveInfoView)


    // 步骤3：添加“人气榜”浮层挂件
    let rankWidget = RankWidgetView()
    // 将挂件视图添加到专属的挂件图层
    anchorView.overlayView.addSubview(rankWidget)
    // 设置布局约束，贴靠在左上角下方
    rankWidget.snp.makeConstraints { make in
        make.top.equalToSuperview().offset(120)
        make.leading.equalToSuperview().offset(12)
        make.width.equalTo(70)
        make.height.equalTo(30)
    }
}

import UIKit
import AtomicX

let anchorView: AnchorView

// 示例场景：在底部工具栏仅保留连麦功能，并新增一个商品列表触发按钮
func adjustBottomBar() {
    // 步骤1：准备自定义按钮视图
    let goodsButton = UIButton(type: .custom)
    goodsButton.setImage(UIImage(named: "shop_cart"), for: .normal)
    
    // 步骤2：更新底部按钮数组
    anchorView.bottomItems = [
        .coHost, 
        .custom(goodsButton)
    ]
}

import UIKit
import AtomicX

let anchorView: AnchorView

// 示例场景：在右上角保留观众人数、关闭房间按钮，新增一个“举报”按钮
func adjustTopRightBar() {
   // 步骤1：准备自定义按钮视图
    let reportButton = UIButton(type: .custom)
    reportButton.setImage(UIImage(named: "report_btn"), for: .normal)

    // 步骤2: 根据显示顺序更新顶部按钮数组
    anchorView.topRightItems = [.audienceCount, .custom(reportButton), .close]
}

class MyInfoView: UIView {
    init() {
        super.init(frame: .zero)
        let label = UILabel()
        label.text = "直播中"
        addSubview(label)
        label.snp.makeConstraints { make in
            make.edges.equalToSuperview().inset(12)  //由子视图撑开视图
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class MyInfoView: UIView {
    override var intrinsicContentSize: CGSize {
        CGSize(width: 200, height: 44)
    }
}

let anchorView: AnchorView

// 示例场景：使用自定义的直播信息视图替换默认区域
func replaceLiveInfoNode() {
    // 步骤1：初始化符合布局规则的自定义视图
    let customInfoView = MyInfoView()
    customInfoView.backgroundColor = .darkGray
    
    // 步骤2：调用替换接口更新特定节点
    anchorView.replace(node: .liveInfo, with: customInfoView)
}

import UIKit
import AtomicX

class YourAnchorViewController {
    var anchorView: AnchorView?
    
    // 示例场景：为自定义的直播信息视图绑定点击事件，并复用 SDK 内置的主播信息面板
    func setupCustomLiveInfoNode() {
        // 步骤1：初始化自定义视图并绑定手势事件
        let customLiveInfoView = MyInfoView() // 自定义的直播信息view
        customLiveInfoView.backgroundColor = .darkGray
        
        // 开启用户交互并添加点击手势
        customLiveInfoView.isUserInteractionEnabled = true
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleLiveInfoClick))
        customLiveInfoView.addGestureRecognizer(tapGesture)
        
        // 将自定义视图替换到直播信息节点
        anchorView?.replace(node: .liveInfo, with: customLiveInfoView)
    }

    // 步骤2：触发内置逻辑或业务代码
    @objc func handleLiveInfoClick() {
        // UI 节点视图自定义，但点击逻辑依然复用内置的主播信息弹窗
        anchorView?.perform(.showLiveInfo)
        // 或是弹出您自己实现的主播信息弹窗
    }
}

import UIKit
import AtomicX
import AtomicXCore // 引入底层数据接口进行业务开发

// 步骤1：构建自定义观众列表视图
class CustomAudienceListView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .white
        setupUI()
        bindLiveData()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        // 在此添加您的自定义 UI 控件，例如展示观众头像、用户等级等
    }
    
    private func bindLiveData() {
        // 使用 AtomicXCore 提供的核心接口获取当前房间状态或用户数据
        // 拿到核心数据后刷新上方构建的自定义 UI
    }
}

// 示例场景：从屏幕底部向上滑出一个高度占屏幕一半的完全自定义面板
func presentBusinessPanel(from parentViewController: UIViewController) {
    // 步骤2：配置弹窗容器参数
    let config = AtomicPopover.AtomicPopoverConfig(
        position: .bottom,
        height: .ratio(0.5), 
        animation: .slideFromBottom
    )
    
    // 步骤3：弹出自定义视图
    let audienceListView = CustomAudienceListView()
    let popover = AtomicPopover(contentView: audienceListView, configuration: config)
    
    parentViewController.present(popover, animated: true)
}

import UIKit
import TUILiveKit

class LiveRoomController: UIViewController {
    var anchorView: AnchorView?


    // 示例场景：在画面左上角悬浮显示红包挂件，点击后联动弹出前文定义的业务面板
    func addRedPacketWidget() {
        // 步骤 1：创建挂件视图并开启交互
        let redPacketWidget = UIImageView(image: UIImage(named: "red_packet_icon"))
        redPacketWidget.frame = CGRect(x: 15, y: 120, width: 60, height: 60)
        redPacketWidget.isUserInteractionEnabled = true
        
        // 步骤 2：绑定点击事件
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleRedPacketClick))
        redPacketWidget.addGestureRecognizer(tapGesture)
        
        // 步骤 3：添加至覆盖图层
        anchorView?.overlayView.addSubview(redPacketWidget)
    }
    
    @objc func handleRedPacketClick() {
        // 在此处调用前文写好的 presentBusinessPanel 方法，弹出深度定制的业务视图
        //  presentBusinessPanel(from: self)
    }
}