Live Audio Room Kit
  • iOS : Swift
  • Android
  • Flutter
  • React Native
  • Overview
  • Quick start
  • Customize prebuilt features
    • Overview
    • Set avatar for users
    • Customize the seats
    • Customize the background
    • Set a leave confirmation dialog
    • Modify user interface text
    • Customize the bottom menu bar buttons
  • Advanced features
    • Send virtual gifts
  • API Reference
    • API
    • Event
  • Documentation
  • Live Audio Room Kit
  • Customize prebuilt features
  • Customize the bottom menu bar buttons

Customize the bottom menu bar buttons

Last updated:2023-06-04 16:49

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to configure the buttons of the menu bar. You can remove the default buttons or add custom ones. If necessary, you can configure the bottomMenuBarConfig:

  1. hostButtons: Use this to set the prebuilt-in buttons for a host to use.
  2. speakerButtons : Use this to set the prebuilt-in buttons for a speaker to use.
  3. audienceButtons : Use this to set the prebuilt-in buttons for an audience to use.
  4. maxCount: Maximum number of buttons that can be displayed by the menu bar. Value range [1 - 5], the default value is 5.
  5. showInRoomMessageButton : Whether to display the message button, displayed by default.

If the total number of built-in buttons and custom buttons does not exceed maxCount, all buttons will be displayed. Otherwise, other buttons that cannot be displayed will be hidden in the three dots (⋮) button. Clicking this button will pop up the bottom sheet to display the remaining buttons. The following shows the effect and the reference code:

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()
         config.bottomMenuBarConfig.hostButtons = [.showMemberListButton, .toggleMicrophoneButton]
        config.bottomMenuBarConfig.audienceButtons = [.showMemberListButton, .toggleMicrophoneButton]
        config.bottomMenuBarConfig.speakerButtons = [.showMemberListButton, .toggleMicrophoneButton]
        let liveAudioVC = ZegoUIKitPrebuiltLiveAudioRoomVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: selfUserName, roomID: roomID, config: config)

        liveAudioVC.modalPresentationStyle = .fullScreen
        self.present(liveAudioVC, animated: true, completion: nil)
    }
}

In addition, you can also achieve the same effect with these two methods: addButtonToMenuBar, and the clearBottomBarExtendButtons.

@objc public func addButtonToMenuBar(_ button: UIButton, role: ZegoLiveAudioRoomRole)

@objc public func clearBottomBarExtendButtons(_ role: ZegoLiveAudioRoomRole) 
Page Directory