文档概览/
Live/
UIKit/
iOS/
API Example/
SeatGridView/
Custom Seat View/

Custom Seat View

本文档主要介绍 SeatGridView 如何自定义麦位。

前提条件

在使用 SeatGridView 前，您需要先 集成与登录 SeatGridView ，以便后续功能正常使用。

使用指引

步骤1：将 SeatGridView 添加到视图上

您需要先导入 SeatGridView 模块，然后创建一个 SeatGridView 视图对象，并将其添加到自己的视图上。
iOS
Android
import UIKit
import RTCRoomEngine
import SeatGridView 

class CustomizeSeatViewController: UIViewController {
    private let seatGridView: SeatGridView = {   
      let view = SeatGridView()
      self.seatGridView.setSeatViewDelegate(self)
      return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.seatGridView.setSeatViewDelegate(self)
        // 将 seatGridView 添加到视图上，同时设置好布局约束
    }
}
import com.trtc.uikit.livekit.seatGridView.SeatGridView;

public class CustomizeSeatViewActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SeatGridView seatGridView = new SeatGridView(this);
        addContentView(seatGridView,
                new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    }
}

步骤2：自定义麦位

iOS
Android
若您想自定义麦位视图，需要实现 SeatGridView 的 代理 SGSeatViewDelegate。
protocol SGSeatViewDelegate{
    func seatGridView(_ view: SeatGridView, createSeatView seatInfo: TUISeatInfo) -> UIView?
    func seatGridView(_ view: SeatGridView, updateSeatView seatInfo: TUISeatInfo, seatView: UIView)
    func seatGridView(_ view: SeatGridView, updateUserVolume volume: Int, seatView: UIView)
}
以下为使用示例：
extension CustomizeSeatViewController: SGSeatViewDelegate {
    func seatGridView(_ view: SeatGridView, createSeatView seatInfo: TUISeatInfo) -> UIView? {
        return CustomSeatView(seatInfo: seatInfo)
     }
     
    func seatGridView(_ view: SeatGridView, updateSeatView seatInfo: TUISeatInfo, seatView: UIView) {
        if let seatView = seatView as? CustomSeatView {
            seatView.updateSeatView(withSeatInfo: seatInfo)
        }
    }
    
    func seatGridView(_ view: SeatGridView, updateUserVolume volume: Int, seatView: UIView) {
        if let seatView = seatView as? CustomSeatView {
            seatView.updateSeatView(withVolume: volume)
        }
    }
}

// 请替换成您的 SeatView
class CustomSeatView: UIView { 
    var seatInfo: TUISeatInfo = TUISeatInfo()
    var volume: Int = 0
    
    // ... UI

    init(seatInfo: TUISeatInfo) {
        self.seatInfo = seatInfo
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    
    func updateSeatView(withSeatInfo seatInfo: TUISeatInfo) {
        self.seatInfo = seatInfo
        // ...
    }

    

    func updateSeatView(withVolume volume: Int) {
        self.volume = volume
        // ...
    }
}
若您想自定义麦位视图，需要实现 SeatGridView 的 适配器 SeatViewAdapter。
public interface SeatViewAdapter {
    View createSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo);
    void updateSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo, View seatView);
    void updateUserVolume(SeatGridView seatGridView, int volume, View seatView);
}
以下为使用示例：
seatGridView.setSeatViewAdapter(new VoiceRoomDefine.SeatViewAdapter() {
    @Override
    View createSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) {
        TextView seatUserName = new TextView(CustomizeSeatViewActivity.this);
        seatUserName.setText(seatInfo.userName);
        return seatUserName;
    }
    
    @Override
    void updateSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo, View seatView) {

    }
    
    @Override
    void updateUserVolume(SeatGridView seatGridView, int volume, View seatView) {

    }
});