Customize the background

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to customize the background view of the live audio room.

The steps and reference code below implements the following custom settings, with the following effect:

1. Show the title and roomID of the live audio room in the top left corner.
2. Show a custom background image.

1. Create a class AudioRoomBackgroundView:

class AudioRoomBackgroundView: UIView {

    lazy var roomNameLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 24, weight: .semibold)
        label.textAlignment = .left
        label.numberOfLines = 1;
        label.textColor = UIColor.black

        return label
    }()

    lazy var roomIDLabel: UILabel = {
        let label = UILabel()
        label.textAlignment = .left
        label.font = UIFont.systemFont(ofSize: 12, weight: .regular)
        label.textColor = UIColor.black
        return label
    }()

    lazy var backgroundImageView: UIImageView = {
        let view = UIImageView()
        return view
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(backgroundImageView)
        self.addSubview(roomNameLabel)
        self.addSubview(roomIDLabel)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.setupLayout()
    }

    func setupLayout() {
        self.backgroundImageView.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.height)
        self.roomNameLabel.frame = CGRect(x: 27, y: 57, width: self.frame.width - 27, height: 33)
        self.roomIDLabel.frame = CGRect(x:27, y: self.roomNameLabel.frame.maxY + 2, width: self.frame.width - 27, height: 21)
    }

    public func setBackgroundViewContent(_ roomName: String, roomID: String, image: UIImage) {
        self.roomNameLabel.text = roomName
        self.roomIDLabel.text = roomID
        self.backgroundImageView.image = image
    }

}

2. Set the AudioRoomBackgroundView to ZegoUIKitPrebuiltLiveAudioRoomVC:

class ViewController: UIViewController {

    let selfUserID: String = "userID"
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID
    let yourAppSign: String = "YourAppSign"
    let roomID: String = "YourRoomID"

    @IBAction func startLiveAudio(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveAudioRoomConfig = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        let liveAudioVC = ZegoUIKitPrebuiltLiveAudioRoomVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: selfUserName, roomID: roomID, config: config)
        liveAudioVC.modalPresentationStyle = .fullScreen
        let backgroundView: AudioRoomBackgroundView = AudioRoomBackgroundView(frame: CGRect(x: 0, y: 0, width: liveAudioVC.view.frame.width, height: liveAudioVC.view.frame.height))
        backgroundView.setBackgroundViewContent("Live Audio Room", roomID: roomID, image: UIImage())
        liveAudioVC.setBackgroundView(backgroundView)
        self.present(liveAudioVC, animated: true, completion: nil)
    }
}