自定义麦位

指定用户麦位

语聊房 UIKit（Live Audio Room Kit） 支持为语聊房中的角色设置指定麦位，主要接口如下：

takeSeatIndexWhenJoining：当加入语聊房时（对于主持人和发言人），使用此选项自动设置用户所坐的麦位。
hostSeatIndexes：仅用于设置 主持人 的特殊麦位（不允许发言人和观众就坐）。

自定义麦位布局

语聊房 UIKit 的布局方式，与行和对齐方式相关，如需自定义麦位布局，请参考以下说明：

ZegoLiveAudioRoomLayoutConfig:

rowConfigs(List< ZegoLiveAudioRoomLayoutRowConfig >): 有多少行，以及每行的配置方式。

rowSpacing(int): 每行的间距，必须 ≥ 0。

ZegoLiveAudioRoomLayoutRowConfig:
1. count(int): 每行的麦位数，范围 [1 - 4]。
2. seatSpacing(int): 每个麦位的水平间距，必须 ≥ 0（仅当对齐方式为 FLEX_START、FLEX_END 和 CENTER 时生效）。
3. alignment(ZegoLiveAudioRoomLayoutAlignment): 为列设置的对齐方式。

ZegoLiveAudioRoomLayoutAlignment:
1. FLEX_START: 将麦位尽可能靠近起始位置。
2. FLEX_END: 将麦位尽可能靠近结束位置。
3. CENTER: 将麦位尽可能靠中间位置。
4. SPACE_BETWEEN: 在麦位之间均匀分布剩余空间。
5. SPACE_AROUND: 在麦位之间均匀分布剩余空间，并在第一个和最后一个麦位之前和之后分布一半的空间。
6. SPACE_EVENLY: 在麦位之间均匀分布剩余空间，并在第一个和最后一个麦位之前和之后分布相同的空间。

六种 alignment 效果如下：

以如下麦位设置为例，举例说明自定义设置的实现方式：

第一行的唯一麦位，设置为主持人的特殊麦位。

第二行和第三行的麦位数为 4，对齐方式为 SPACE_AROUND。

Java

Kotlin

public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
            config.takeSeatIndexWhenJoining = 0;
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }

        config.hostSeatIndexes = Collections.singletonList(0);
        config.layoutConfig.rowConfigs = Arrays.asList(
                new ZegoLiveAudioRoomLayoutRowConfig(1, ZegoLiveAudioRoomLayoutAlignment.CENTER),
                new ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND),
                new ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND));

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}

Copied!

class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            config.takeSeatIndexWhenJoining = 0
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }
        config.hostSeatIndexes = listOf(0)
        config.layoutConfig.rowConfigs = Arrays.asList<Any>(
            ZegoLiveAudioRoomLayoutRowConfig(1, ZegoLiveAudioRoomLayoutAlignment.CENTER),
            ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND),
            ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND)
        )

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName, roomID, config
        )
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}

Copied!

自定义麦位的 UI

默认情况下，麦位的用户界面会显示围绕用户头像的声浪。

如果您对声浪样式不满意，或者想自定义前景和背景视图，请相应地使用seatConfig中的配置。

隐藏声浪

默认情况下，声浪会显示出来，如果要隐藏它，请使用showSoundWaveInAudioMode配置。

showSoundWaveInAudioMode: 使用此选项来决定是否显示用户头像周围的声浪。默认情况下显示。

以下是参考代码：

Java

Kotlin

public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }

        config.seatConfig.showSoundWaveInAudioMode = false;

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}

Copied!

class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }

        config.seatConfig.showSoundWaveInAudioMode = false

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName, roomID, config
        )
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}

Copied!

自定义麦位的前景或背景视图

要自定义用户麦位的视图，请根据需要在seatConfig中设置以下属性。

foregroundViewProvider：使用此属性自定义组件或者在视图的顶层添加一些自定义组件，例如显示用户级别的图标。
backgroundColor：使用此属性自定义背景颜色。
backgroundImage：使用此属性自定义背景图像。

以下是效果和参考代码的示例：

Java

Kotlin

public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }
        config.seatConfig.backgroundColor = 0xffcccccc;
        config.seatConfig.foregroundViewProvider = new ZegoLiveAudioRoomSeatForegroundViewProvider() {
            @Override
            public ZegoBaseAudioVideoForegroundView getForegroundView(ViewGroup parent, ZegoUIKitUser uiKitUser, int seatIndex) {
                return new YourCustomAudioForegroundView(parent.getContext(), uiKitUser,seatIndex);
            }
        };

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}

Copied!

class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }

      config.seatConfig.backgroundColor = 0xffcccccc
      config.seatConfig.foregroundViewProvider = object : ZegoLiveAudioRoomSeatForegroundViewProvider() {
            fun getForegroundView(parent:ViewGroup,uiKitUser: ZegoUIKitUser?,seatIndex: int): ZegoBaseAudioVideoForegroundView {
                return YourCustomAudioForegroundView(parent.context, uiKitUser, seatIndex)
            }
        }

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName, roomID, config)
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}

Copied!

自定义麦位打开/关闭状态对应的图标

要自定义麦位打开/关闭状态对应的图标，请根据需要在seatConfig中中设置以下属性。

openIcon：使用此属性自定义麦位的打开图标，通常显示为麦位的默认图标。
closeIcon：使用此属性自定义麦位的关闭图标，当主持人关闭麦位时显示。

以下是参考代码：

Java

Kotlin

public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }
        config.seatConfig.openIcon = yourOpenDrawable;
        config.seatConfig.closeIcon = yourCloseDrawable;       
     

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}

Copied!

class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }

      config.seatConfig.openIcon = yourOpenDrawable;
      config.seatConfig.closeIcon = yourCloseDrawable;       
     

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName, roomID, config)
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}

Copied!