이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
문서 개요/
Live/
UIKit/
iOS/
API Example/
SeatGridView/
Custom Seat View/

Custom Seat View

This document mainly introduces how to customize a SeatGridView.

Prerequisites

Before using SeatGridView, you need to integrate and log in to SeatGridView to ensure the subsequent features work properly.

Usage guide

Step 1: Adding SeatGridView to the View

You need to import the SeatGridView module first, then create a SeatGridView object and add it to your view.
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)
        // Add seatGridView to the view and set layout constraints
    }
}
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));
    }
}

Step 2: Customizing a Seat

iOS
Android
If you want to customize the seat view, you need to implement the SeatGridView delegate 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)
}
The following is a usage example:
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)
        }
    }
}

// Please replace with your 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
        // ...
    }
}
If you want to customize the seat view, you need to implement the SeatGridView adapter 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);
}
The following is a usage example:
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) {

    }
});